Attach a user controlled css class to path

[trashhalo]

Id love to have more control over how the sidebar is displayed. If there was some mechanism to let me stick extra classes onto this element it would allow me to style each path differently

https://github.com/Robin-Haupt-1/Obsidian-Map-of-Content/blob/main/src/svelte/View.svelte#L178

Example use case:

I want every note about a person to maybe be a different color or even fancier have person icon next to them.

Options:

1. Attach all the tags in the note as classes tag-person
2. Give a yaml key moc_class: person
3. Provide a interface to associate query to css class. path:people = css person

---

I'd be willing to make this change if you agree on a path forward

[Robin-Haupt-1]

Hi,

I'm not at all sure i completely understand your suggestion.

what do you mean by

I want every note about a person to maybe be a different color

The <div class="path"> element you linked to is not for the tree but the paths to the current note at the top, so all the paths end at the same note. Did you mean that you want to style the individual notes in the tree? Then you'd have to change the style of the <li> elements in the tree.

Why don't you just add little emojis to the note names? That's how i do it, and that way there's a single source of truth wherever you encounter the note. I have templates for people, websites, youtube videos that have the emoji as the first character. Then i just copy if from there (since you can't have templates for note names)

[trashhalo]

Then you'd have to change the style of the<li> elements in the tree.

Oh yes this is what I wanted. Id like something like this plugin to apply to the map of content. https://github.com/mdelobelle/obsidian_supercharged_links

I could insert emojis into the filenames. Ill consider that as a workaround!

[Robin-Haupt-1]

You could ask the creator of that plugin if he would add support for the view of my plugin.

Selecting the links in it is as easy as this: .workspace-leaf-content[data-type="map-of-content"] a::before{ content: "👤 " } which gives you this if you put it into the css snippet folder:

Then he'd just have to work his magic and it would all work out.

[Robin-Haupt-1]

If you do ask him and he's interested, tell him to talk to me, because i would have to make some changes to my code.