Add Custom CSS to your Digital Garden

Now that you have your Obsidian Digital Garden set up and added some pages and you have chosen a base theme, you may want to edit that theme.

This is a more advanced topic and knowledge of HTML & CSS is required. If you are looking to learn, I recommend r/CodingHelp’s Discord Server and Subreddit. Though I am biased cause I used to own them. There is also YouTube, Stack Overflow and other Discord Servers and Subreddits for you to learn at as well.

You will want to add any CSS files you want to upload (like custom callout icons and colors as well as other custom icons and colors) to your src/site/styles directory as shown here:

You will need to create a user folder here to upload CSS to. You can upload as many as you want and they are automatically linked to your repository. Most of the CSS you use to edit your Obsidian vault also works to update the Digital Garden. If you would like some recommendations of files to add, visit App Seeker’s Digital Garden Repo and use these files. I have tons (I mean over 50) unique colors and icons for callouts and I have more custom checkboxes and my quotes CSS has my quotes looking like this:

These CSS files are the exact snippets I use in Obsidian and they work perfectly on my Digital Garden.

Can I import my settings from the Style Settings plugin to my Digital Garden?

You want to go to your plugin settings within Obsidian and go to Appearance Settings and click on “Apply Settings” at the top under the Style Settings:

This increases the number of changes you can make to your Digital Garden cause then your Obsidian can look very similar to your Digital Garden so you know what other people will see when they look at your site.