This post is for users of Obsidian who have Obsidian Publish and want to learn how to customize the style of your public notes.

BACKGROUND

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:

Santi Notes

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.

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.

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.

If you want to learn more about Obsidian check out my Obsidian Online course. This course is what is financing my free content on this website and on YouTube so your support is truly appreciated.

LEARN MORE ABOUT OBSIDIAN

Check out my Obsidian Course

‍