Change the background color of question blocks | XM Community
Question

Change the background color of question blocks

  • 24 March 2021
  • 7 replies
  • 640 views
C

Hi,
Can anyone help me with the CCS code? I just wanted to change the background colour of question blocks. Please see my intended example below. The survey background is blank but the background colour for each question is coloured (and each question is displayed in a separated block). Thanks very much in advance!

image.png

7 replies

PraDeepKotian_Ugam
Rank
Userlevel 6
Badge +21

Use the below code in Look & Feel->Style->Custom CSS.
#Questions{
background: lightskyblue;
}

C

https://www.qualtrics.com/community/discussion/comment/36058#Comment_36058Thanks for your responses. Your code did change the background colour of the questions. However, I hope to see each question shown in a separated block (as indicated in the above picture).

PraDeepKotian_Ugam
Rank
Userlevel 6
Badge +21

https://www.qualtrics.com/community/discussion/comment/36069#Comment_36069Slight update and this will add a whitespace between two questions.
#Questions .QuestionOuter {

background: lightskyblue;

}

dekennedy7
Rank
Userlevel 4
Badge +10

Use the below code in Look & Feel->Style->Custom CSS.
#Questions{
background: lightskyblue;
}

What if we want to modify the background color of the response option instead?  Keep in mind there’s two colors.  One for when the page loads and one for when you mouse over the response option itself.

 

 

Deepak
Rank
Userlevel 7
Badge +36

@dekennedy7 

How do I color-code my response options? | XM Community (qualtrics.com)

This thread should help, if you would like to change on hover and checked below css should work.

.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer {

    background: #ffff;
}
.Skin label.MultipleAnswer.q-checked.q-focused,
.Skin label.SingleAnswer.q-checked.q-focused {
  background: #000;
}

.Skin label.MultipleAnswer.q-checked,
.Skin label.SingleAnswer.q-checked {
  background: #000;
}

 

dekennedy7
Rank
Userlevel 4
Badge +10

@dekennedy7

How do I color-code my response options? | XM Community (qualtrics.com)

This thread should help, if you would like to change on hover and checked below css should work.

.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer {

    background: #ffff;
}
.Skin label.MultipleAnswer.q-checked.q-focused,
.Skin label.SingleAnswer.q-checked.q-focused {
  background: #000;
}

.Skin label.MultipleAnswer.q-checked,
.Skin label.SingleAnswer.q-checked {
  background: #000;
}

 

Thanks @Deepak!  Do I put this CSS into each individual question or the theme?  Or can I do either depending on whether I want to change the colors for a single question versus all questions?  Also, does it work on all question types?

Deepak
Rank
Userlevel 7
Badge +36

@dekennedy7 

It works on Multiple/Single answer choice question type.

You can put it in Custom CSS within look and feel. 

If you want to do question specific you would need to include question ids in the same

Leave a Reply


Terms & Conditions