Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

How can I change the background color for an individual question block?

  • blocka
  • blocka's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
More
6 years 9 months ago #155248 by blocka
I'd like to be able to change the background colour for some questions. I thought I could do this with the custom CSS class at the question level, but it's not working.

Can anyone shed some light?

I've attached a screen shot of what I want to do.
Attachments:
The topic has been locked.
More
6 years 9 months ago #155985 by maxersloan
I am also interested in a solution for this
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 9 months ago - 6 years 9 months ago #155987 by tpartner
Add a question class like "header-green" or "header-red" and then add something like this to the end of template.css:

Code:
.header-green .question-title-container, 
.header-green .questionvalidcontainer {
    background-color: #00CC00;
}
 
.header-red .question-title-container, 
.header-red .questionvalidcontainer {
    background-color: #FF0000;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 9 months ago by tpartner.
The topic has been locked.
More
6 years 8 months ago #156074 by maxersloan
Thanks Tony. Can you tell me (or post link to an article) how to create a question class? I can't find anything in the existing documentation (forum or manual). Thanks!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 8 months ago #156075 by tpartner
I gave a screenshot of it above.

It's under "Advanced settings" on the right side when editing the question.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
6 years 8 months ago #156077 by maxersloan
Sorry Tony. I thought those were two separate steps. I see what you're saying now.

Is the CSS Class feature only available in 2.5? I'm still on 2.00 and 2.06lts. Is there any way to do this with an older version like those?
The topic has been locked.
More
6 years 8 months ago - 6 years 8 months ago #156078 by Ben_V
Code you can use after small adaption (selectors/classes) if needed:
(paste this in the source of the question or help area)
Code:
<script type="text/javascript">
$(document).ready(function() {
  $("<style type='text/css'>"
  + "#question{QID} .questiontext { background-color:red }"
  +"</style>").appendTo( "head" );
});
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 6 years 8 months ago by Ben_V.
The topic has been locked.
More
6 years 8 months ago #156080 by maxersloan
Thanks Ben.

Am I supposed to replace the {QID} selector? I tried several variations (below) with no luck...

215685X2030X25368 (SurveyIDXGroupIDXQuestionID)
25368 (QuestionID)
LIP_G (Question Code)
The topic has been locked.
More
6 years 8 months ago - 6 years 8 months ago #156083 by Ben_V
You only have to replace the ".questiontext" part ... if necessary and not working as this (should works with default template)

You don't have to adapt "{QID}" because this is a dynamic keyword/placeholder (parsed server side) ....among many other ones you may found here:
manual.limesurvey.org/Expression_Manager...each_Keyword_Used.3F

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 6 years 8 months ago by Ben_V.
The topic has been locked.
More
6 years 8 months ago #156085 by maxersloan
Thanks for your help, Ben. But I still can't get it to work, even with the default template. I attached the one-question test survey I'm using. Am I missing something?

Thanks again.
The topic has been locked.
More
6 years 8 months ago - 6 years 8 months ago #156087 by Ben_V
yes you are missing something very important:

In general parameters/security tab (first toolbar) turn XSS security off.

manual.limesurvey.org/Global_settings#Security

Filter HTML for XSS: By default your survey manager will not be authorized to use dangerous HTML tags in their survey/group/question/labels texts (for instance JavaScript code). This is intended to prevent a survey operator to add malicious script in order to have a true admin raise his permissions on the system. If you want to use any script objects like Javascript scripts of Flash applets in your surveys you will need to switch this off (Specific script for video hoster can be used). The XSS filtering is always disabled for the superadministrator. In order to see the effects of XSS filtering, it is advised to use a regular user account.


Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 6 years 8 months ago by Ben_V.
The topic has been locked.
More
6 years 8 months ago #156089 by maxersloan
Hi Ben,

I assume you are referring to Global Settings >>> Security >>> Filter HTML for XSS

Correct?

I already had it set to "No" (which is the default, I believe). Just since I was curious, I turned it to "Yes" and the red box still did not show up...
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose