obsidian publish - customize your notes with a community theme
September 29, 2022
This post is for users of Obsidian who have Obsidian Publish and want to learn how to customize the style of your public notes.
I love Obsidian publish, it's such a great service to make your notes public.
I'm really grateful to have had my Obsidian Publish, well, 'Published' in the Obsidian official website.
Thanks to this, many of you have found my notes and have asked me questions about how to customize the style with themes.
WHAT WE'LL LEARN TODAY
In this post we will learn how to have the style of Obsidian Publish be different to the default, with a community theme.
You can see my Obsidian Publish here:
This is what it looks like:
If you are an advanced user, here's the long story short, taken from Obsidian's documentation
Go into YOUR_VAULT/.obsidian/themes/CURRENT_THEME_FOLDER;Copy the primary CSS file CURRENT_THEME.css in the folder;Paste it in the root directory of your vault (YOUR_VAULT);Rename the CSS file as publish.css;In the publish plugin, upload the publish.css file;If your CSS doesn't take effect in a few minutes, try refreshing the browser cache as the stale CSS might have been cached.
STEP-BY-STEP PROCESS FOR BEGINNERS
However if you consider your self not extremely tech savvy, don't worry about it, I'll break it up step by step.
The process is not that hard, you won't even need to touch any code or mess with advanced stuff.
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.
THOUGHTS ON ACCESSING HIDDEN FILES AND AN EASIER WAY
I think it's good to know how to access hidden folders since they are extremely helpful. However if for any reason you are stuck and confused about hidden folders. Obsidian has a simpler method.
In Obsidian go to settings > Appearance and click on the folder icon
This should quickly take you to .obsidian > themes which we'll talk about right now.
Inside the .obsidian folder you will see another folder called themes
Enter the themes folder, now select the theme you want to use for obsidian publish.
Here you can see any of the themes you have installed in your Obsidian vault, I'll use one of my themes for this examples. For Reverie by Santi Younger you should see a file called Reverie.css
Take that file and copy it to the vault folder where you keep your notes that you want to publish with Obsidian publish.
Just drop it next to all your notes.
RENAME THE THEME
Now you should rename the file into publish.css
in this case rename it from:
Reverie.css to publish.css
Go back to Obsidian and open Obsidian Publish settings.
cmd/ctrl + p > Publish changes
Click on the new toggle
make sure to check the new file we just added publish.css
Save the changed and publish. Now go to your Obsidian Publish site on your browser, if you don't see it updating yet wait at least 5 minutes and refresh.
If you still don't see changes, test it in another browser. Sometimes publish takes a long time to show changes.
LEARN MORE ABOUT OBSIDIAN
Check out my Obsidian Course