Different theme or CSS for different categories

faq-material

#1

Hi,

I’m wondering if it’s possible to display a different theme for each category I have in the forum? I didn’t find answer in the forum.

I noticed that in the body tag the category name is displayed, but, when you go in a subcategory, the subcategory name is added their. So if you have 10 subcategory you need to put the 10 in the css and it’s not great. If the moderator adds a subcategory, you need to add it also in the css.

I also noticed that when you go to an article in the subcategory, the url looses the category name so there is nothing to help.

Any suggestion/idea would be appreciated :wink:


(Rafael dos Santos Silva) #2

No, it doesn’t. I can see the category class applied to body in this topic just fine:

<body class="category-ux">

#3

I agree it stays on the body class, but the category name is not in the URL.

Let’s say my website is www.example.com/category/subcategory, if I click on a subcategory topic the URL becomes www.example.com/mytopic

The idea behind would have been to use (with JS I presume) the category URL with the CSS.

I can’t believe there is not a simple way to do that.


(Kris) #4

Is there any reason you can’t look for the class name in the body tag instead of the URL?

It might help more if you explain specifically what you’re trying to do.


#5

The tag in the body changes all the time, that’s the problem. the category tag is “category-mycategory” and the subcategory tag is “category-mycategory-mysubcategory”. If it would have been “category-mycategory mysubcategory” there won’t have a problem.

I have a forum that will support different games and I’d like that each game has its own theme/css. One game will be a category + subcategories.


(Rafael dos Santos Silva) #6

I think something like

[class^='category-mycategory'] {
  background-color: pink;
}

should work.


(Kris) #7

Right, the above CSS selector will select any class that starts with category-mycategory, which includes category-mycategory-subcategory

You can see more options here:


#8

Thank you so much! It works!
I didn’t know that selector, I haven’t had to use it before. This is great.

You made my day.