# Categories boxes border-color broken after update

**URL:** <https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521>\
**Category:** Support\
**Created:** [June 7, 2023, 12:05pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521 "2023-06-07T12:05:11Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 12:05pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/1 "2023-06-07T12:05:12Z")

</div>

Hi- couldn’t find anyone else reporting this, but I checked with multiple themes and the categories box border-color inline CSS seems to be broken after updating to 3.1.0.beta4.

This is why:  
 ![Screenshot 2023-06-07 at 13.03.12](https://global.discourse-cdn.com/meta/original/4X/1/7/3/173539c55ade89c4af4323678d045e0d761b37fa.png)

Not sure why it’s injecting both the color and the var (?)

Would appreciate any help or idea.

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [June 7, 2023, 12:22pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/2 "2023-06-07T12:22:07Z")

</div>

I think @MarcP mentioned something similar on the [Colorful Categories - #7 by MarcP](https://meta.discourse.org/t/colorful-categories/207267/7) theme component topic. Are you using that component as well?

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 12:30pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/3 "2023-06-07T12:30:12Z")

</div>

Thanks! No, I’ve tried using Material theme, but also several others just in case. Unfortunately the behavior was the same. Happened right after the update. Everything else seems okay though so far.

---

<div class="post-metadata">

**Author:** ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)\
**Post date:** [June 7, 2023, 12:33pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/5 "2023-06-07T12:33:30Z")

</div>

Good points. Now that I think about it borders need to have a border color in core. It’s not related to the component since even with the component disables the borders are all grey.

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 12:39pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/6 "2023-06-07T12:39:14Z")

</div>

Oops. I misread the question @JammyDodger but no I do not have this component installed.

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 1:45pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/7 "2023-06-07T13:45:39Z")

</div>

I wonder if there’s a clever fix for this? Only thing I can think of is remove some of the characters in JS?

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [June 7, 2023, 4:43pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/8 "2023-06-07T16:43:28Z")

</div>

This was a Discourse regression and doesn’t have anything to do with themes or plugins, we’ll have a fix in soon!

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 4:48pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/9 "2023-06-07T16:48:55Z")

</div>

Thanks! For future reference, I assume there’s no easy access to categories colors via CSS, is that right?  
Perhaps via JS?

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [June 7, 2023, 5:02pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/10 "2023-06-07T17:02:56Z")

</div>

We’ve recently made some changes to make category colors easier to access in CSS by adding them as custom properties (css variables).

You can see these in your browser inspector:

 ![Screenshot 2023-06-07 at 12.59.26 PM](https://global.discourse-cdn.com/meta/original/4X/b/a/a/baac2ea0a9c60eef6b05205f5205a7dc8637ebac.png)

So as long as you know the category’s ID, you can access its color in CSS. The easiest way to find the ID (number) is to look at the category URL, #Support for example: [https://meta.discourse.org/c/support/6](https://meta.discourse.org/c/support/6) — to use the support category’s color you can do something like this:

```css
.your-class-name {
  background: var(--category-6-color); 
}

```

> [@awesomerobot](#):
>
> This was a Discourse regression and doesn’t have anything to do with themes or plugins, we’ll have a fix in soon!

This fix has been merged ([FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub](https://github.com/discourse/discourse/commit/e43ac00bf40d1da662ffbe61cd96b50b1696d21e)), so after updating Discourse the colors should return.

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 7, 2023, 5:06pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/11 "2023-06-07T17:06:16Z")

</div>

this is awesome! thank you for doing this. 🙂

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 5:06pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/12 "2023-06-07T17:06:39Z")

</div>

That’s awesome. Though I guess for this issue the only way to solve it would be to check the id of the category, then apply the correct CSS var using JS.  
Unless you have another workaround in mind? Happy to try code this and share here

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [June 7, 2023, 5:27pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/13 "2023-06-07T17:27:09Z")

</div>

> [@awesomerobot](#):
>
> This was a Discourse regression and doesn’t have anything to do with themes or plugins, we’ll have a fix in soon!

This fix has been merged ([FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub](https://github.com/discourse/discourse/commit/e43ac00bf40d1da662ffbe61cd96b50b1696d21e)), so after updating Discourse the colors should return.

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 5:31pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/14 "2023-06-07T17:31:36Z")

</div>

That was quick!

In the meantime I just finished a workaround 😅  
Leaving the code below just in case.

```plaintext
var categoryBoxes = document.getElementsByClassName('category-box');

for (var i = 0; i < categoryBoxes.length; i++) {
  var categoryBox = categoryBoxes[i];
var dataCategoryId = categoryBox.getAttribute('data-category-id');
categoryBox.style.border = '2px solid var(--category-' + dataCategoryId + '-color)';
}

```

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 5:40pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/15 "2023-06-07T17:40:18Z")

</div>

Just to double check →

Is there a way to update from the front-end UI? I think my updates are on test-passed.  
Or would I need to wait for 3.1.0.beta5 ?

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [June 7, 2023, 5:45pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/16 "2023-06-07T17:45:58Z")

</div>

Most sites are on tests-passed by default, you should be able to update at any time from `/admin/upgrade`

---

<div class="post-metadata">

**Author:** ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)\
**Post date:** [June 7, 2023, 5:53pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/17 "2023-06-07T17:53:27Z")

</div>

I can’t believe I didn’t know this. LOL

Thanks as always!

---

<div class="post-metadata">

**Author:** ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)\
**Post date:** [June 12, 2023, 4:32pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/18 "2023-06-12T16:32:31Z")

</div>

On my instance this is still an issue on the mobile version, desktop is fine 🤔

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [July 12, 2023, 4:32pm UTC](https://meta.discourse.org/t/categories-boxes-border-color-broken-after-update/267521/19 "2023-07-12T16:32:52Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.