Change category background color for boxes

I’ve been struggling to find out how to change the category color background for category boxes:

The goal is to inherit the main category color and add transparency to the background:

Does anyone know how I can achieve this?

1 Like


This is possible with css and little bit template modification. :slightly_smiling_face:

On desktop, categories border has a color variable which you can use for background too.

This is the --category-color variable which is the border-color.

But because this variable is a hex value you can’t make it transparency. However you can add this to a ::before pseudo where you can set opacity too.

I made this as a component so you can install it or fork and modify what you want. :slightly_smiling_face:

Component: GitHub - VaperinaDEV/discourse-category-background-color

Desktop CSS looks like this:

On mobile this color variable is missing from the template so you have to add this style here:

After this you can use the --category-color variable and do the similar like on desktop:




You are the best!

Thanks for the explanation, I’m gonna play with this for a while!

1 Like

Hey @MarcP, Sorry I totally missed you want to this for category boxes. :smiley: I have updated the desktop css to work with Category Boxes too.

1 Like

Ah thanks, I was already figuring out how to get the boxes working! This was more complicated then I thought. Very much appreciated!

1 Like