Change Letter Spacing in Skill Bar Text

[krtyler05]

Hi There,

I am loving this skill bar element, but I was wondering if it was possible to change the letter spacing/kerning of the skill bar text? I also wanted to know if there was a way to get rid of the darker colored background behind the text.

Thank you so much!
Katie

[rad]

Hi there,

Thanks for writing in.

It’s possible with custom CSS, example, please inspect your skill bar element and add custom-skill-bar to its class input field. Then add this CSS to your global custom CSS

.x-skill-bar.custom-skill-bar .bar .percent{
letter-spacing: -1px;
}

About the background behind the text, simply inspect your skill bar element and change its color in the color picker option.

Thanks!

[krtyler05]

Worked like a charm. Thanks!

One more question dealing with the skill bar – is there any way to change the header of each bar to be title case instead of uppercase?

Many Thanks!

[jade]

Hi there,

Please add this CSS as well:

.h-skill-bar {
    text-transform: capitalize;
}

Hope this helps.