Changing measurement in Skill Bar

[riugn557]

Hi there,

I have five skill bars on this page http://www.eurasianwhispers.com/worst-mass-murderer/

Although I want to keep the space that each coloured bar fills up proportional to the percentage that is currently showing, I would like to change the writing that is shown within each coloured bar.

So, for example, instead of the Mao’s China bar saying “90%” I would like it to hide that and for it to read 55 million, and for Stalin’s Soviet Union I want it to read 20 million.

Do you know how I can achieve this?

Thank you,
EW

[Joao]

Hi EW

You can add the following code to Cornerstone > CSS

.x-skill-bar .bar .percent:after {
  content:" million"
 }

Hope it helps

[riugn557]

Hi Joao,

Thanks for this. Just a couple of things though:

1. How can I hide the percentage writing?
2. Is there some way to have different ‘million’ figures for each skill bar? At the moment the CSS puts the same number for each skill bar.

Cheers,
EW

[Joao]

HI EW

1 -You simply don´t add the % to the box where it says percentage, see image below

2- The css does not put a number it simply adds millions

You can add your number to the percentage box.

Hope it helps

[riugn557]

Hi Joao,

The problem is that I want the coloured portion of the bar to take up 90% of the grey bar, even though the figure that will be read in the coloured section is 90 million not 90%.

As you can see from your own screenshot when you take the % out of the percentage box the coloured section only takes up a tiny portion of grey bar.

So is there some way that I can keep the proportion of the coloured bar the same as the percentage even though the % isn’t present?

Thanks,
EW

[Joao]

Hi Ew,

Thanks for clarifying.

So you will do like this, you will add a class to each skill bar individually on the skill bar class box. For example, you will add the class: my-skill-1

You will keep the code that was previously given and you will add this code to Cornerstone CSS multiple times, changing the individual class each time.

 .x-skill-bar.my-skill-1 .bar {
    
    width: 90% !important;
}

Hope it helps

[riugn557]

That’s brilliant, Joao, thank you!

Ew

[Joao]

Glad to hear we managed to help!