How to change the font color and size of the highlighted label

[user21064]

Hi, is there a way to increase the size of the highlighted label and also changing the font colour isnt working. Thanks

[Max]

Greetings, @user21064 and welcome to the Community

Here is the code to change the font size of the highlighted label:

.es-highlight-element-content {
  font-size: 12px;
}

This code should be added to the Custom CSS field on the Appearance tab of your widget’s settings.

As for the setting to change the font color of the highlighted label, it seems to be an issue on our end. I’ve forwarded it to the devs and will update you once I have any news

[Max]

Due to how our widget functions, the Custom Column Primary Color takes precedence over the Highlighted Label Text Color setting:

To ensure the highlighted label displays the correct color, you have two options:

1. Update the Custom Column Primary Color to your desired color.
2. Set the Custom Column Primary Color to transparent and then choose your preferred color using the Highlighted Label Text Color setting.

I agree that this logic might be confusing, and we’re going to make it clearer in the near future.

Please try one of the solutions and let me know if it worked

[Sina]

Hi @user21064 welcome to community

The Custom Column Primary Color also changes the color of the button.

Styling only the Highlight Label.
You can do a lot with this.
A few small adjustments may be necessary depending on your column style

.es-ribbon {
font-size: 20px;
font-weight: 400;
color: #fff;
background-color: #404040;
border: 1px solid;
border-color: #fff;
}

Ribbon Style and font size a litle bit bigger.

.es-ribbon {
font-size: 30px;
font-weight: 400;
color: #fff;
background-color: #404040;
border: 1px solid;
border-color: #fff;
top: 15px;
right: -40px;
width: 148px;
height: 42px;
padding: 15px 20px 12px;
margin: 0px;
}

If you like, you can also go to the left side

.es-ribbon {
font-size: 30px;
font-weight: 400;
color: #fff;
background-color: #404040;
border: 1px solid;
border-color: #fff;
left: -40px;
transform: rotate(-45deg);
top: 15px;
width: 148px;
height: 42px;
padding: 15px 20px 12px;
margin: 0px;
}