obsidian - how to add circle bullets to headings to make things look awesome

June 12, 2023

WHAT IS THIS ALL ABOUT?

The purpose of this code is to make headers look like org-mode bullet points, this is inspired by org-bullets for org-mode.

This is what it looks like in Obsidian after adding the simple version code: org-sidian.css

image
Theme Used Reverie: Santi Younger (Available in the community themes)
You can also find Reverie on Github.

This css code is meant to replace the hashtag symbol # used for headers and change it to cool UTF-8 symbols.

Side Note: Everything I’ll talk about is for edit mode

This is what it's doing:

H1 - instead of # display ◉
H2 - instead of ## display ✸
H3 - instead of ### display ✿
H4 - instead of #### display ◉
H5 - instead of ##### display ✸
H6 - instead of ###### display ✿

I come from using spacemacs and I love org-mode. I moved most of my workflow to obsidian (therefore markdown), but there’s one thing I really miss, which is org-bullet points (which adds cools symbols to headings).

THIS IS WHAT THE ORIGINAL LOOKS LIKE IN EMACS / SPACEMACS

This screenshot is my from my Spacemacs set-up, with the original org-bullets for org-mode.

image

BUILT-IN INDENTATION

There's a nice indentation with every heading (achieved through left margins in the code).

This allows for easier visualization of heading level.

It looks like this:



 ✸
   ◉
    ○
     ✸

INSTALLATION/SET-UP

If you know how to use obsidian snippets, you know what to do.

If not, let me walk you thought it.

Download this code by pressing the green button called Code at the top right corner.

(if you are reading this on my website go to Org-sidian GitHub's page to see what I'm talking about)

Click on Download Zip

Once it’s in your downloads folder unzip it.

Choose either

org-sidian-color.css

or

org-sidian.css

Check above to know which one you prefer.

ACCESSING .OBSIDIAN FOLDER

All we need to do is access the hidden folder that Obsidian uses for storing themes and plug-ins.

This magical folder is called .obsidian

WHERE IS THE .OBSIDIAN FOLDER?

If you go to your file manager in your computer, to your obsidian vault, you will notice that there's no .obsidian folder.

Side note: The term "vault" is nothing more than the folder Obsidian uses to read your files.

The reason why you can't see the folder .obsidian is because it's a hidden folder. (which happens whenever you put a . at the start of any file or folder in your computer)

So the question is how do you unhide a hidden folder?

This is gonna chance depending on what operating system you use.

MAC

It's pretty simple in mac, all you need to do is go to Finder find your Obsidian vault and press the following shortcut.

⌘ + ⇧ + . (command + shift + .)

Side note: You can press the same key again to hide it.

WINDOWS

Taken from windows support page

Open File Explorer from the taskbar.Select View > Options > Change folder and search options.Select the View tab and, in Advanced settings, select Show hidden files, folders, and drives and OK.

LINUX

In most file managers that I've used the shortcut is:

ctrl + shift + h

but this may vary. I know for sure that one works for Thunar.

if you use Ranger (which you should) the shortcut is as smooth as pressing zh

but if you use Linux (you are awesome) you probably already know these stuff. So let's move on, and if you don't use Linux I don't know why you are reading this part.

THE HIDDEN FOLDER IS NOW UNHIDDEN

Now, you'll be able to see your hidden files. You'll now be able to see the .obsidian folder in your vault.

CREATING THE SNIPPETS FOLDER

go to your .obsidian folder and create a folder called snippets.

paste the org-sidian.css file in there.

TURN ON THE SNIPPET

Go to Obsidian, open settings > Appearance > scroll down to "CSS Snippets"

here you should see the org-sidian.css file, now you can turn it on.

image

If you don't see it reload it, by pressing the reload botton underneath CSS Snippets

image
Keep in mind that some obsidian theme's might not be compatible.

If you want to test it, do it with my Obsidian Theme Reverie, which should work without a problem.

This also works great with my other Theme Wasp-Obsidian-Theme Both can be found in Obsidian's community themes.

THE DIFFERENT VERSIONS OF THIS CODE

There are 2 different styles you can go for, one is org-sidian.css and the other is simply called org-sidian.css

What's the difference? you may ask, I'm glad you ask, let me tell you.

SIMPLE VERSION

ORG-SIDIAN.CSS

org-sidian.css

This one is simple without any added colors, it will adapt to your themes heading colors better.

COLORED BULLET POINTS VERSION

org-sidian-color.css

This version has a yellow and red set-up. You can easily change it to your taste with hex codes. This colored version is made to work great with my Wasp-Obsidian-Theme which can be found in Obsidian's community themes.

image

CONSIDERATIONS

SAME HEADING SIZES

This looks a lot better when all headings are the same size. By default my theme Reverie doesn't have same heading size, but it's fairly simple to change the code to make this possible.

Learn how to create same heading sizes from the obsidian forum: Make all headings same size- Obsidian Forum

SPECIAL THANKS

Special thanks to death.au. Thanks to his code I was able to achieve this whole thing.

ADDITIONAL POSSIBLE FEATURES

Org-mode also allows for a shortcut such as alt+→ to move headings quickly from h1 to h2 and so on. and alt+ ← to move from h2 to h1

This is something I’d like to turn into a request or if possible even develop as a plug in (perhaps as I get more advanced with JavaScript, it might be possible).

VERSIONS

VERSION 2.0

Fixed bug that made some headings display symbols more than once in edit mode.

Now things work great in edit and preview mode.

VERSION 1.1

Changed "heading 2" symbols from "○" to "⭗" in preview mode.

VERSION 1.0

Added code for preview mode.

VERSION 0.1

Initial code, still to be tested with different themes and use cases.

LEARN MORE ABOUT OBSIDIAN

Check out my Obsidian Course