#1

Note: This is only a modified version of the Atom theme. All credits go to @kognise.

I love the original Atom Theme but I found a few css hacks in Meta Post - Common CSS Hacks which I think are essential, and made some minor modifications of my own which make everything just slightly better. I decided to share my version of the theme for those who don’t like editing css and making changes on their own. I’ll let the images speak for themselves.

Atomized
Atomized1920×1080 840 KB

Annotation 2020-07-06 204951
Annotation 2020-07-06 2049511920×1080 163 KB

How to install?

  • Download obsidian.css (10.9 KB)
  • Make sure you have enabled custom css option in Obsidian
  • Copy and replace the obsidian.css in your vault folder

Thanks to @death.au and @den for the CSS hacks, and of course, @kognise for the awesome theme.

#2

Looks awesome! Mind if I yoink your changes into my master branch?

2 Likes
#3

Of course you can. That would be awesome! :smiley:

#4

Hi there,

I think I downloaded and installed the file correctly, for example I can see the backlinks in the highlight colour, but that super fantastic outline feature for indented notes, I dont see that. This is actually a feature I am super excited about, so do you have an idea as to what Im doing wrong?

#5

Hey, it’s strange that the list relationship feature is not working. I double checked to see if there’s an error in the css but it’s working fine. May I know what version of Obsidian you’re running?

This is the css code for relationship lines:

/*Bullet list relationship lines*/
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid #424958;
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
}

You can try applying the original Atom theme or any other theme from Obsidian’s settings, and add this code to the CSS file in the vault to see if it works.

Css-powered outline-like mode
#6

I might try this.
Oh, I’d be editing CSS :scream:

1 Like
#7

Hi VoltaireNoir!

Wow, I feel like a reallllly big idiot. I figured out what I was doing wrong, and of course it had nothing to do with your code, or OP’s code, which is perfect and does exactly everything it is supposed to. Really, thank-you for your help, I appreciate it mightily!

I would like to know how / where I would add that stand-alone code you provided though. I am on MacOS, so if I wanted to add that code for bullet point relations to a different css file, would I open the css in some sort of text editor, save the changes, and re-load Obsidian, or would I make those changes inside of Obsidian using the development panel?

Thank-you again

#8

Hey Dave, so is everything working fine now? And it’s okay to make mistakes, that’s how we learn. :slight_smile:

About the css code, yes you can simply open the css file in a text editor, and paste the code either at the beginning or the end of the file and save it. You don’t have to restart Obsidian because it will update on the fly. If you need any help, feel free do DM me. Have a great day!

#9

Yes! It is working fabulously well. Thank-you so much for your help and for providing such valuable content for people like me!

1 Like
#10

Glad that it’s working. Always happy to help. :smiley: