> [!Metadata|i-at]
> [[ITS Theme]]
# Folder Styles
> Add styling to folders when opened
> [!grid|masonry]
> 
> 
> [!info] Resources to help with icons
> - [Search for icons using Iconify](https://iconify.design/icon-sets/)
> - [Convert the SVG code into CSS ready code](https://yoksel.github.io/url-encoder/)
> - Install my [Encoded Icon Snippet](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Encoded%20Icons.css) which includes:
> - Remix Icons
> - Font Awesome 5
> - Material Icons: Sharp
> - RPG Awesome
# How To
1. Create a blank `css` snippet file with any title
2. Toggle created snippet on
3. Include [[#How To#Code|How To Code]] and adjust names and colors to style your folders
4. **ITS Theme Toggle Version**
- [!] You do not need to download the snippet version
1. Just paste the "Code Footer" at the end of your personal snippet for the colors to apply properly
2. In the ITS Theme Style Settings `Workspace > File Explorer > File Explorer Styling` toggle that setting on
5. **Snippet Version**
- [!] For use outside of the ITS Theme, not within
1. Paste the [[#Snippet Version|Snippet CSS]] code under your code styling.
CSS should now work and apply to your folders! 🎉
## Code
> This is the code to color each root folder
```css
.nav-folder-title[data-path="Folder Name"] .nav-folder-title-content::before {
--folder-icon: "\icon-code-here";
--folder-font: "font icon pack name";
/*--folder-vertical-alignment: -2px; */
/* Optional, helps with aligning icons vertically */
}
.nav-folder-title[data-path="Folder Name"],
.nav-folder-title[data-path="Folder Name"] + .nav-folder-children {
--folder-icon: "\icon-code-here";
--folder-font: "font icon pack name";
/*HSL Values Only: ###, ##%, ##% */
--folder-accent-color: ###, ##%, ##%;
--folder-accent-color-lite: ###, ##%, ##%;
}
```
> [!Example|embed]
> ```css
> .nav-folder-title[data-path="50 Nebula"],
> .nav-folder-title[data-path="50 Nebula"] + .nav-folder-children {
> --folder-icon: "\f23c";
> --folder-font: var(--rmx);
> --folder-vertical-align: -2px;
>
> --folder-accent-color: 287, 30%, 40%;
> --folder-accent-color-lite: 283, 72%, 72%;
> }
> ```
## Code Footer
> [!note] Include this at the end of your snippet file if using the ITS theme toggle for Folder Styles, *not the snippet version*
```css
/*----Folder Styling----*/
.nav-folder-children,
.nav-files-container > div > .nav-folder,
.nav-folder-title {
--explorer-root-background: hsla(var(--folder-accent-color), 0.2);
--explorer-root-folder-color: hsl(var(--folder-accent-color-lite));
--explorer-root-folder-background: hsl(var(--folder-accent-color));
--explorer-root-folder-open-background: hsl(var(--folder-accent-color));
--explorer-folder-open-background: hsla(var(--folder-accent-color), 0.4);
--nav-indentation-guide-color: hsl(var(--folder-accent-color-lite));
--explorer-folder-icon-color: hsl(var(--folder-accent-color-lite));
--folder-icon-open-color: var(--explorer-folder-icon-color);
--folder-icon-color: var(--explorer-root-folder-color);
--file-icon-color: hsla(var(--folder-accent-color-lite), .35);
}
.nav-folder-title .nav-folder-title-content::before {
display: inline-block;
margin-right: 4px;
vertical-align: var(--folder-vertical-align);
}
```
# Snippet Version
[📥 Download the Folder Styles snippet](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Folder%20Styles%20Rewritten.css)
%%
> [!important|bg-c-orange] Paste the snippet CSS after yours in the same snippet file.
> Your styling following the [[#How To]] instructions *must* sit above the snippet CSS to work properly.
%%
> [!Example|embed]
>
> Insert your styling under the comment in the snippet like so:
>
> ```css
> /* --- Insert your folder CSS under here --- */
> /*With Explanation/Recommendations*/
> .nav-folder-title[data-path="Showcase"],
> .nav-folder-title[data-path="Showcase"] + .nav-folder-children {
> --explorer-folder-icon: "\f23c"; /*Encoded Icon Font Code*/
> --explorer-folder-font: var(--rmx); /*Encoded Icon Font Name*/
>
> --explorer-root-folder-background: #a882ff; /*Root Folder Color (Text & Background)*/
> --explorer-root-background: #a882ff20; /*Root Folder's Inner Background Color (copy root background and add 20 after for best/easier styling & legibility)*/
> --explorer-root-folder-color: var(--explorer-root-folder-background); /*Root folder text color when closed/collapsed*/
> --explorer-folder-icon-color: var(--explorer-root-folder-background); /*Explorer Icon Color*/
> --explorer-root-folder-indentation-color: var(--explorer-root-folder-background); /*Folder Line Color*/
> }
> ```
> ```css
> /*Without Explanations/Recommendations*/
> .nav-folder-title[data-path="Showcase"],
> .nav-folder-title[data-path="Showcase"] + .nav-folder-children {
> --explorer-folder-icon: "\f23c";
> --explorer-folder-font: var(--rmx);
>
> --explorer-root-folder-background: #a882ff;
> --explorer-root-background: #a882ff20;
> --explorer-folder-icon-color: var(--explorer-root-folder-background);
> --explorer-root-folder-color: var(--explorer-root-folder-background);Â Â
> --explorer-root-folder-indentation-color: var(--explorer-root-folder-background);
> }
> ```
%%## Original Snippet [📥 Download the Original Folder Styles snippet]()%%