Change category background color for boxes

MarcP · September 12, 2022, 8:49am

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?

Don · September 12, 2022, 3:45pm

Hello,

This is possible with css and little bit template modification.

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.
Screenshot 2022-09-12 at 17.25.56

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.

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

Desktop CSS looks like this:

github.com/VaperinaDEV/discourse-category-background-color

desktop/desktop.scss

main

@import "category-background-mixin";

.categories-list {

  // Category Lists
  .category-list {
    tbody {
      border-top: none;
      tr {
        position: relative;
        border-bottom: none;
        .category {
          &:before {
            @include category-before-style;
          }
        }
      }
    }
  }

This file has been truncated. show original

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

github.com/VaperinaDEV/discourse-category-background-color

javascripts/discourse/templates/mobile/components/parent-category-row.hbs

22c37769c


      
          {{#unless this.isHidden}}
            <PluginOutlet @name="category-list-above-each-category" @args={{hash category=this.category}} />
            <div data-category-id={{this.category.id}} data-notification-level={{this.category.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}} class="category-list-item category {{if this.isMuted "muted"}}">
              <table class="topic-list">
                <tbody>
                  <tr>
                    <th class="main-link">
                      <CategoryTitleLink @category={{this.category}} />
                    </th>
                  </tr>
                  {{#if this.category.description_excerpt}}
                    <tr class="category-description">
                      <td colspan="3">

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

github.com/VaperinaDEV/discourse-category-background-color

mobile/mobile.scss

main

@import "category-background-mixin";

.categories-list {
  
  // Category Lists
  .category-list {
    .category-list-item.category {
      position: relative;
      z-index: 0;
      &:before {
        @include category-before-style;
      }
    }
  }
  
  // Category Boxes
  .category-boxes-with-topics,
  .category-boxes {
    .category-box {
      position: relative;

This file has been truncated. show original

Desktop

Mobile

MarcP · September 12, 2022, 3:55pm

You are the best!

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

Don · September 12, 2022, 4:21pm

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

MarcP · September 12, 2022, 4:31pm

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

Topic		Replies	Views
Inconsistent use of --category-color variable in Default Theme? Support	2	595	October 11, 2022
Background color in categories page (Mobile version) Support	6	694	June 8, 2020
Change Color of Border Boxes on Categories UX	2	778	July 11, 2020
Adding Transparent Background Image To Categories Support	1	705	December 15, 2018
How can I change the category background in the mobile version? Support mobile , horizon-theme	5	239	May 11, 2026

Change category background color for boxes

AI-generated summary

Related topics