Hey guys i just customized my version of the Rainbow Folder Titles and asked sailKite on discord to make a snippet so that it also applies to the bookmarked section.
Mine has more colors (14) and i tweaked them for dark mode
CUSTOMISED Iterative Rainbow Folder Titles .css (16.2 KB)
I’m using the titles snippet and when I hover over parent folders the text turns black, when I hover over child folders, the color remains. Does anyone know how I can make the color remain when I hover over the parent folders as well?
You can see here, that Paths is black when I hover over it while AI Prompts stays red.
Have been using a slighty tweaked version of the Iterative Rainbow Folder Titles.css. All looks great – with the little snag that I can’t seem to figure out: The top-level folders are set to 13px but the folders nested below seem take the default text size of 15px. – and look way too big. (So do their folders below.) I’ve tried adding “font-text-size: 13px;” to the .nav.folder-children section and created a specific .nav.folder-children entry with font set to 13px – no luck.
If I open the DevTools section in Obsidian and override the repective setting manually, I can easily make it to look exactly as wished for. Any ideas what I could add to the css to fix the size of the subfolders – and make this permanent? Thanks !
I removed this entire section (it’s at the very top of the file) to make all of the titles the same size.
/* Top Level Folder Titles /
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{
font-size: 18px;
padding-left: 20px;
margin-top: 5px; / space between top level sections */
}
@angiebowen: Thanks for this. Have, inspired by your suggestion, added another little snippet and succeeded in making my folders and subfolders even:
/* Make Top Level Folder and subfolders even */
.nav-file-title, .nav-folder-title {
font-size: 13px;
font-family: Avenir Next;
}
All is well now!
If you want to use your current theme AND the aforementioned CSS snipped; Shortest path to non-darkening folders is putting the following at the very end of your CSS snipped
@media (hover: hover) {
body:not(.is-grabbing) .tree-item-self.is-clickable:hover {
color: var(–Fold1);
background-color: var(–Fold1); */
}
}
Looking into it – By product of (usually) Dark Themes.
Exact location below
Hi! Has anyone figured out how to make it so that the subfolder colors are indented? I have tried playing with various ‘margin-left’ and ‘inline’ parameters in the css but nothing seems to affect the leftmost boundary except for ‘.nav-files-container’ magins - but that does everything.
I am not overly familiar with CSS and can’t proceed. ChatGPT has also failed me in playing with the code.
Anyone figure this out? It would be great to have subfolder color-backgrounds indented so that there is visual feedback as to what is top-level and what isn’t.
Work with the information you have: you know the color is turning black so you can search for the rgb or hex value that corresponds to dark colors.
Hexadecimal order is like that: 0123456789ABCDEF, 0 is the first number F the last
000000= Black
ffffff= white
So youre searching for a number that mostly uses the values 0123 at the beginning.
This could look like that: 030303 or 101010 or 2e2e2e.
RGB uses numbers up to 255
0,0,0= black
255,255,255= white
So youre using for numbers that mostly use values that are 1 or 2 symbols long.
Now you have to search in the snippet itself and change this. The good thing of css. snippets is that obsidian is updated as soon as you save the changed snippet. You dont need to close or update the obsidian window neither do you have to close the snippet file to see changes. In your case you only have to hoover over an item.
How can I change that only first level folders are colored? Secondary folders do not need colors.
I guess you have to modify this part
Keywords in my example should be:
n refers to an arbitrary number
Basically you have to delete the intendation piece by piece and see what works. You may can expect it to only start working when the intendation levels are all the same because some depend on eachoter to work.
In my example its 6n+ because i have 6 Levels till the Colors repeat, same as my headings
It prefers Files over Folders because its easier to see which files are located in which folder.
Using Lithous CSS snippet (coloured titles only) with a little tweak of my own; the theme is Minimal. Since 1.6.0 all my topfolders titles have lost their colour. The child folders still work as always. Any ideas what I need to fix to get the colour back to my top folder’s titles?
I don’t use the snippet myself, so didn’t go through the whole thing, but an update seems replacing the
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"]
sections with:
.nav-files-container > div > .nav-folder>.nav-folder-title[data-path^="0"]
Also, I noticed the padding-left:0px in the /* Top Level Folder Titles */ section was causing the folders to shift around when clicking on them. Commenting that out might be a good idea depending on how it acts for you.
Hopefully that gets you started.
@ariehen Thanks for your pointers. Have started tampering with Lithou’s snippet along what you suggested but so far with no success. Will need more time to figure what’s needed beyond replacing the sections you suggested.
Before Unfold________________After Unfold
Let me take a look. The selectors probably just need to be updated to match any changes to the Obsidian structure. Should be able to get to it this weekend.
Coloured Folders.css (11.4 KB)
Here’s an updated version that works with the current build of Obsidian. This should be a good starting point. If you have anything specific you are wanting to do with it, let me know. I’m more than happy to help.
@Lithou. Thanks for your update and offer to help. I got stuck in my last attempt working and finally re-jigged @sailKite’s Rainbow Folder Titles with my own tweaks – and have been happy with this since my last post – attached for what it’s worth.
Sailkites Rainbow Folder Titles-amw.css (2.5 KB)
Finally got around to fixing the version of this css I’d been using before 1.6:
Iterative rainbow colored folder names, color folder & collapse icons, horizontal rainbow dividing lines that don’t interfere with the guidelines, and color changes for the icons on the sidebars.
The folder icons are just colored in SVGs so it’s all CSS, so they’re easy enough to change or modify, & theoretically people could do iterating icons for folders if they wanted.
Labeled/commented things so hopefully people can use it as a jumping off point even if it’s not quite the aesthetic they’re going for.
Here’s a quick screenshot (my vault is currently a mess):
And here’s the css:
rainbow_folder_names_and_icons.css (5.5 KB)
The one thing I still need to hunt down is the class for the color of an active folder with the folder note open, right now it just goes to the default text color.
Can anyone help me to get this one working on the default Obsidian theme by chance? I like the clean esthetic where only the folder icons are colored (bonus points if the folders can show an “opened folder” icon while open)
