CSS for specific pages

Custom CSS & Theme Design
1

I would like to set css specific for certain pages/notes. How to do that?

More detailed: I have built a weekly template to set weekly notes (Periodic Notes + Calendar plugin). This template adds links to the 7 daily notes, but since I’ve also created notes in folder ‘daily’ that don’t follow the exact naming rule of ‘daily notes’ I added an embedded search query to the template that embeds links to the notes that also belong to that week.
That works fine, but I don’t want to see the default markup. So I created a CSS snippet that changes the CSS for just the embedded query + result, but I want to apply it to just these weekly notes, not the entire vault.

Is that possible? If so, how?

6 Likes
2

Hi @hepabolu, you can do this by adding the cssclass property to your YAML frontmatter. So in your weekly note template, you could add the following to the top of the note:

---
cssclass: "weekly-note"
---

Then in your CSS snippet, make sure to only target pages with the .weekly-note class.

Hope that helps, and if you don’t mind sharing, I’d love to see a screenshot since I’m curious about how people use their weekly notes!

5 Likes
3

Hi @liam thanks! This will get me exactly what I need!

Re weekly notes: I use them as a mini TOC for the week, that ties meeting notes and daily notes together.

---
created: {{tp_date}} {{tp_time}}
tags: 📥/🗒
---

# {{title}}

## Daily Notes

- [[{{monday:GGGG-MM-DD}}]]
- [[{{tuesday:GGGG-MM-DD}}]]
- [[{{wednesday:GGGG-MM-DD}}]]
- [[{{thursday:GGGG-MM-DD}}]]
- [[{{friday:GGGG-MM-DD}}]]
- [[{{saturday:GGGG-MM-DD}}]]
- [[{{sunday:GGGG-MM-DD}}]]

## Meetings
\```query
path: meetings (file:/{{monday:GGGG-MM-DD}}[ ].*/ OR file:/{{tuesday:GGGG-MM-DD}}[ ].*/ OR file:/{{wednesday:GGGG-MM-DD}}[ ].*/ OR file:/{{thursday:GGGG-MM-DD}}[ ].*/ OR file:/{{friday:GGGG-MM-DD}}[ ].*/ OR file:/{{saturday:GGGG-MM-DD}}[ ].*/ OR file:/{{sunday:GGGG-MM-DD}}[ ].*/)
\```

The YAML frontmatter is using the default Templater tokens and a tags system based on @tallguyjenks system.

So the top part are the daily notes which I use for any snippet of information that I want to save but don’t yet know how it fits in the system. They live in a ‘daily’ subfolder.

I have a lot of meetings where I take notes, so I store these in a separate subfolder ‘meetings’ and they al start with a YYYY-MM-DD prefix, followed by a space and a name of the meeting.

This helps to see which meetings I had in a certain week and possibly which other notes I took.

I reserve the root folder for the more Zettelkasten type notes and MOCs.

2 Likes
4

Thanks. I am not sure how I target specific pages using CSS. Could you give a simple example?

Here’s a piece of CSS styling I’d like to apply to that page only:

.internal-query-header-title {
    /*font-size: 10px;*/
    display:none;
}

I’ve tried adding .cssclass before .internal-query-header-title but that does not seem to make a difference.

5

If I understand correctly your CSS should be:

.weekly-note .internal-query-header-title {
    /*font-size: 10px;*/
    display:none;
}

given that your cssclass is defined as ‘weekly-note’, like @liam 's example.

1 Like
6

Thanks. I have done that, but the CSS styling is still applied to all notes.

7

Okay. It has now started working. I am not sure what I did differently. Thanks for the tip.

2 Likes
8

Resurrecting this thread as this is the only page I found on the topic. I run minimal theme and would like to set a specific font per note.

I have a “CustomClasses.css” file applied in Obsidian with:

.testclass .root {
    --font-family-editor: Avenir, Avenir Next, var(--default-font), sans-serif;
    --font-family-preview: Avenir, Avenir Next, var(--default-font), sans-serif;
}

Then in my note yaml front matter:

---
cssclass: "testclass"
---

But it doesn’t take effect. Have also tried with .darktheme in the css, and !important, no dice. Am I targeting the wrong selector?

9

Your selector looks for a class root after or below your test class and only works on the content within that section.
I’m not sure if such a situation exists. Try testing without the .root and see what happens.

10

Thanks for this helpful thread.
The approach works successfully for me in edit mode but not with preview.
So my YAML has this in all notes in the target folder qmt

cssclass: “qmt”

Then the following css colours heading 1 red only in folder qmt seen in edit mode

.qmt .HyperMD-header .cm-header-1 {
color:red;
}

The next bit is my attempt to do the same for preview mode but it does nothing

.qmt .markdown-preview-view h1 {
color: red;
}

Removing .qmt colours h1 red in preview for the whole vault so the rest of the selector seems ok. So clearly prepending the special folder class breaks the selector somehow.

In case it is relevant, the use case is that pages in this qmt folder will be published using a suitable light theme as a textbook, so I want to preview them in something similar while keeping the rest of the vault dark.

Any ideas on where I’m going wrong here?

11

OK, this is resolved or at last has a messy workaround

:root .qmt h1 {
color:red;
}

Successfully reddens header 1 in preview - only in the qmt folder as required

.theme-dark .qmt {
–text-normal:cyan;
}
.qmt .tag {
color: slateblue;
}

while the above do likewise for body text and tags.
All these only affect preview so the other set of selectors for edit mode are still needed.
I’d kind of hoped it would be possible to regex in the .qmt class so that abritrary chunks of css could be applied to that folder only, maybe even an entire theme, but that seems unlikely now. Still looks feasible to do enough with manual adaptation though.
Thanks again for this helpful thread.

12

You’re referring to the old edit mode, correct? Not live preview?

I’m trying to figure out a way to customize fonts per note in live preview. I didn’t think this was supported yet, but I noticed the other day that minimal theme does this to some degree, IE row-alt displays correctly even in live preview.

13

Sorry, I should have been more precise. To clarify, selectors like this

:root .qmt h1

affect only the full preview (‘reading mode’) view and not live preview.
Selectors like this

.qmt .HyperMD-header .cm-header-1

affect both edit views: source and live preview.

This does seem a little unexpected. Then I’m generally finding it a bit hard to piece together the css tree logic, working only via the keyhole surgery approach of figuring it out from the developer console.

So in terms of what you are trying to do, it indeed seems possible to customize css per note in live preview using this approach.

1 Like