Custom CSS Code Simple Layout | XM Community
Skip to main content

Hi,

We have an NPS Question and we usually format the numbers to have colors to give some visual clue.

 

I typically use the following Custom CSS in other layouts but it does not function in the Simple Layout.  Any suggestions on how to apply or adjust this code to work in Simple Layout?

 

Thanks,

 

****Custom CSS CODE NPS ***

label#QID24-label.SingleAnswer{
color :red !Important;
}
label#QID24-0-label.SingleAnswer{
color :red !Important;
}
label#QID24-1-label.SingleAnswer{
color :red !Important;
}
label#QID24-2-label.SingleAnswer{
color :red !Important;
}
label#QID24-3-label.SingleAnswer{
color :red !Important;
}
label#QID24-4-label.SingleAnswer{
color :red !Important;
}
label#QID24-5-label.SingleAnswer{
color :red !Important;
}
label#QID24-6-label.SingleAnswer{
color :red !Important;
}
label#QID24-7-label.SingleAnswer{
color : #f9d71c !Important;
}
label#QID24-8-label.SingleAnswer{
color : #f9d71c !Important;
}
label#QID24-9-label.SingleAnswer{
color :green !Important;
}
label#QID24-10-label.SingleAnswer{
color :green !Important;
}

Sample layout returns different ID and class. You should inspect the ID and replace all IDs in existing code.

Sample layout returns different ID and class. You should inspect the ID and replace all IDs in existing code.

The IDs that I am using are the correct ones from the survey, I think the syntaxis might have changed in the simple layout as I’ve seen with other use cases. 

So basically I need to know the exact sintax to call the label of a single answer in the survey and change it’s color. The ID will always be #QID24 and it’s subsequent options in the survey #QID24-0,-1,-2,-3, etc

Use this CSS:

.nps .choices .choice:not(.selected) .choice-label
 { background-color:red; }
.nps .choices .choice:not(.selected) .choice-label[id$='-7'],
.nps .choices .choice:not(.selected) .choice-label[id$='-8']
 { background-color:#f9d71c; }
.nps .choices .choice:not(.selected) .choice-label[id$='-9'],
.nps .choices .choice:not(.selected) .choice-label[id$='-10']
 { background-color:green; }

If used in Custom CSS it will apply to any NPS question in the survey. It is best to avoid using hardcoded ids (e.g., #QID24) and !important in CSS rules.

Use this CSS:

.nps .choices .choice:not(.selected) .choice-label
 { background-color:red; }
.nps .choices .choice:not(.selected) .choice-label[id$='-7'],
.nps .choices .choice:not(.selected) .choice-label[id$='-8']
 { background-color:#f9d71c; }
.nps .choices .choice:not(.selected) .choice-label[id$='-9'],
.nps .choices .choice:not(.selected) .choice-label[id$='-10']
 { background-color:green; }

If used in Custom CSS it will apply to any NPS question in the survey. It is best to avoid using hardcoded ids (e.g., #QID24) and !important in CSS rules.

Hi @TomG, I used the above code and it worked straigth away for my nps question. thanks

Hi, Thanks for this CSS code it works perfectly for me, but I need the numbers in White (now are in blank) do you how I can do it?

 

Leave a Reply


Terms & Conditions