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

dev
1

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?

3 Likes
2

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.

5 Likes
4

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.

7 Likes
5

Thanks for the info. I will try it out

7

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.

3 Likes
8

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

3 Likes
9

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
}
6 Likes
10

Someone has a CSS to get close to it??

image
image.png815×603 139 KB

11

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

1 Like
12

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