Make Progress Bar Opaque | XM Community
Skip to main content
I'm struggling to make the progress bar totally opaque. I have set the bar to remain fixed at the top of the page. However, the opacity setting still allows the survey question text to be seen through the progress bar, which is really distracting.



.Skin .ProgressBarContainer label{

text-transform: uppercase;

font-size: 16px;

color: #ffffff;

height: 30pt;

position: fixed;

top: 10px;

right: 0;

left: 0;

opacity: 1;

}



.Skin .ProgressBarFill{

height: 30pt;

opacity: 1;

}



.Skin .ProgressBarContainer{

top: 0;

position: fixed;

opacity: 1;

}



Any advice would be massively appreciated!
Hi Jeremy!!





Could you add a screenshot of what you are seeing? please!
!

Hi Ana,



Thanks for the response!

Hi
It's an old post but I was able to use the below code to fix the bar at the top to make it opaque.

.Skin #ProgressBarFillContainer label{
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
height: 30pt;
position: fixed;
top: 10px;
right: 0;
left: 0;
opacity: 1;
z-index:9
}

.Skin #ProgressBarFill{
height: 30pt;
opacity: 1;
z-index:9
}

.Skin #ProgressBarFillContainer{
top: 0;
position: fixed;
opacity: 1;
z-index:9
}

Leave a Reply


Terms & Conditions