Unable to apply CSS styles to selected notes in Obsidian

Custom CSS & Theme Design
,
1

What I’m trying to do:

Hello everyone,

I am currently trying to apply CSS styles to selected notes in Obsidian, specifically to increase the spacing of list elements. I have tried to follow various articles and blog entries to achieve this, but unfortunately, I have not been successful so far.

I have created a CSS snippet called “meeting.css” and saved it in the folder .obsidian/snippets. The snippet is recognized by Obsidian and activated, but I have not been able to observe any styling applied to neither the template nor a recent note I created when tagged with the corresponding CSS class.

Files:

meeting.css

/* Increase the spacing of list elements */
.meeting.HyperMD-list-line.HyperMD-list-line-1.cm-line,
.meeting.HyperMD-list-line.HyperMD-list-line-1.HyperMD-task-line .cm-line,
li.meeting {
    padding-top: 20px !important;
}

I did notice that the intended styling is applied when I remove the “.meeting” class from the CSS file. This verifies that the styling via snippets principally works.

Meeting.md:

---
Title: "{{title}}"
Date: "{{date:DD-MM-YYYY}}"
Company: ""
Attendees:
  - "John Doe"
  - "[[]]"
  - "[[]]"
  - "[[]]"
cssclass: meeting
---

Things I have tried

  • Changing the class names and adjusting them where needed.
  • Restarting Obsidian after I made modifications.
  • Encapsulating the CSS class in the YAML header with " ".
  • Having spaces between each class in the CSS selector.

Open questions:

If I understood the procedure correctly, the class “meeting” should be appended to all elements of that certain note. However, I am not able to see this class in any of the elements when inspecting the HTML elements via the developer tools. Why is that?

Thank you in advance for any help you can provide.

2

It isn’t applied to every element, but rather to a element high up in the hierarchy to differentiate this document at a higher level. Some of the places it’s inserted are:

  • div.view-content > div (used by live preview)
  • div.markdown-reading-view > div (used by reading view)

So most likely, you can resolve your issue by adding a space in between the .meeting and the specific selector you want to target. So try something like:

/* Increase the spacing of list elements */
.meeting .HyperMD-list-line.HyperMD-list-line-1.cm-line,
.meeting .HyperMD-list-line.HyperMD-list-line-1.HyperMD-task-line .cm-line,
.meeting li {
    padding-top: 20px !important;
}
2 Likes
3

I made the suggested changes, but not only did I not see any changes, I also couldn’t find the meeting class in either the div.view-content or div.markdown-reading-view, or actually in any other element for that matter.

Is there anything else in my approach that I might have missed?

4

Does this get you closer to what you want?

```css
/* Space between list items SOURCE */
.markdown-source-view ol > li,
.markdown-source-view ul > li,
.mod-cm6.meeting .HyperMD-list-line.cm-line {
  padding-top: 20px;
}

/* Space between list items RENDERED */
.markdown-rendered.meeting ol > li,
.markdown-rendered.meeting ul > li {
  padding-top: 20px;
}
```
5

As long as it’s present in the cssClass field in the frontmatter and it’s a valid YAML, it should be visible in either of the aforementioned div’s, so you might be looking in the wrong place or have some invalid YAML you’re not showing us.

Which version of Obsidian (and the installer) are you using?

6

Both holroy’s tweak of the original and eightning’s alternative work for me, so not sure what’s going on.

Another thing to try is using one of the Obsidian theme variables to see if you can get it working (assuming you are on a recent version of Obsidian).

.meeting {
  --list-spacing: 0.550em; /* default 0.075em */
}

Screenshot 2023-03-27 at 7.10.22
Screenshot 2023-03-27 at 7.10.221288×1744 91.8 KB

7

Meeting.md (415 Bytes)

I’m running Obsidian v1.1.16 on Pop OS 22.04 (Linux) and I’ve also attached the full template to inspect if I made any errors in the template itself. I tried all the suggestions, but none of them seemed to work for me.

image
image1093×994 99.2 KB

And as can be seen in the attached image, the template is active and thus should be accesible via cssclass.

8

That note opens here as:


```yaml
---
Title: "{{title}}"
Date: "{{date:YYYY-MM-DD}}"
Company: ""
Attendees:
  - "Author"
  - "[[]]"
  - "[[]]"
  - "[[]]"
cssclass: meeting
---
```

If that is right, the backticks and reference to yaml should be removed. The file header served from the template should just be:

---
Title: "{{title}}"
Date: "{{date:YYYY-MM-DD}}"
Company: ""
Attendees:
  - "Author"
  - "[[]]"
  - "[[]]"
  - "[[]]"
cssclass: meeting
---

The opening --- of the YAML header must be on the first line of the note.

You can add metadata to your notes by adding a block on the first line of your note. The block must start and end with three hyphens (---).

4 Likes
9

Back at a Mac. Hope this graphic helps:

valid yaml
valid yaml1630×1506 202 KB

3 Likes
10

Missed the chance for “Good Meeting” and “Bad Meeting” note names :rofl:.

Great write-up! 99.9% it’s bad YAML. We’ve all been there.

3 Likes
11

Thank you so much! now it works as intended.

1 Like
12

Great to hear. :partying_face:

13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.