How to color files with a prefix that are in folders (CSS/data-path)

[JimK]

Things I have tried

• Googling data- attributes
• searching forum
• asking on discord
• I tried somethings with selectors like > + ~ but I don’t know enough css to really know if that was right. Since it didn’t work, I assume it was wrong.

What I’m trying to do

I am trying to color files that start with certain characters a different color. Desired result is something like this:

I can get it working for files in the root of the vault, but it doesn’t work for files in folders.

What am I doing wrong/missing?

.nav-file-title[data-path^='!_'] .nav-file-title-content
{ 
  color: yellow;
}

I got to the above css by using the css from Css color by file type and changing the $ to a ^ to select begins instead of ends.

I am assuming I need to do something like the second line in the snippet (Show / hide file types to be shown in file explorer) I found that selects a child but can’t figure out how to do that for files.

div[data-path$='assets'], 
div[data-path$='assets'] + div.nav-folder-children 
{
	display: none;
}

[holroy]

Could it be that you missed out on the fact that the data-path changes when going into sub-folder, or that you didn’t know how to accomodate that change? In my testing, I tried coloring a file /dans/FS... using ^=FS and that failed, and I fumbled around a bit before discovering that the data-path was indeed /dans/FS....

So then I changed by pattern to *= '/LD' to match a similar, but parallell set of files, and it did match, but that wouldn’t match files at the top level, so I needed a little more tweaking, and I took the simple route and added a second qualifier, by using , to separate the entries.

All in all this lead to the following mish-mash of css code:

.nav-file-title {
  color: yellow;
}

.nav-file-title[data-path ^= 'FS'] {
  color: green;
}

.nav-file-title[data-path *= "/LD"], 
.nav-file-title[data-path ^= 'YSK'] {
  color: blue;
}

The first block, just to know I’m in the right ballpark, and the second block is the failing qualifier since the data-path includes the folder, and then finally the third block with two qualifiers, one for files in containing (or starting in sub-folders) with “LD”, and a parallell one for files in the root starting with the same YSK (for ease of showing the example).

Hope this helps,
Holroy

[JimK]

Hi @holroy

Thanks for the reply.

@holroy

Could it be that you missed out on the fact that the data-path changes when going into sub-folder, or that you didn’t know how to accomodate that change?

Yeah that is what I was getting at with the last paragraph of my post. I don’t know how to grab something that is deeper than the root level.

Your method does indeed work but it isn’t quite what I am looking for because the use of the * makes it find the pattern anywhere in the filename whereas I only want the filename changed if the pattern is at the start (^). Which can be seen here:

So what I am looking for is for “!Hello" to be yellow but for "Hello!” and “Hello!_Goodbye” to be whatever the default file color is.

[holroy]

Doesn’t the '*=/!_' for sub-folders, and '^=!_' for the root folder trigger the pattern only where you want? Notice the use of / to anchor the pattern when matching against files in sub-folders.

.nav-file-title[data-path *= "/!_"], 
.nav-file-title[data-path ^= '!_'] {
  color: yellow;
}

[JimK]

Hi @holroy

Oh I missed that with the slash. It does work now that I put that in, thanks!

[obsequious]

This plugin may make your life easier: GitHub - mdelobelle/obsidian_supercharged_links: obsidian plugin to add attributes and context menu options to internal links

[JimK]

Hi @obsequious that plugin looks nice but I don’t see any way for it to color the file names which is what my post was about. It looks like, from the instructions, that it only styles links. Have you tried this plugin? If so can you verify that it will color the file names in the file tree as well? If it does then I will try it but I already have a lot of plugins so I try not to add any if possible.

[obsequious]

Absolutely.

Not only can you color, but you can add emojis. And these appear in links, in explorer (as above), in quick search, in Recent Files, etc.

[obsequious]

Looking back at the plugin’s README, the main screenshot shows you colored filenames. Did you miss it?

[JimK]

@obsequious

@obsequious

Not only can you color, but you can add emojis. And these appear in links, in explorer (as above), in quick search, in Recent Files, etc.

Ok cool I’ll give it a try then.

@obsequious

Looking back at the plugin’s README, the main screenshot shows you colored filenames. Did you miss it?

If you mean the readme.md that is at the bottom of the guithub page then maybe I did miss it. I initially skimmed it and I did a search for “filename” and “file name” but came up with no matches.

If it is the first screen shot then yeah I skipped that one, that bright interface that I wasn’t familiar with was off putting. On second check I do see that it does seem to have one file colored orange and a few blue. Still don’t get any matches for filename or file name. Bright themes make my eyes hurt so I probably just jumped past that one.

Thanks for pointing me to the plugin.