CSS for specific pages

Resolved help
#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?

2 Likes
Can I have different CSS for a folder/subfolder?
#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!

2 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.

#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.

1 Like
#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.