How to apply style to nested sub folders in the file explorer

Help
1

Does anyone know how to apply different styles to different levels of sub-folder titles in the file explorer pane?

What I’m trying to do

I am trying to apply a common style to each common level of sub-folders. I have looked at the Rainbow sub folder style technique but that is not what I am looking for. Basically, all folders directly below the root will have the same style. Then the first set of sub-folders below that set will have a common style applied which is to be different from the top-level folders.

Things I have tried

/* Top Level Folder Titles /
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{
color: var(–Fold5);
padding-left: 3px;
margin-top: 7px; / space between top level sections */
border-radius: 5px 5px 0px 0px;
}

/* General Nav Folder Children (this is the part that expands from each top level folder) */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children .nav-folder-title{
color: var(–Fold4);
padding-left: 0px;
border-top: var(–FoldText) 1px solid;
border-radius: 0px 0px 5px 5px;
padding-bottom: 12px;
}

This technique works for the first and second-level folders only. I cannot figure out how to apply a style to the subfolders below the first child folder.

Best Regards
-Tim C.>

2

Even when you style a simple thing as lists in CSS, when styling nested lists & sublists the only unfortunate way to do it is with ul li / ul ul li / ul ul ul li, etc.

So, to translate that into Obsidian folders/subfolders, here’s the only pretty & clean way I could come up with for 6-level nesting using the new CSS nesting & feature (because your way of doing it the old-fashioned CSS style would have created ginormous-length selectors):

/* top-level */
.nav-folder-children > .nav-folder {
  & > .nav-folder-title { color: maroon; }

  /* level 1 children */
  & > .nav-folder-children > .nav-folder {
    & > .nav-folder-title { color: red }

    /* level 2 children */
    & > .nav-folder-children > .nav-folder { 
      & > .nav-folder-title { color: blue }

      /* level 3 children */
      & > .nav-folder-children > .nav-folder {
        & > .nav-folder-title { color: green }

        /* level 4 children */
        & > .nav-folder-children > .nav-folder {
          & > .nav-folder-title { color: magenta }

          /* level 5 children */
          & > .nav-folder-children > .nav-folder {
            & > .nav-folder-title { color: orange }

            /* level 6 children */
            & > .nav-folder-children > .nav-folder {
              & > .nav-folder-title { color: black }
            }
          }
        }
      }
    }
  }
}

The result:

Screenshot-21_11_2023-11.38.20

P.S. I know this is not a best practice but rather a bad practice when it comes to the new & nesting feature in CSS, which recommends at most 1-2 nesting levels, but hey - it achieves something that isn’t possible with CSS YET (hopefully they’ll add some :nth-nested(level) selector soon)

2 Likes
3

Thank You! Works like a champ.
Best REgards
-Tim C.

1 Like
4

how would I target specific sub-folders to define a specific color?
I have tried variations of the following. But placing the following code after the nested code above seems to have no effect:

.nav-folder-title[data-path=“05 DRAWING PKGS”] {
color: var(–fold3);
}

OR >> How would I expand the code such that any sub folder with “05” in the title would have the same color style applied?

Thank You

5

I don’t think that’s possible, because every subfolder’s “data-path” attribute will contain the “05” since it’s the full path.

If you write something like this:

.nav-folder-children > .nav-folder > .nav-folder-title[data-path*="05"] {
  color: yellow !important;
}

It will style folders with “05” in them, but also subfolders of those folders because subfolders are also in the path containing “05”.

6

Hmmm, now that’s a bit frustrating.
Thanks for the insight, your statement holds true. It does change the color of all sub-folders below.

Thank You
Best Regards
-Tim C.

1 Like
7

I have been working with adjusting font size and Paddag associated with different sub-folder levels. When I add the following or variations of it at the top level, it effects ALL sub folders. How would I add font size and padding to sub folder titles:

/* top-level /
.nav-folder-children > .nav-folder {
& > .nav-folder-title {
color: var(–Fold0);
font-size: 18px;
padding-left: 20px;
margin-top: 5px; / space between top level sections */
}

8

If you want only the top folders to have one style and ALL subfolders to have another style:

.nav-folder-children > .nav-folder > .nav-folder-title {
/* top-level style */
}

.nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-title {
/* style for ALL subfolders and ALL their sub-subfolders */
}
9

Wouldn’t it be possible if you do a dual setup; one for the ones having 05, and then one for anything below that level? I’m a bit rusty in my CSS but something along the lines of:

.nav-folder-title[data-path*="/05"] {
  color: var(–fold3);
  & > .nav-folder-children > .nav-folder-title[data-path*="/05"]{
    color: green; /* Reset the color to something */
  }
}

Or something those lines. I’m not sure if the DOM has an order allowing for this kind of nesting. I wasn’t able with my limited time and knowledge in CSS to make it work, but in theory something along these lines should be doable (I think :-D).

10

I think that at this stage you’re overcomplicating things to a level that it’s probably easier & faster to just use a plugin like File Color where you manually set the color of folders/files :sweat_smile:

11

Uuuugh but that’s so many mouse clicks, not sure I have the time to perform all those mouse clicks and request forum help at the same time :slightly_smiling_face:

12

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.