Table of Contents
- Part 1: Create an Obsidian Digital Garden
- Part 2: Syncing your Obsidian Vault to multiple devices (Android, iOS, Windows, MacOS, Linux, iPadOS, etc.)
- Part 3: Initial Setup of your Obsidian Digital Garden
- Part 4: Adding additional custom CSS to your Obsidian Digital Garden
- Part 5: Advanced Tips and Tricks for your Obsidian Digital Garden
- Part 6: Advanced – Create multiple Digital Gardens in a single Obsidian Vault
Part 4: Adding additional custom CSS to your Obsidian Digital Garden
Now that you have your 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/user directory as shown here:
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?
Yes, though that is not working as of right now (October 1, 2023) though the dev (and some other supporter devs that help the project) are aware and are actively working on it.
When it does work though, you would go to your plugin settings within Obsidian and go to Appearance Settings and click on “Apply Settings” at the top under the Style Settings:
CURRENTLY THIS BUTTON DOES NOT CHANGE ANYTHING ON THE SITE! So, don’t say “this isn’t working!” or bring it up to the dev because he is aware.
I will remove all references to it not working when I confirm it is working on both of my digital gardens.
Once it does work, that will increase 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.