Change Color of Progress Bar Text | XM Community
Skip to main content

I need to change the colour of the text used for the progress bar. I’ve successfully changed the background and foreground colours of the bar itself but have been unsuccessful changing anything to do with the font, be it size or color etc

 

 

What is the name of the piece I’m trying to change? In the inspector the actual text is just in unnamed <td> cells. The overall container seems to be called ProgressBarContainer but nothing I’ve done effects it

 

I thought maybe one of the two below would work but they have no effect:

 

.Skin .ProgressBarContainer {

color: red

}

 

or

 

.Skin .ProgressBarContainer {

font-color: red

}

 

I have also tried the solution posted here to no avail: 

 

Try this below

 

.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td {
    color: red;
    font-size: 14px;
    font-weight: 500;
}

 

Try this below

 

.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td {
    color: #757575;
    font-size: 20px;
    font-weight: 500;
}

 

 

Thanks. This has gotten me most of the way there but seems to default the font to Times New Roman, I tried using font-family but it doesn’t do anything. Any idea what I’m doing wrong?

 

The below changes the color and size correctly but not the font itself, I’m using Tahoma for the rest of my survey:

.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td 
{ color: #757575; font-size: 16px; font-family: Tahoma

}

 

@FaviousM 

I think you fortot add the semicolon at the end of Tahoma;
If it doesn't work with semicolon add "!important" as shown in the above below.

 



.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td { 
color: #757575; 
font-size: 16px; 
font-family: Tahoma !important;

}


 

@FaviousM

I think you fortot add the semicolon at the end of Tahoma;
If it doesn't work with semicolon add "!important" as shown in the above below.

 



.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td { 
color: #757575; 
font-size: 16px; 
font-family: Tahoma !important;

}


 

 

No it’s still stuck in Times, this is the exact code I’m using:

 

.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td 
{ color: #aaaaaa; 
font-size: 16px; 
font-family: Tahoma !important;

}

 

@FaviousM Could you please share a survey link to test. I need to inspect the element to find what's causing it.

@FaviousM Could you please share a survey link to test. I need to inspect the element to find what's causing it.

Hopefully this should work.

https://eir.eu.qualtrics.com/jfe/preview/previewId/030bf271-5900-4eb3-8b13-3ad3cf2bfb1d/SV_3OUBWpVH818nCvk?Q_CHL=preview&Q_SurveyVersionID=current

Just to confirm, the below is the full custom CSS I’m using for this survey:

.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td 
{ color: #aaaaaa; 
font-size: 16px; 
font-family: Tahoma !important;

}

.Skin .QuestionOuter.Matrix {
    max-width: 930px;
}

@media (min-width: 770px){
.Skin .SkinInner {
    width: 990px;
    max-width: 97%;
}
}

 

@FaviousM this is Tahoma font.

I checked the element and replaced the text with answer code to see the difference. Its the exact match.

 

@FaviousM this is Tahoma font.

I checked the element and replaced the text with answer code to see the difference. Its the exact match.

 

 

Thank you. I was getting a different looking font at one stage but got confused.

 

Your original suggestion worked, I’ll mark that as the answer. Sorry for the confusion

@FaviousM no worries. This happens with all of us. :-)

Leave a Reply


Terms & Conditions