Highlight specific files via .css snippet

What I’m trying to do

I’m trying to highlight MOCs in the file tree by the Property “Type: MOC” via .css

Things I have tried

I have not tried anything yet. Total noob concerning CSS, although I already have a few snippets installed.

Have you tried using the plugin Supercharged Links? It allows styling links (and files) any way you desire based on your tags, frontmatter data, etc. And if you don’t want your editor links to be stylized, you can simply disable the plugin settings for that and keep only the file browser styles.

1 Like

Looks interesting, although I would like to keep the amount of plugins at a minimum if possible. Since I’m not planning to make use of the other functions of the plugin I’d rather have a simple snippet.

Well you can just disable those other functions since there are toggles on the plugin settings.

With CSS alone it’s not possible to inspect properties and style based on them. You can target files in the file browser with CSS (and style them based on naming patterns), but finding what’s in the files is not possible with snippets.

So, if you instead put the word “MOC” inside the filename, only then you could target & style those files separately via CSS snippets.

Or even better, if you don’t want to add extra words in the filename, you can simply add an emoji/icon to the file that indicates it as being a MOC note, and then target & style those files with that icon/emoji via CSS snippets.

1 Like