CSS changes are not being saved

Help
1

For some reason all my css changes are not saved permanently.
When I restart my Obsidian the old settings come back.

Things I have tried

I have tried to disable minimal theme and CSS snippets and still I loose them when I restart Obsidian.

2

When you open the developer tools in Obsidian, you change the css, but you also need to save it in a seperate file.

  1. Make a new text file and save it as “Name.css” .css is very important.
  2. Now when you make changes in the css of obsidian i.e change size of headings, colors etc. you have to copy the changes to that css file you just created.
  3. How to copy the changes? Easy! I assume that you are using the select tool for selecting the elements inside Obsidian to change their appearance. When you select the elements in Obsidian you will be directed to the specific css element of that element inside the developer tool window.
  4. Now lets assume you click on something and you get this:
    Screenshot 2021-03-23 22:53:27

now lets suppose you change the line-height to 3; now you have to copy the text starting form “.body” to the curly bracket at the last.
5. Now paste this in your Name.css file. You can remove the extra things you didn’t change like font-family and font-size and just keep the thing you changed i.e Line-length insid the curly brackets

.body {
       line-length: 3;
}

I hope you get the Idea!
6. Now save the css file. You see this is what you are creating. A snippet for your Obsidian vault. You just need to open it as a snippet in Obsidian and enable it.

I Hope it helps.

1 Like
3

Another CSS newbie here. I followed @Daniyal-Ahmed 's instruction steps 1 through 5, but when I try reloading snippets my .css file won’t show up. Any thoughts on why this might be?

image
image953Ă—156 4.07 KB

4

Found the solution - I had to uncheck the option “Hide extensions for known filetypes” in my file explorer. Having this option checked prevents you from changing the file extension by renaming it with a “.css” in the end.

Instructions to find the option to uncheck here

5

Glad you found Out! Sorry for not responding, I was away for a few months.

6

@Daniyal-Ahmed Thanks this is really helpful. Took me three atempts, got there in the end.

The stumbling block for me was, where to save? Within your Obsidian folder (in Windows File Explorer), you have your .obsidian folder. In there, you have to create a folder called Snippets, and place your text file in there (I changed the color of the heading text, so I called mine color.css). After that, go in to Settings > Appearance, scroll to the bottom and enable the CSS Snippets button.

Really excited about this, thanks so much :upside_down_face: :smiley: :star_struck:

1 Like
7

Tom, this is an age-old Windows conundrum. More experienced Windows users would most likely have the file extension showing; I couldn’t iimagine working with files without their extension showing (not that I’m that experienced lol :rofl:).
Microsoft has the file extension hidden by default, possibly because if inexperienced users were to rename a file with the file extension showing, they might delete the file extension by mistake, causing mayhem.

Here’s a couple or articles, the first showing how a virus .exe file could be hidden with file extension hidden, and the second going into a discussion about it:

Hiding Windows File Extensions is a Security Risk, Enable Now
Hiding Windows File Extensions Could Be Risky

1 Like
8

Thanks Smithy, will definitely keep extensions on from here on :smiley: