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

Custom CSS Code Simple Layout

  • December 13, 2023
  • 5 replies
  • 460 views

Forum|alt.badge.img+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;
}

Best answer by TomG

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.

View original

5 replies

ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+40
  • QPN Level 8 ●●●●●●●●
  • 589 replies
  • December 13, 2023

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


Forum|alt.badge.img+1
  • Author
  • 1 reply
  • December 13, 2023
ArunDubey wrote:

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
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5862 replies
  • Answer
  • December 13, 2023

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.


Forum|alt.badge.img
  • 1 reply
  • April 1, 2024
TomG wrote:

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


Forum|alt.badge.img
  • 1 reply
  • July 19, 2024

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