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
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.
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:
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.
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.
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.
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.
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.
If you don't see it reload it, by pressing the reload botton underneath CSS Snippets
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.
This one is simple without any added colors, it will adapt to your themes heading colors better.
COLORED BULLET POINTS VERSION
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.
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
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
Fixed bug that made some headings display symbols more than once in edit mode.
Now things work great in edit and preview mode.
Changed "heading 2" symbols from "○" to "⭗" in preview mode.
Added code for preview mode.
Initial code, still to be tested with different themes and use cases.
LEARN MORE ABOUT OBSIDIAN
Check out my Obsidian Course