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

Custom CSS Code Simple Layout

  • 13 December 2023
  • 5 replies
  • 336 views

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

5 replies

ArunDubey
Rank
Userlevel 7
Badge +35

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

~ Arun Kumar Dubey
J
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

TomG
Rank
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.

E
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

G
Badge

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