NPS colour coding | XM Community
Question

NPS colour coding

  • 4 March 2024
  • 5 replies
  • 56 views

Badge +1

Hi I need help with adding NPS colour code to qualtrics survey invite - I can only use default colours is there a way around this ?


5 replies

Userlevel 6
Badge +20

Hello @Sarah_Hastings

If you wish to apply color codes to your NPS question in the survey, you can customize it using the following code. Access your survey question in HTML mode and insert the code provided below. Make sure to adjust the QID number as required:

<style>
<html>

label#QID1-0-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-1-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-2-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-3-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-4-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-5-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-6-label.SingleAnswer{
color :white !Important;
background-color :red !Important;
}
label#QID1-7-label.SingleAnswer{
color : white !Important;
background-color :#f9d71c !Important;
}
label#QID1-8-label.SingleAnswer{
color : white!Important;
background-color :#f9d71c !Important;
}
label#QID1-9-label.SingleAnswer{
color :white !Important;
background-color :green !Important;
}
label#QID1-10-label.SingleAnswer{
color :white !Important;
background-color :green !Important;
}
label#QID1-0-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-1-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-2-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-3-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-4-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-5-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-6-label.SingleAnswer.q-checked {
background-color :#ff000073 !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-7-label.SingleAnswer.q-checked {
background-color :#f9d71c7d  !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-8-label.SingleAnswer.q-checked {
background-color : #f9d71c7d !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-9-label.SingleAnswer.q-checked {
background-color :#0080008f !Important;
color:black !Important;
font-weight:bold;
}
label#QID1-10-label.SingleAnswer.q-checked {
background-color :#0080008f !Important;
color:black !Important;
font-weight:bold;
}

</style>
</html>

 

Let me know if this helps.

Badge +1

Hi Sachin Nandikol thanks for the reply

 

This is what I have currently but looking to improve. If I could amend the blue colouring and the writing colouring if you can help here. 

 

 

Userlevel 6
Badge +20

Hello @Sarah_Hastings

By implementing the provided code, your NPS question will appear as depicted in the screenshot below:

 

Badge +1

 

Userlevel 6
Badge +20

Hello @Sarah_Hastings,

please share the code you’re using.

Leave a Reply