How can we customize headers?

[ShinsuSenju]

Like how does files get categorised in public others and private?

[CorellanStoma]

The folders are sorted with numbers from 0-9, with the numbers I define a simple order for the main folders. The headers are simply pushed in between with CSS.

addon-folder-headers.css:

If you want to change the number of headers or the order you have to adjust the addon-folder-headers.css, Header 2 looks like this for example:

.nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(4)::after {
  content: var(--folder-header-2);
  background: var(--folder-header-2-background, var(--bg1));
  color: var(--folder-header-2-color, var(--text-muted));
  position: relative;
}

.nav-files-container:hover > .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(4)::after {
  background: var(--folder-header-2-background-hover);
  color: var(--folder-header-2-color-hover);
}

There you only have to change the number of the child or remove some lines if you want to have fewer header lines.

addon-folder-hide-numbers.css:

If you have adjusted the folder names, you also have to adjust the addon-folder-hide-numbers.css where only the data-path names are adjusted.

[data-path="1 Notes"] .tree-item-inner::first-letter,
[data-path="2 Bookmarks"] .tree-item-inner::first-letter,
[data-path="3 Tasks"] .tree-item-inner::first-letter,
[data-path="4 Personal"] .tree-item-inner::first-letter,
[data-path="5 Study"] .tree-item-inner::first-letter,
[data-path="6 Work"] .tree-item-inner::first-letter,
[data-path="7 Knowledge"] .tree-item-inner::first-letter,
[data-path="8 Resources"] .tree-item-inner::first-letter,
[data-path="9 Templates"] .tree-item-inner::first-letter {
    color: transparent;
    font-size: 0px;
}

After saving the CSS files, the changes should be visible.