Meta Post - Common CSS Hacks

Add indicator for notes in subfolders

If you have a lot of notes in a folder and scroll down the file explorer, it’s not really easy to recognize if those files are on the top level or if they belong to a folder, when you come back to work on your notes later. So I added an indicator in front of notes that are in subfolders (or in a specific one) of the vault.

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title + .nav-folder-children .nav-file-title-content::before{
    content: "› ";
    color: var(--text-faint);
}

If you want to only apply that for a specific folder, you can use the following by replacing FOLDER:

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path="FOLDER"] + .nav-folder-children .nav-file-title-content::before{
    content: "› ";
    color: var(--text-faint);
}

As the indicator I chose , because it’s relatively subtle. Or you can change it to whatever you like. The idea came when I saw this post.

2 Likes