Making labels look better?

[CrushyGreenRen]

Please pardon me if I ended up posting in the incorrect board.

I have small knowledge of CSS. How can I make labels have their specific color as their background color and their text being white?

Right now, I have this:

I want the labels to have their colors be the background color, and their text to be white. Something like this:

Any ideas?

[Retread]

Hi CrushyGreenRen

Mar 30, 2020 2:28:47 GMT -8 CrushyGreenRen said:

Please pardon me if I ended up posting in the incorrect board.

It can be difficult, trying to determine the correct board for a topic. Sometimes one doesn't know how the solution will be derived beforehand. In this case, Coding help or Request a Plugin might be more appropriate.

---

Let's inspect a typical label and see what we have to work with ...

<span class="ui-label label-1 label-board-7" style="border-color:#e71919; color:#e71919;">Hot</span>

The html element is a span.
That span has both a class and a style attribute.

Class assignments:

ui-label
All labels will have this class. In a typical style sheet we can change the font-family, font-size, etc for all labels by defining this class.

label-1
When a label is created in the About tab of a Board's properties, it will have a number. This is the first label that was created for any board. This unique identifier could be used, if we want to affect this particular label and only this particular label.

label-board-7
All labels for this particular board will have this class assigned. It could be useful in other situations but not for what you want to accomplish.

Style properties and values:

When this label was created, the color chosen was a shade of red: #e71919. This is being used for both the (text) color and border-color. In a plain-vanilla proboards theme, the other aspects (border-width and border-style) of the border are not defined, so this won't appear. But one could define those for the class .ui-label in the style sheet and borders will appear for all labels.

But for your issue, the color property will be of primary interest.

Text:
In this case, Hot was the text defined when the label was created.

---

Making Changes (manually)

We could define the class for each individual label.
For the Hot label in this example, we could use something like this:
span.ui-label.label-1{
   background-color:#e71919;
   color:white!important;
   border-color:white!important;
}
The color and border-color properties are defined in the style attribute for that span and that happens after the class assignment. So we MUST use the !important qualifier for those properties when we define them here, else they will be overwritten by the style attribute.

If you only have a few labels, this wouldn't be difficult to accomplish in manual fashion. But if you add any labels at a later date, you'd need to go back to your Style Sheet and add definitions for the newly created labels.

---

Making Changes (automatically)

I don't have the skills necessary to write a script or plugin for this. But I suspect the process would go something like this:

Wait until the page is loaded.

Find each and every instance of a span which has the class ui-label assigned to it.

For each one, extract the value of the color property within the style attribute. Then apply that value to the background-color attributes of that particular class. Finally, apply the value White for the color (and border-color).

Lather, rinse, repeat for each instance found on the page.

Although I can't write a script for you, I reckon one of the more skilled members will pick up the ball from here.