Iterative Rainbow Folder Colors css

[pbhopeful]

Iterative Rainbow Folder Colors css

I’m coming into Obsidian from onenote and one thing I missed from that app was the intuitive color coding of tabs, which made it easy to visually differentiate folders. And I just really like the aesthetics.

So, with a lot of help from @SIRvb, and inspired by the Adding Color to Obsidian forum thread, we’ve come up with the following (left to right).

The attached css files iteratively color folders in a 9 color repeating rainbow pattern up to three levels deep. They work as follows:

• Iterative Rainbow Folder Icons.css creates a colored icon next to the folders (this is most like onenote and my preferred style).

• Iterative Rainbow Folder Titles.css colors the folder title itself.

• Iterative Rainbow Folder Backgrounds.css colors the folder title background.

Iterative Rainbow Folder Icons.css (7.7 KB)

Iterative Rainbow Folder Titles.css (11.5 KB)

Iterative Rainbow Folder Backgrounds.css (7.3 KB)

[anon12638239]

Thanks for sharing. Really useful.

Is there a way to target (colourize) top-level folders only? I have tried to edit the CSS but without success.

Thanks

Angel

[Mae]

If you’re doing it by path you can choose just the top folder of a given section. These files are just doing it in a sweeping definition that affects all folders/files. You need to define the exact folder you want to affect.

[ChopSuey]

@pbhopeful Hello, I’m using the Folder Backgrounds.css and it’s making it where I can’t see the text of files within folders unless I hover over it like so:

Also, the arrows on the left are always pointed downwards whether the folder is open or not, is there a way I can change their direction based on whether they’re open or not?

[morethanx]

hi, did you find a solution to that? I have a similar problem.

[RiCkYB_667]

Hey there!
If you open the snippet css file, look for the part where the indicator is defined. I had to play around with negative left and top values to make mine fit as well.

.nav-folder-collapse-indicator::after {
  position: absolute;
  content : "↓";
  left: -15px;
  top: -2px;
  font-size: 15px;
  font-weight: bold;
  transition: transform 10ms linear 0s;

[RiCkYB_667]

And to make it show different arrow on collapse, just add a new section with .is-collapsed part:

.is-collapsed .nav-folder-collapse-indicator::after {
  position: absolute;
  content : "🠖";
  left: -15px;
  top: -2px;
  font-size: 15px;
  font-weight: bold;
  transition: transform 10ms linear 0s;
}

[morethanx]

Wow, that’s amazing! I didn’t expect such a quick response and it worked perfectly well. Thank you!
Also, I haven’t realised before how much I missed this colour coding and how much it helps me navigate.

[RicR]

Hi. Hoping a CSS legend might be able to further narrow this concept down. I am writing a dedicated use vault for a leadership program. The initials are LMCLP. I have come up with a folder structure that will suit and naming the folders:-
01 Logs
02 Mixed
03 Cards
04 LEAD
05 Projects

The folder first letters spell out the acronym. I would like to bold them and colour them yellow, for example, but can’t get CSS selectors to work at present. I have tried:-

.nav-folder-title:nth-of-type(4n) {
font-weight: bold;
color: yellow
}

to select the fourth letter but no joy.

Cheers,

[56phil]

Hi. I could use some help adding this feature to my Obsidian. I’ve downloaded the three CSS files, and moved them to the vault’s root. I observed no change. What am I missing? Thanks.

[willasm]

You need to add them to the snippets folder, eg. ‘VaultName/.obsidian/snippets’. Create the snippets folder if it does not exist yet. Then under settings/appearance at the bottom make sure the snippet is enabled. You will only need to enable one of them so choose which one you prefer.

[56phil]

That was just what I needed. Thank you.

[AdriJ]

Is there a way to change the nested folders to have black text instead of white? I tried looking through the CSS, but don’t understand it enough. Thank you.

[AdriJ]

All set, was able to figure it out!

[Penelopix]

Hey, there, brand new user here. I fixed my folder arrows to not be in the titles, but the nested folders are still messed up. Please help

[TheTao]

With insider release 1.3.1, this appears to be broken.

[morethanx]

Same for me. Was anyone able to repair? =)

[webinspect]

I was able to fix the folder backgrounds snippet. I also made a couple of adjustments: these folders now use spacing and colors from the theme instead of stock colors, so it should match whatever theme you are using (examples below all use the Minimal theme with different color schemes):

Iterative Rainbow Folder Backgrounds.css (6.0 KB)

[ElPIp]

Has anyone managed to get the indents to work properly in the latest version? In the current version the backgrounds are all at the same point so you can’t visually tell which is a folder and which is a sub-folder.

[LordPiki]

Hey, I have a problem where if i turn on the Iterative Rainbow Folder Icons and Iterative Rainbow Folder titles it’s broken and shows weird things. can anyone help?