shway
/
Notepad
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Notepad/enter/Coding Tips (Classical)/Project Vault/Obsidian/Obsidian Guides/Digital Garden Plugin.md

2.2 KiB
Raw Blame History

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 and how to find this in the source files.

CSS

  1. Customizing Icons. Navigate to repo/src/site/img to drop the icon .svg file there and then navigate to repo/src/site/styles to edit the custom-style.css file.
via Digital Garden Docs. - 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);
}