Cannot Get a Simple CSS Snippet to Work

Custom CSS & Theme Design
1

Hi, I cannot get CSS Snippets to apply in my newly installed Obsidian on a Mac. I just pulled a simple snippet from the forum to change the tag color. I created the CSS file and it is in the correct Snippets directory and the snippet is toggled on. When I go into a note containing the relevant tag in preview mode, the tag stays the same as the system default purple and doesn’t change to red. I have no custom template applied and am just using the default dark theme that comes with a newly installed Obsidian. Any ideas on what I could be doing wrong?

This is the snippet I am testing with, but I cant get any snippets to work.

.tag[href=“#important”] {
color: red;
}
2

Hi @jdinning, I think the issue is that the snippet you’re using has “smart quotes” around the word important. Some programs try automatically replace " with “ (either when typing or copy/pasting) to look more aesthetically pleasing. It’s a tricky issue, since in CSS they are not equivalent.

This snippet should work:

.tag[href="#important"] {
  color: red;
}
3

Great thanks!

There were two issues. First was that there were smart quotes because textedit was putting them in there. Second was that textedit was saving as rtf and then I was renaming as css, but in fact it was still rtf. So once I converted it to text and then saved it, it worked.

1 Like
5

Hi, this does not work for me. I made sure that there are no smart quotes in the snippet. It is saved with the .css extension in the snippet folder. I use the default dark theme and have no plug-ins installed. None of the snippets work for me. What am I missing? TIA