Applying the snippet?

[figgelz]

Hello,

I'm pretty new to Obsidian and stumbled across this really awesome theme. Great work has been done here!

Here comes my problem: I don't get how to apply the snippet. I saved the file into the snippet folder and activiated it, but I can't see any folder icons... As I'm writing this I realized, that I actually don't know what I would see then ;D

[Jopp-gh]

thanks.

Yes, to display icons you need to modify my snippet. All you need to do is to know your folder names and assign them an icon.

short demo:

1. make a new folder in Obsidian and name that one Journal
2. open the command palette cmd+p on Mac, should be ctrl+p on Win/Linux and type "reload" for "reload app without saving"
3. You newly created folder (Journal) should have an icon now.

---

long demo

add your folder names:

1. First of all, open folder-icons-v2.css in a text editor of your choice.
2. consider this snippet is organized in 2 parts: the top section stores all available icons and after this section follows the ruleset section.
3. now search for "Journal" down below in the rulesets and replace that name twice (this because of "light" and "dark" theme) WITH the name of one (1) of your folders
4. open the command palette cmd+p on Mac, should be ctrl+p on Win/Linux and type "reload" for "reload app without saving"
5. You folder should have an icon now.

Note, you can assign Multiple Names to an icon. See again the example rule for "--openbook-icon". This is one ruleset -block:

/* Journal, Education, Training */
body:not(.is-mobile).theme-dark .tree-item-self.is-clickable.nav-folder-title:is([data-path$="Journal"], [data-path$="Education"], [data-path$="Training"]):hover>.tree-item-inner.nav-folder-title-content::after {
    filter: inherit;
}

.nav-folder-title:is([data-path$="Journal"], [data-path$="Education"], [data-path$="Training"]) .nav-folder-title-content::after {
    content: var(--openbook-icon);
}

this ruleset contains: "Journal", "Education" and "Training". Replace these names inside body:not(.is-mobile).theme-dark and .nav-folder-title:is with names of your folders. (you've to do it twice because of "dark" and "light" theme)

Example: for simplicity, I renamed my folders to A, B and C:

body:not(.is-mobile).theme-dark .tree-item-self.is-clickable.nav-folder-title:is([data-path$="A"], [data-path$="B"], [data-path$="C"]):hover>.tree-item-inner.nav-folder-title-content::after {
    filter: inherit;
}

.nav-folder-title:is([data-path$="A"], [data-path$="B"], [data-path$="C"]) .nav-folder-title-content::after {
    content: var(--openbook-icon);
}

Now if you don't like the icon given to A, B and C, search the head part of my snippet for another icon name (eg --bookmark-icon) and replace the content: var(--openbook-icon); declaration with, content: var(--bookmark-icon);.

[Jopp-gh]

I added a small tutorial on how to modify icons to my Wiki, under Folders.md If you have further questions, feel free to ask. And if my tutorial helped, you are welcome to close this bug report.