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 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 https://github.com/discourse/discourse-groups-css-classes-in-body/blob/main/common/header.html 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

It might be easier to just target the data-category-id attribute instead of trying to add a class to the . 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)). javascripts/discourse/initializers/category-icons.js main let restricted = get(category, "read_restricted"); let url = opts.url ? opts.url : getURL(`/c/${Category.slugFor(category)}/${get(category, "id")}`); let href = opts.link === false ? "" : url; let tagName = opts.link === false || opts.link === "false" ? "span" : "a"; let extraClasses = opts.extraClasses ? " " + opts.extraClasses : ""; let html = ""; let parentCat = null; let categoryDir = ""; let dataAttributes = category ? `data-category-id="${get(category, "id")}"` : ""; /// Add custom category icon from theme settings let iconItem = getIconItem(category.slug); if (!opts.hideParent) { parentCat = Category.findById(get(category, "parent_category_id")); }

[image] Alteras: 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)). Aha! That’s the magic I needed. And so simple. I almost even understood it. I can’t thank you enough.

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

Development

pfaffman (Jay Pfaffman) July 26, 2024, 6:06pm 3

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

Topic		Replies	Views
Adding custom css on particular categories Development css	3	1129	February 7, 2020
Anyway to style discourse topic title? ( IE, red, bold, highlight, anything. ) UX	1	4358	October 27, 2020
Following on from Adding Unique Class Names Feature	19	4948	January 15, 2016
Can I color rows in a topic list according to tags? Product Support	1	348	November 16, 2022
CSS in ID HTML atribute Product Support	7	2558	February 6, 2018

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

Related topics