Make Progress Bar Opaque | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Make Progress Bar Opaque

  • Jul 23, 2019 12:11 PM UTC
  • 3 replies
  • 57 views
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
}

View original

3 replies

ana_velez
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • ana_velez
  • QPN Level 5 ●●●●●
  • Jul 25, 2019 4:53 PM UTC
Hi Jeremy!! Could you add a screenshot of what you are seeing? please!
Ana Vl
! Hi Ana, Thanks for the response!
Forum|alt.badge.img+2
  • Kalidas
  • Answer
  • Jun 4, 2021 12:08 PM UTC

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