Changing entire survey font colour using custom CSS | XM Community
Skip to main content
Solved

Changing entire survey font colour using custom CSS

  • November 21, 2023
  • 7 replies
  • 1041 views
K
Forum|alt.badge.img+1

Hi there,

 

I am trying to change the colour of the text for the entire survey but the custom CSS code I have found on this site isn’t working.

 

This is what I have tried:

.Skin .QuestionText {
color:#FFFFFF;
}

.Skin .QuestionBody {
color:#FFFFFF;
}

 

Could someone please advise if there is something else I can try?

 

Thanks

Best answer by omkarkewat

Hi @Shobhit 

The code provided by @Katie_W should work but still you are facing issues, try identifying the elements of that part of the survey which is still unchanged and then add them in the same code provided. Please see below code for your reference.
 

.Skin .QuestionText
 {
 color: black;!important
  }
.Skin .QuestionBody 
{
 color: black;!important
}

.Skin .QuestionOuter 
{
color: black !important;
}

.Skin .Matrix table td,
.Skin .Matrix table th {
    color: black !important;
}
.Skin .EndOfSurvey,
.Skin .Q_lang {
    color: black !important;
}

Here, Matrix refers to the matrix question and similarly the End of Survey message that I have in my survey. 
Hope it helps!

7 replies

S
Level 4 ●●●●
Forum|alt.badge.img+28
  • Shobhit
  • Level 4 ●●●●
  • 63 replies
  • November 21, 2023

@Katie_W Please use the below custom code. You just need to add '!important’. The !important rule in CSS is used to add more importance to a property/value than normal.

 

.Skin .QuestionText
 {
 color: red;!important
  }
.Skin .QuestionBody 
{
 color: red;!important
}

Best Regards, Shobhit
K
Forum|alt.badge.img+1
  • Katie_W
  • Author
  • 3 replies
  • November 21, 2023

Thanks for your reply. This still hasn’t worked - is there anything else I can try?

 

Thank you

S
Level 4 ●●●●
Forum|alt.badge.img+28
  • Shobhit
  • Level 4 ●●●●
  • 63 replies
  • November 21, 2023

@Katie_W I am hoping that you are using the code under the Look and Feel as per below SS.

 

 

Best Regards, Shobhit
K
Forum|alt.badge.img+1
  • Katie_W
  • Author
  • 3 replies
  • November 21, 2023

@Katie_W I am hoping that you are using the code under the Look and Feel as per below SS.

 

 

Yes, I have put it in the ‘Custom CSS’ box under the ‘Look and Feel’ tab

K
Forum|alt.badge.img+1
  • Katie_W
  • Author
  • 3 replies
  • December 11, 2023

I wondered if anyone else has any suggestions for what to try here? Thank you

O
QPN Level 5 ●●●●●
Forum|alt.badge.img+21
  • omkarkewat
  • QPN Level 5 ●●●●●
  • 306 replies
  • Answer
  • December 13, 2023

Hi @Shobhit 

The code provided by @Katie_W should work but still you are facing issues, try identifying the elements of that part of the survey which is still unchanged and then add them in the same code provided. Please see below code for your reference.
 

.Skin .QuestionText
 {
 color: black;!important
  }
.Skin .QuestionBody 
{
 color: black;!important
}

.Skin .QuestionOuter 
{
color: black !important;
}

.Skin .Matrix table td,
.Skin .Matrix table th {
    color: black !important;
}
.Skin .EndOfSurvey,
.Skin .Q_lang {
    color: black !important;
}

Here, Matrix refers to the matrix question and similarly the End of Survey message that I have in my survey. 
Hope it helps!

Umang Upadhyay
QPN Level 4 ●●●●
Forum|alt.badge.img+25
  • Umang Upadhyay
  • QPN Level 4 ●●●●
  • 122 replies
  • December 13, 2023

This code worked for me

 


Terms & ConditionsAccessibility statement