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.
