Getting comfortable with Obsidian CSS

Share & showcase
,
32

I have an obsidian.css now that’s based on a theme from someone else, plus, at the bottom, several additional customizations I’ve gradually accumulated.

I like to try new theme’s occasionally as they are posted here.

The issue is, it gets a little tedious each time to have to copy/paste in all my accumulating customizations on top of the new theme and then swap it in for my prev obsidian.css. Gets worse if I have more than 1 vault, using diff themes.

I thought probably there is a way in CSS to be more modular, and discovered there is in fact an @import statement.

So I tried making my obsidian.css consist soley of:

@import "obsidian-theme.css";
@import "my-customizations.css";

…so that I could easily swap in new themes, as well as easily adjust my customizations.

But not only did Obsidian not render any of the referenced styling, it seemed to confuse the parser - the cursor jumping around strangely.

Is a modular strategy like this viable, and if so, any tips on how can I get it to work?

Thanks!

3 Likes
33

I thought I was the only one who wanted this! Felt frivolous for me to ask for it, but seems like a few of us Theme Addicts are thinking in the same direction. However, you’re the second person to say the @import technique doesn’t work. I’m interested to see if anyone HAS gotten it to work by using a particular coding syntax. My research this morning said the @import stuff has to go at the top of the sheet, though – maybe that’s the issue? I haven’t dug into it yet because I’m still organizing my theme snippets for future import calls.

Edit: Just tried it, I can’t get it to work either. Thought maybe it was a file access permissions thing, but doesn’t appear to be.

2 Likes
34

Doesn’t that @import depend on the app you use for css?

35

Not sure if you mean the app for writing the CSS or for reading/using it, but either way, I don’t know, I am a relative CSS noob.

Was hoping there were some CSS experts here that could say how it works, and more importantly, what is possible for more modularly managing various sets of stylings.

36

I don’t know anything about the @import function, my comment is based an interpretation of your question, and yes, I meant the CSS writing/reading app.

37

I can’t help you with the @import thing… but most text editors have code snippets, maybe it’s a suitable alternative to manual copy/pasting for you ?
in Atom, you can create snippets to quickly reuse code (type aprefix + tab to auto-paste a multiline block) : https://www.hongkiat.com/blog/add-custom-code-snippets-atom/
It works with vscode, pspad, sublime, notepad++ (pick this one and NppSnippets/quicktext plugins if you want a lightweight portable solution), etc… alternatively, try a text-expander ?

TL;DR
use code snippets in atom, File>snippets :

'.source.css':
    'AnyTitleLikeAndyMode':
      'prefix': 'Andy'
      'body': """
          ....paste your snippet here between triple quotes....
          """

next open you obsidian.css, type `Andy’+tab (or whatever prefix you defined) and it will paste the rules you defined in the snippet.
Not as streamlined as @import but better than ctrlC ctrlV

1 Like
38

Thanks for the workaround and details, good idea

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

39

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.

4 Likes
40

Now you’re talking, I like the sass solution

41

Just quick tips that I haven’t found earlier:

  • do not create the obsidian.css file in Obsidian :wink: 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.
4 Likes
42

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

6 Likes
43

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

1 Like
46

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.

47

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)

48

Thank you for you share, help me very much~

49

@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.

3 Likes
50

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

51

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

1 Like
52

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:

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!

7 Likes
53

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.

3 Likes