2.0 KiB
Digital Garden is the Obsidian plugin that lets me publish changes from my local obsidian here directly to the web on my personal website. Below are some helpful tips & tricks I've collected to streamline the process.
Appearances:
Digital Garden Themes:
- 80's Neon - dark mode
- !
- !
- Terminal
- !
- !
- Bubble Space
- !
- !
- Everblush
- !
- !
- MagicUser
- !
- !
- Molecule
- !
- !
- Notation
- !
- !
- Origami
- !
- !
Custom Code
For further tweaks and customization, adding in your own CSS is helpful. Digital Garden docs provides a helpful guide to[ notes icon customizing ](1. https://dg-docs.ole.dev/advanced/note-specific-settings/#note-icons)and how to find this in the source files.
Changing and adding icons
You can change and add your own icons the following way:
The ideal way to change the default icons is by adding the svgs in the img folder and setting the appropriate css vars in body in a custom css file:
body {
--note-icon-1: url(/img/your-custom.svg);
--note-icon-2: url(/img/tree-2.svg);
--note-icon-3: url(/img/tree-3.svg);
--note-icon-fallback: url(/img/default-note-icon.svg);}
}
To add new icons, let's say, for 'stone', add a snippet like this (and add the relevant svg) in a custom css file:
body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="stone"]::before,
body.filetree-note-icon .filename[data-note-icon="stone"]::before,
body.links-note-icon .internal-link[data-note-icon="stone"]::before,
body.backlinks-note-icon .backlink[data-note-icon="3"]::before {
background-image: url(/img/stone.svg);
}