Make Progress Bar Opaque | XM Community
Skip to main content
Solved

Make Progress Bar Opaque

  • July 23, 2019
  • 3 replies
  • 30 views
J
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!

Best answer by Kalidas

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
}

3 replies

ana_velez
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • ana_velez
  • QPN Level 5 ●●●●●
  • July 25, 2019
Hi Jeremy!! Could you add a screenshot of what you are seeing? please!
Ana Vl
J
! Hi Ana, Thanks for the response!
K
Forum|alt.badge.img+2
  • Kalidas
  • Answer
  • June 4, 2021

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
}

Terms & ConditionsAccessibility statement