CSS applying to all vault instead of a note. Cssclasses does nothing

Custom CSS & Theme Design
1

What I’m trying to do

I’m trying to apply different css snippets to a note, but when I create the snippet it applies to all notes in the vault.
I saw this video and it would be useful for me to be able to apply different css, but I’m new to all this and I might be doing something wrong.

The css that I would like to apply are very simple, just background color changes and different placement and size for images.

Things I have tried

I tried restarting Obsidian and disabling plugins to no avail. I looked up in the forum but was either too specific/tech-savvy or a different issue.

Thanks for the help

1 Like
3

Hey there! I recently had the same issue and never could find a straightforward answer. Drove me nuts. Eventually though, I somehow managed to figure it out:

Let’s say, for example, you want to change the width of a specific callout. The following snippet will change a callout’s width…

.callout {
	width: 75%;
}

… But activating it will apply the change to every callout in every note. This is because the “.callout” class is the default, top-level class which controls all the callouts.

We can narrow the scope of our snippet down to the callouts in only one note by nesting the “.callout” class inside a custom class, then applying the snippet to the note’s cssclasses property. In this example, I called my custom class “.callout-width” (though you can name it anything, just make sure it starts with a period in your css snippet).

.callout-width {

.callout {
	width: 75%;
}

}

Now the snippet will only apply to callouts in notes that have “callout-width” (without the period) set in the cssclasses property. You can set this using the “Add File Property” command, or directly in the frontmatter YAML at the very top of the note:

---
cssclasses: callout-width
---

If you only want to apply the snippet to a specific type of callout, you’ll need to get… well, specific:

.callout[data-callout="info"] {
	width: 75%;
}

This will resize every instance of the [!info] callout throughout your vault.

If you only want to apply the snippet to the [!info] callout within a single note without changing the [!info] callout in the rest of your vault, use the code below and add “info-callout-width” to your note’s cssclasses property:

.info-callout-width {

.callout[data-callout="info"] {
	width: 75%;
}

}

Finally, if all you want is to make inline changes to single elements inside a note (example: change the font and background colors of some text), you can create a snippet like this:

.font-style {
	color: red;
	background-color: white;
}

And call the “font-style” class with inline html directly in the body of your note instead of applying it to the entire note’s cssclasses property:


<!-- Text in your note that you don't want to color. -->

<div class="font-style">
<!-- Text in your note that you do want to color. -->
</div>

You can also apply this to images and other elements :slight_smile: Just play around with it and see what you can do! The only caveat I’m aware of is that markdown won’t work inside HTML tags.

So how did I figure all this out?

…

Pure dumb luck. I think I must have eventually gleaned it from all the example snippets I ran my eyeballs across trying to find an answer. Eventually I just threw my hands up and said “whatever, I’ll just try this” and somehow it all ended up working.

Anyway, I hope this helps! Let me know if you have any questions :3

1 Like