#1

I have tried to add the following yaml header and then added the subsequent line to my css snippet but it doesn’t seem to do anything and in preview mode it’s not recognised as a part of yaml.

---
cssclass: fullscreen
---

.fullscreen { background-color: red;}

What am i doing wrong ?

Would it be possible to have a beautiful calligraphy font for my journal, and then have a default font for some of my normal notes?
Per file styling
Give different panes different colors
#2

Try something like:

.markdown-preview-view.fullscreen { background-color: red; }

I don’t recommend using the fullscreen class thought, as Obsidian also uses the same class so there might be conflicts.

Also the CSS class only works in preview for now.

2 Likes
#3

Thanks for the help. I’ve found that you actually need to close and re-open Obsidian for your changes to take effect. At least for me on 0.10.1. It would also be great if the class could be applied to an outer wrapper in edit mode too as I try to make edit mode look as close to preview mode as possible. I’ll raise a feature request for both issues.

#4

Can anyone point me to some links about creating and using these custom CSS classes? I didn’t know this was possible.

1 Like
#5

@luckman212 if you type cssclass: class1, class2 into your front-matter then these classes get appended to the list of classes on the div surrounding your entire note. If you then create a css snippet in your snippets folder and set some styling for each of these classes then that css will be applied to the page. You can use all the usual css selectors to apply specific styling to individual parts of the page inside one of your custom tags. I think there is more info in the release note for 0.9.18.

2 Likes