Categories boxes border-color broken after update

Support
1

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

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

Would appreciate any help or idea.

2

I think @MarcP mentioned something similar on the Colorful Categories - #7 by MarcP theme component topic. Are you using that component as well?

2 Likes
3

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.

5

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.

1 Like
6

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

2 Likes
7

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

8

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

3 Likes
9

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

10

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

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 — to use the support category’s color you can do something like this:

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

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

2 Likes
11

this is awesome! thank you for doing this. :slight_smile:

1 Like
12

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

13

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

1 Like
14

That was quick!

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

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)';
}
1 Like
15

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 ?

16

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

2 Likes
17

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

Thanks as always!

18

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

19

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