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.

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

Desktop CSS looks like this:

github.com

VaperinaDEV/discourse-category-background-color/blob/main/desktop/desktop.scss

.categories-list {

  // Category Lists
  .category-list {
    tbody {
      border-top: none;
      tr {
        position: relative;
        border-bottom: none;
        .category {
          &:before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: var(--category-color);
            opacity: 0.2;
            z-index: -1;

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/blob/22c37769cbf26dced77cba213ac7a17c90f78448/javascripts/discourse/templates/mobile/components/parent-category-row.hbs#L3


      
          {{#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/blob/main/mobile/mobile.scss

.category-list {
  .category-list-item.category {
    position: relative;
    &:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--category-color);
      opacity: 0.2;
      z-index: -1;
    }
  }
}

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	451	October 11, 2022
Change Color of Border Boxes on Categories ux	2	680	July 11, 2020
Customize style of subcategory boxes admins how-to	1	675	August 24, 2023
Category badge can get lost in the background ux	1	689	February 23, 2018
Category background images do not scale good for mobile ux	7	1262	September 17, 2019

Change category background color for boxes

Related Topics