60 lines
2.0 KiB
Markdown
60 lines
2.0 KiB
Markdown
|
||
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
|
||
- ![[Pasted image 20230816173235.png]]
|
||
- Terminal
|
||
- ![[Pasted image 20230816174402.png]]
|
||
- Bubble Space
|
||
- ![[Pasted image 20230817142703.png]]
|
||
- Everblush
|
||
- ![[Pasted image 20230817143911.png]]
|
||
- MagicUser
|
||
- ![[Pasted image 20230822101036.png]]
|
||
- Molecule
|
||
- ![[Pasted image 20230822102448.png]]
|
||
- Notation
|
||
- ![[Pasted image 20230822102804.png]]
|
||
- Origami
|
||
- ![[Pasted image 20230822103145.png]]
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
|
||
## 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](https://dg-docs.ole.dev/advanced/adding-custom-components/#dynamic-css-scss):
|
||
|
||
```css
|
||
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](https://dg-docs.ole.dev/advanced/adding-custom-components/#dynamic-css-scss):
|
||
|
||
```css
|
||
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);
|
||
}
|
||
``` |