Getting comfortable with Obsidian CSS

[randulfr]

Thanks for the workaround and details, good idea

I experimented a bit further with import but obsidian seems to ignore it

[_ph]

other workarounds :

• in windows cmd (win+x, run command prompt or powershell) : copy snippet1.css+snippet2.css+snippet3.css obsidian.css it will concatenate the snippets[1-3].css into a file named 'obsidian.css`

(or even faster copy *.css obsidian.css but make sure you operate from a dedicated folder with only the files you need as t will concatenate all css files into obsidian.css)

• if you have Sass / Less : you can rename your css snippets to *.scss, then create a file obsidian.scss which contains :

@import 'snippet1';
@import 'snipper2';
@import 'snippet3';

next, open shell and run sass obsdian.scss obsidian.css
it should create a file obsidian.css which has the contents of your snippets.

[randulfr]

Now you’re talking, I like the sass solution

[mklepaczewski]

Just quick tips that I haven’t found earlier:

• do not create the obsidian.css file in Obsidian The filename will be obsidian.css.md, not obsidian.css. Create it in another text editor
• Obsidian will detect changes to obsidian.css upon save and apply the stylesheet again - at least on Windows.

[death.au]

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

[_ph]

a really neat trick to enable/disable css snippets using dynalist : https://talk.dynalist.io/t/trick-for-editing-css-in-dynalist/7035

[DoomValley]

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.

[jgalpha]

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)

[ordinaryyzh]

Thank you for you share, help me very much~

[Klaas]

@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 @death.au, and gets regular updates, improvements, and feature additions.
Just a thought.

[TomW]

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 - https://developers.google.com/web/tools/chrome-devtools/open

[Klaas]

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

[Projecteme]

Hey guys,

I was just starting out with obsidian and had alot of questions about css and personalising my own themes as well.

I managed to find out how to do it, and wrote an article with 3 quick steps on how to use css and devtool to customise your own theme. I thought that you might find it useful especially if you are a beginner in css and devtool. Here is the link to my medium article:

How to customise your own Obsidian CSS in 3 steps

I am now trying to figure out what kind of styles to create to make obsidian more functional, any interesting ideas?

I hope this helps!

[Klaas]

I compiled a Github repository with CSS snippets to achieve various effects. You can find the link to the Github page in the OP at the top of this forum page.

Enjoy.

[OogieM]

OK I’m a complete idiot when it comes to CSS etc. All I want to do is be able to change the font size for the various heading options. I am using Obsidian Nord theme in Light mode and I just want tomake the various # text, ## text etc things a different size. I got into the developer mode but see nothing that jumps out to me as a size thing.

Can someone (gently) point me in the right area?

And FWIW all I want is for all the headers to be the same size as the main body text. I like the colors but don’t need the size differences.

[ryanjamurphy]

Here’s a first pass (writing this on mobile so I haven’t tested this). Save the following to a .css file and put it in your Snippets folder (click the folder icon in Preferences → Appearance, next to the Snippets heading.

h1, h2, h3, h4, h5, h6 {
    font-size: 12px; 
}

Edit the font-size value to whatever you’d like.

There should be a way to give it a variable so that it matches your zoom settings as well—perhaps someone else can say what that variable is!

[Moonbase59]

You could use rem or em. On startup, both are usually set to 16px in most browsers.

[OogieM]

um ok. That made no sense to me at all. What’s rem and em? And I’m using the Obsidian app not a browser so that didn’t make sense either. Sorry

[OogieM]

OK I did that (or at least I think I did, see screenshot) but no changes

And this is the file in text edit

I stopped and started Obsidian

[Moonbase59]

You might need !important since there are many elements with higher specificity (those “win” over your declaration otherwise).

You could try something like

/* make all headers the same size */

h1, h2, h3, h4, h5, h6 {
    font-size: 1rem !important; 
}

(You can also use fractional numbers like 1.2rem.)

If above doesn’t work, here is another way:

/* make all headers in preview the same size */

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
    font-size: 1em;
}


/* editor headers */

.cm-header {
    font-size: 1em;
}

And don’t forget to enable your oogie-custom under Settings → Appearance → CSS snippets!

Note: This might only affect preview mode, and maybe have no effect on edit mode.

Here’s more to read on absolute and relative lengths in CSS (the relative lengths can be scaled & zoomed):

• CSS Units - W3Schools
• Rem in CSS: Understanding and Using rem Units – Adrian Sandu on Sitepoint

Because Obsidian can—for simplicity—be thought of as a browser.