How to apply custom css snippets to Obsidian Publish?

Help
1

Hi! I’ve recently published some of my obsidian notes for my friends to see.
I have been some css cnippets when using obsidian md app
and I would like to apply them to the publish version as well

The explanation on obsidian help site was not enough for me to understand
I couldn’t find any videos about it.

Please, I need help on this.
I apologize for being ignorant and not knowing much about technology…

2

Hi @ktbumjun, sorry if the docs weren’t clear enough on this topic. Obsidian Publish doesn’t let you publish individual CSS snippets; however, if you’re comfortable doing so, you can add a single publish.css file to your vault.

So you could take all the contents of the individual CSS snippet files that you use and combine them into a publish.css file at the root of your vault.

Then make sure to upload the publish.css inside the Publish modal:

image
image1396×688 41.1 KB

(yours will show up under the NEW section, unlike mine)

Let me know if that makes sense!

2 Likes
3

Thank you for your reply!
This helped a lot!

4

Some helpful guidance for css novices like myself who want to publish their Obsidian vault using existing community css themes so the published view matches the app view.

Perhaps this needs a new thread entitled “How to apply Obsidian.app css themes to Obsidian Publish.”

For macOS:

  1. In Finder, navigate to your vault, and open this folder. I’ll name it “Life’s Work” for this example.
  2. Press Command + Shift + . (period) to see hidden files
  3. Go to folder .obsidian > themes
  4. Copy desired theme, Comfort Color Dark for example, and paste (or Option + drag) in or to the vault folder, “Life’s Work.”
  5. Rename this file, Comfort color dark.css in my example, to publish.css
  6. Then in Obsidian.app, press/click “Publish changes” in side ribbon. Select publish.css from New row, then press Publish.

Now your favorite or preferred app theme is also used for Obsidian Publish without knowing or customizing a jot of css.

Hope this helps.

2 Likes
5

Now it’s own topic: How to Use Obsidian.app Themes in Obsidian Publish

6

Hello Everyone,

I created a new file (publish.css) and added it to my vault directory. But nothing seems to happen after publishing. The same look and feel without the CSS changes in publish.css (7.6 KB)

I’ve tried to clear cache memory and use different browsers from different operating systems. And the problem is still the same.publish.css (7.6 KB)

CSS file: attached
Published website: Obsidian Publish

Anyone can help?

Thank you in advance.

1 Like
7

Hi and yes, I have the same issue too.

1 Like