I want to make custom css for individual values of properties

Custom CSS & Theme Design
,
1

Nice to meet you
I want to make custom css for individual values of properties

For example, Properties is list type and has values like ‘up’ and ‘down’.
I want make that ‘up’ value has green background color and ‘down’ value red color
Can I do this with css?

I found some css to make every values of one properties same background
.metadata-property[data-property-key=“blabla”] .multi-select-pill{
background: green;

}

2

This might be a tough one… Obsidian includes the name of a property as a data attribute, like you’ve noticed. This is good because we can select and style those with css… However, the values aren’t equipped with any of these useful data attributes, so we cannot access and style them using only css (as far as i can tell).

You might be able to use boolean properties and work with the :has pseudo-class and the checked value of the checkboxes. I don’t really know how you’d implement that exactly, since i don’t know if this would fit your specific use case. But if you look into it, there should be plenty of general css tutorials that are useful (if you know a little css to begin with).

Alternatively, and this sounds a little silly, you could create documents called “up” and “down” and link them every time you want to use these words and have them look a certain color. These links can be styled with the supercharged links plugin, which works in frontmatter.

1 Like
3

This is my first one in forum and you re the first reply to me. Thank you

However, the values aren’t equipped with any of these useful data attributes, so we cannot access and style them using only css (as far as i can tell).
—> That is sad for me…
I have not been(I don’t know it is right grammer,…) interested in CSS I will study it.

4

No problem : )

CSS can be a little daunting… It’s possible to stay surface level, but it can be a real rabbit hole, since HTML is also involved.

So with that in mind, it might be good to use the link-idea as a semi-temporary solution while you figure out if it’s doable with CSS and boolean values in the properties.

The link-idea could be as simple as

  • Creating Notes for “up” and “down”
  • Installing “Supercharged Links” and “Style Settings”
  • Setting rules so that links to the two notes are always styled in a certain way
  • Using links to these two notes in the value fields of properties
5

I installed what you recommended and it works!
I appreciate

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.