How to add a class to category tr to optionally apply CSS

Dev
1

I’m adding some stuff to the in the topic list. I need to apply CSS only to the categories that I’m supposed to be affecting.

I think I need to do that by adding a “can-rate” class to the <tr> of I the categories that I want to affect.

I think I can do it in my glimmer component (which might know if it should apply the change?), though I’d be just as happy to do it in the initializer.

I’ve tried some things that didn’t work. Can someone throw me a bone or point me to an example? Like discourse-groups-css-classes-in-body/common/header.html at main · discourse/discourse-groups-css-classes-in-body · GitHub seems like the right track, but I don’t know how to find out in the initializer if the category is one that I want to change (so I guess the initializer is the wrong place?)

Maybe Override class list

1 Like
2

It might be easier to just target the data-category-id attribute instead of trying to add a class to the <tr>.

If you need to add styles to the tr without the data-category-id, you might have some luck looking into how the Category Icons theme component changes the category links render (which affects everywhere). Something along the lines of adding the class/attribute to a child element and letting the style come up with some CSS (i.e. tr:has(> .some-class)).

3 Likes
3

Aha! That’s the magic I needed. And so simple. I almost even understood it. I can’t thank you enough.

4 Likes