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


(Panteen Pro-V) #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?


(Mittineague) #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.


(Robin Ward) #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.


(Panteen Pro-V) #5

Thanks for the info. I will try it out


(system) #6

(ylluminate) #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.


(Jeff Atwood) #8

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


(Kris) #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
}