Change progress bar text color

[Bitedge]

Hi guys,

How can we make the text in a progress bar black?

This is the normal short code

[progress_bar percentage=”93″ name=”Customer experience and overall score” value=”93%” type=”” colour=”#fcf4b5″]

If I select the short code and and set black font in the visual editor the code becomes

<span style=”color: #000000;”>[progress_bar percentage=”95″ name=”Customer experience and overall score” value=”95%” type=”” colour=”#fcf4b5″]</span>

But nothing changes>

Please advise, thanks

[Melanie – SUPPORT]

Here you go:

.bar-text {
color: black!important;
}

Cheers!

[Bitedge]

Here I go what?

I added that to the custom CSS box and nothing changes

To be clear I want to make the text in an individual progress bar black no across the site. If its can only be done something that will apply across the site it would need to be conditional. As in if the progressbar is colour=”#fcf4b5 then text should be 000000

[Cosmin – SUPPORT]

Hi,

Melanie provided the correct code to your initial question, so I kindly ask to be respectful. Thanks.

Now, I see you actually have a very specific need and, unfortunately, you can’t do conditionals based off of colors, in CSS.

The closest option to what you need, is to target the bars by their percentage value:

.bar[data-value="75"] .bar-text {
    color: #000000 !important;
}

If you have a bar at 75%, the code above will turn the text inside it, black. Hope this helps.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[Bitedge]

Ah yes that code that Melanie posted does make the text black. I’ll go with that then.

One more thing though. The white text in a progres bar has an embossed or stamped look, I guess it’s a black outline or shadow or something.

Now the progress bars have black text it makes the text look out of focus and not crisp so how can we make the outline or shadow white to re-create the embossed/stamped look?

Thanks

[Cosmin – SUPPORT]

To remove the text shadow on progress bars:

.progress .bar { text-shadow: none !important; }

Regards,
————————————————————————————————————

Cosmin – Support

[Bitedge]

Thanks is there a way to have the shadow but make it a white shadow?

[Melanie – SUPPORT]

That would be this css:

.progress .bar {
text-shadow: 0 -1px 0 rgba(255,255,255,0.25)!important;
}

Thanks for the help Cosmin!

Cheers