Any live examples of category-specific CSS styling?

Happy to see this particular subject come back up! Since I’m a beginner at CSS and I’m still learning how to get everything to work in Discourse (as there are quite a few tabs that make things a bit confusing for me), I was wondering what was meant by:

In the CSS tab under Admin / Customize / CSS/HTML / CSS, I’ve tried
category-categoryname.category-list{...
.categoryname-category-list{...
.category-list-categoryname{...

…and nothing seems to make the category-specific CSS stick. What’s the proper way to prefix this?

How I’m Using It:
I’m in the process of creating a forum that’ll be handling multiple brands, with each brand as a “Parent” category with 4-5 “child” categories beneath it. Since each brand has a very unique visual language, the “Parent” category and each of their “child” categories for each need to look very different from one another.

Ultimately, having some kind of “theme” browser for Discourse would be amazing! I’m able to best edit CSS and HTML when I have it all exposed to me and I can tweak things and see them live update, so things are a bit slow-going for me with my Discourse customization as it’s a lot of right-click, inspect, kind of locate what I’m looking for, put it in the CSS editor, “Nope, wrong thing…”, repeat. :cold_sweat:

If I’m able to figure out the proper prefix for category-specific CSS-styling, I’d be more than happy to share a live example when our forums go live! :wink:

1 Like