Custom CSS Code Simple Layout | XM Community
Solved

Custom CSS Code Simple Layout

  • 13 December 2023
  • 4 replies
  • 223 views

Badge +1

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;
}

icon

Best answer by TomG 13 December 2023, 18:12

View original

4 replies

Userlevel 7
Badge +33

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

Badge +1

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

Userlevel 7
Badge +27

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.

Badge

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

Leave a Reply