Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Add CSS class to question

  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
9 years 7 months ago #121486 by pvdemael
Add CSS class to question was created by pvdemael
Hi,

I would like to change the CSS of some questions uniformely without the hassle of copy-pasting a lot.
Is it possible to add a CSS class to eg a question in Limesurvey?
The other options is to adjust CSS in template.css but maybe someone has.
The topic has been locked.
  • gabrieljenik
  • gabrieljenik's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
9 years 7 months ago #121492 by gabrieljenik
Replied by gabrieljenik on topic Add CSS class to question
Have you seen www.limesurvey.org/manual/The_template_e...g_questions_with_CSS ?
You mean to modify current CSS?
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

[img
The topic has been locked.
  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
9 years 7 months ago #121494 by pvdemael
Replied by pvdemael on topic Add CSS class to question
Well, I have several multiple numerical inputs with sliders. A few of them are used as a VAS scale and only those I would like to change some CSS. The others should remain untouched.
The only thing I can think of right now is add some CSS for every question in template.js.
A general solution like eg an extra input field in the question creation form for a custom css class should make things more easy.
The topic has been locked.
  • gabrieljenik
  • gabrieljenik's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
9 years 7 months ago #121495 by gabrieljenik
Replied by gabrieljenik on topic Add CSS class to question
All questions have general questions CSS classes, but also have some specific, question id class.
So if you customize the class for a specific questionid, ony that question style will be modified.
Also, you can use id's.
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

[img
The following user(s) said Thank You: pvdemael
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 7 months ago - 9 years 7 months ago #121522 by tpartner
Replied by tpartner on topic Add CSS class to question
2 options...

1) As Gabriel suggests, use the question IDs as selectors in template.css:
Code:
#question12345 .ui-slider,
#question12346 .ui-slider,
#question12347 .ui-slider {
  /* Some style rules */
}


2) Use JavaScript in the source of those questions to assign a specific class:
Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){ 
    $('#question{QID}').addClass('vas-slider-question');
  });
</script>
Then in template.css:
Code:
.vas-slider-question .ui-slider {
  /* Some style rules */
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 7 months ago by tpartner.
The following user(s) said Thank You: pvdemael
The topic has been locked.
  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
9 years 7 months ago #121523 by pvdemael
Replied by pvdemael on topic Add CSS class to question
Hi tpartner,

I already did some work with the first option, but the second one option is more elegant.
I prefer a template.css file to be generic.
Thx
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source