How to apply custom CSS code to selected questions | XM Community
Solved

How to apply custom CSS code to selected questions

  • 22 February 2021
  • 1 reply
  • 1473 views
K

Hello. I am using a custom CSS code that allows me to right-justify question containers. However, I only want this custom CSS code to apply to certain questions (or blocks), and not the entire survey. How can I make it so that a custom CSS code only applies to certain questions?
Here is the code I am using, which then applies to the whole survey:
.Skin .SkinInner {
  margin: 0 0 0 auto !important;
}
I tried to use this code to apply this only to one question, but it doesn't seem to work:
.Skin #QID123, .SkinInner #QID123 {
  margin: 0 0 0 auto !important;
}  
I also need the code to apply to multiple questions, not just one, so if someone could help with a code that allows me to apply this to multiple selected questions, it is most appreciated!

icon

Best answer by Tom_1842 31 October 2022, 19:09

View original

1 reply

Tom_1842
Rank
Userlevel 7
Badge +27

Hi there, if you still need, CSS can be applied to specific questions from the Look & Feel's Custom CSS by using the QID, like in the below:
#QID1 .QuestionBody {
background: red;
}
You could also add the styling with jQuery, though this can sometimes result in a "flash" since the styling isnt applied until the page is loaded. You could add something like the below to the question's JavaScript.
jQuery("#"+this.questionId+" .QuestionBody").css("background","red");
Another method is to apply CSS to just a single page. This can be done by adding CSS in a
Click to write the question text
This is the method that I would suggest for your use case since I believe SkinInner is more about the whole page than any specific question. So for each page that you want the questions to be right justified, try including the below in the Question Text on any question on that page:

Click to write the question text

Leave a Reply


Terms & Conditions