How to add a CSS snippet when you already have a Theme installed

Posting this to hopefully help someone else, as I didn’t see anyone else explaining the issue.

I wanted to add a simple CSS snippet to left justify images in my notes. They are centered by default; at least on my set up it was the default though I have a theme installed.

But when I added a CSS snippet file to my Vault CSS Snippet folder and loaded the snippet in settings, nothing changed.

I have the NORD theme installed, and noticed that the theme CSS file had an “img” section for changing certain aspects of CSS for images. I noticed it had a margin-left section, so I changed the margin to “0pt” instead of “auto” and voila, my images are now left justified.

So the lesson is that you may need to edit your Theme folder CSS file as the CSS Snippet feature does not seem to override the Theme CSS. Maybe there is a way to override that somehow, but it was very easy to just edit the Theme CSS instead.

1 Like

@Obsidandnancy: while I understand your decision to edit the theme’s CSS file, and I understand the attraction and easiness, it is actually bad practice to do so.

The reason is simple: if the theme gets updated your changes will get overwritten and be lost for good. If you only made 1 change, you might be able to remember it. If you have 2, that becomes more difficult, and beyond 3 you are unlikely to remember them all after a certain lapse of time.

It IS much better practice to use snippets as they do not get overwritten during a theme update. That is why the use of snippets has been made possible in Obsidian.

If, like in your case, the snippet did not work, don’t blame the snippet or the theme, ask for assistance on the Discord #css-themes channel. I can assure you there are a number of people present with mind blowing CSS expertise.

2 Likes

Good point @Klaas, I hadn’t thought about theme updates. I’ll look into the snippet fix if I get tired of changing the theme css after any theme updates.

In some cases adding the !important; property to the CSS in the snippet will force an override of the theme settings.

1 Like

Hi @anon27868835, I just joined Discord and someone else had suggested that in the past. That was exactly the issue. My snippet now works without the Theme adjustment. I had considered adding that but there was little information here about syntax. Thank you for following up. Great forum participation here.

1 Like

Hello. I see that the discord channel is now gone. I’m having the same issue but not sure where to find the detailed instructions.

Thanks

@myggirl: the channel is still there, it is now called #appearance.