Hi, I’m running a game forum and I’d like to be able to customise CSS for each category so that each category will look different with each other (example: Fallout 4 category can have more post-nuclear design, Halo category will have futuristic design,etc…) Currently the CSS customize in Admin affect all categories. Any possible way to change css for each category without affecting other category?

Isn’t it only a matter of using the correct selector(s)? eg. the body tags class value should have a category specific value you could use.

When you’re in a category, discourse adds the category slug to the body element. For example, on meta here when I visit the bug category I get category-bug in the body tag. If you use that as a selector you can style each category differently.

Thanks for the info. I will try it out

I’m really curious about this one in terms of steps on customizing a Discourse system similar to how https://forums.funcom.com/ has customized their system (notice how wonderfully customized each section is by going between Conan Exiles and Mutant Year Zero). Any particularly thorough tutorials floating around? I’m seeing a number of them, but I’d like to know if any really stick out or are especially authoritative when it comes to what Funcom has done.

Perhaps this is one that should be on the default customer page @awesomerobot and @HAWK?

It’s a surprisingly simple customization — they’ve designed their base theme to work well with background images, and the images themselves are applied per-category (and the images are where most of the style comes from). This CSS accomplishes most of the work: // This adds a background color to topic lists, so they're readable when there's a background image tbody { background-color: rgba(30,30,30,0.8); } // This adds a background color to topics that fades on the right .posts-wrapper { background: linear-gradient(to right, rgba(31,34,37,0.95) 0%,rgba(0, 0, 0, 0.83) 80%,rgba(0,0,0,0) 100%); } body.category-staff { // Replace staff with the name of your category background-image: url(https://yourimagehere.jpg); // Add your category-specific background image }

Someone has a CSS to get close to it?? [image]

If you open the browser inspector to see these elements you will find also all the CSS related.

I did it in paint :sweat_smile: the top ones are as they currently are, and the bottom ones as I wish they were

How can I customise CSS for each category? (as in having different design for each category)

Development

dax (Daniela) 2019 年10 月 4 日 15:10 11

如果您打开浏览器检查器查看这些元素，您还会找到所有相关的 CSS 内容。

话题		回复	浏览量
Any live examples of category-specific CSS styling? UX	12	5290	2019 年7 月 2 日
Different theme or CSS for different categories UX	7	1404	2018 年4 月 9 日
Specific customization for each category Feature	2	1203	2014 年4 月 26 日
How can I change the background of a certain topic? Development	24	1952	2023 年7 月 19 日
Unique color scheme for a category Development	2	623	2023 年9 月 7 日

How can I customise CSS for each category? (as in having different design for each category)

相关话题