ProgressBar Customization | XM Community
Skip to main content
Hello,



I am trying to customize the progress bar on my survey, using the following CSS code:



However, I want to increase the size of the 0%, 100% and SurveyCompletion labels - as they are too small now.

I am not sure if I am able to do it via this code, and i will appreciate some assistance in getting around this.



Thanks - PS



_.Skin .ProgressBarContainer label{

text-transform: uppercase;}



.Skin .ProgressBarFillContainer{

width: 100px;

border: none;}



.Skin .ProgressBarFill {

background-color: green;

height: 20pt;

}

_
Try changing the font size of the ProgressBarContainer label. Maybe something like:

```

font-size: larger;

```
thanks - this worked ... i went ahead and added other attributes - re color and specific font-size as in:



.Skin .ProgressBarContainer label{

text-transform: uppercase; font-size: 16px;color: #002147;}



but I am left with the percentage range: 0 to 100..



how do I make these larger or at least ensure that the percentage values appear in the shaded region?



thanks - PS
Setting the font-size on .Skin .ProgressBarContainer would also change the percentages.
thanks very much for your help - it worked.

Leave a Reply


Terms & Conditions