Getting comfortable with Obsidian CSS

For anyone interested, I’ve been using the SASS method for a while and documented my process here: Mixing and Matching CSS Snippets with SASS


a really neat trick to enable/disable css snippets using dynalist :

Thanks a lot. I was wondering why the file I created in Obsidian doesn’t work. This should be included in FAQ.

And also, the Help document in Custom CSS said:

If you are building or modifying your own css, you can open the developer tools by using Ctrl/Cmd+Shift+I to get information on the elements you want to customize.

I’m on an old Macbook. I tried hit Ctrl/Cmd+Shift+I several times but the developer tool still won’t show up. I thought my keyboard was broken. I almost gave up then this topic came to my eyes. I hit Option+Command+I only once, it worked like a charm.

Hey guys, I’m using a theme and I have issues with the file explorer padding. It’s pushed to the left side including the toggle for folders. I can’t find the css title for that part, how do I create something and put a left padding on the files inside file explorer?

Also, when I preview the note, it’s centered and looks very tight. I’ll attach the code below.

I’ve attached the css file below. Appreciate the help!

obsidian.css (47.8 KB)

Thank you for you share, help me very much~

@jgalpha: I am surprised you added Andy Mode code. Isn’t it easier to leave AM as an option ? If people want it they can install the AM plug-in, which is the focus of the dev, and gets regular updates, improvements, and feature additions.
Just a thought.

1 Like

I would just like to point out that if you use Chrome, Internet Explorer or Firefox then simply pressing F12 brings up the Developer tols. Sure beats remembering Cmd/Ctrl+shift+i, unless I’m missing something. ALso this page has some nice info on Chrome -

@TomW: F12 does not work on macOS, there one has to do right-click > Inspect.