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
}
如果您打开浏览器检查器查看这些元素，您还会找到所有相关的 CSS 内容。
我是在画图里做的：
上面的是当前的样子，下面的是我希望的样子。