Changing the background color of an obsidian folder

[rds]

What I’m trying to do

Hi, I am trying to change the background color of a custom obsidian folder with a CSS snippet, but it doesn’t work. Can anyone help me out?

Things I have tried

This is the snippet i have tried:

/* changing the background color of a folder */
.nav-folder-title[data-path=“D:\Obsidian\01-Notizen”] {
background-color: green;
}

I stored the snippet as a css-file in the folder .obsidian\snippets and activated it in the Obsidian preferences, but it dont work.
Many thanks for your help.

[holroy]

Have you verified that you’re using the correct data value by looking in Developer Tools? It doesn’t seem correct to have a full path there, I would suspect you should use a path relative to your vault.

In addition you might need to add !important, or specify some more selectors to get it to override other similar selectors.

[smiggles]

The Issue

“data-path” is a local Obsidian variable. You need the data path to be in context of the vault. It appears this is a root folder so the data path would be 01-Notizen

In addition, nav-folder-title is not the class we want to modify. It should be nav-folder which contains nav-folder-title

Solution

The corrected CSS snippet would be,

.nav-folder [data-path="01-Notizen"] {
    background-color: green;
}

However, using browser default color names might not be the best fit for the Obsidian UI. I recommend using the Obsidian green that coincides with your theme (default or otherwise)

In addition, the color may be quite distracting and clash with the font color. Therefore, I recommend using rgba notation to select an alpha value (opacity)

You can change the opacity to whatever you want. Remember to keep it as a value between 0 and 1, I chose 0.25

.nav-folder [data-path="01-Notizen"] {
    background-color: rgba(var(--color-green-rgb), 0.25);
}

If you plan on doing this for more folders; remember to ensure theres a -rgb to the end of the color variable

Here’s a list of all obsidian color variables

    --color-red-rgb
    --color-orange-rgb
    --color-yellow-rgb
    --color-green-rgb
    --color-cyan-rgb
    --color-blue-rgb
    --color-purple-rgb
    --color-pink-rgb

Best of luck!

[rds]

Now it works. Thanks for your quick and competent help.

[rds]

Thanks for your quick reply. You were right, the path must be relative to the vault. However, in my attempt, the reference to the class to be changed was also incorrect, as @smiggles showed me.
I am very new to Obsidian and have just learned how to use CTRL+ SHIFT+ I to display the correct class structure of the application.