Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: How do I style an specific question?

How do I style an specific question? 4 years 1 month ago #87704

  • atavei
  • atavei's Avatar
  • Offline
  • Junior Lime
  • Posts: 25
  • Karma: 0
Hello everyone. I need to style an specific question, for example, question ID 163. It is a yes/no question, and I want the answer to this particular question to be centered (including the radio buttons).

I have been able to do it for all yes/no questions in the survey, but that is no what I want. I would like to target an specific question.

(If this q. belongs in another forum, please let me know.)

Any help?
The administrator has disabled public write access.

How do I style an specific question? 4 years 1 month ago #87705

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9555
  • Thank you received: 1374
  • Karma: 390
Hello:
#question(questionnumber) in css.

All question block are identified by questionQID where QID is the number.

For example:
#question42{text-align:center}
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time (Need support ?).
A bug not reported is a bug not corrected. | 2.61lts version improved | Need plugins for LimeSurvey ?
The administrator has disabled public write access.

How do I style an specific question? 4 years 1 month ago #87715

  • atavei
  • atavei's Avatar
  • Offline
  • Junior Lime
  • Posts: 25
  • Karma: 0
Hello again...

Does this work in the ls2 default template?

This is the CSS code I'm using:
#question163 .choice-5-pt-radio .answer ul, .yes-no .answer ul {
    margin-left: 0;
    margin-top: 0.5em;
    padding-left: 0;
    text-align: center;
}

As you can see, what I'm trying to do is to target the yes-no answer ul of question 163, but it does not work. All yes-no question are centered. Additionally, if I remove ".choice-5-pt-radio .answer ul" the yes-no radio buttons are not centered at all. For a reason I cannot figure out the ".choice-5-pt-radio .answer ul" class needs to be there. In any case, I do not seem to be able to target the specific question.

Again, any suggestion is much welcomed.
The administrator has disabled public write access.

How do I style an specific question? 4 years 1 month ago #87723

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9555
  • Thank you received: 1374
  • Karma: 390
You need to know css a litlle .
developer.mozilla.org/en-US/docs/CSS

Do only:
#question163 {
margin-left: 0;
margin-top: 0.5em;
padding-left: 0;
text-align: center;
}

You can do
#question163.yes-no {
margin-left: 0;
margin-top: 0.5em;
padding-left: 0;
text-align: center;
}
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time (Need support ?).
A bug not reported is a bug not corrected. | 2.61lts version improved | Need plugins for LimeSurvey ?
The administrator has disabled public write access.

How do I style an specific question?-SOLVED 4 years 1 month ago #87733

  • atavei
  • atavei's Avatar
  • Offline
  • Junior Lime
  • Posts: 25
  • Karma: 0
Thanks Denis, but the issue was not in the question id selector. You were always right about the structure of the id tag selector (#questionQQ). The problem was in the expression used to tag the answer part of the question.

Solution:

1. I used Firefox to inspect the CSS of the generated page (Tools, Web Developer, Inspect). (Firebug (a Firefox plugin), by the way, gave me the wrong tag which was the one used in the previous post. That was the real core of the problem.)

2. The new tag provided by Firefox was: ul.answers-list.radio-list

3. My new code was:
#question163 ul.answers-list.radio-list {
 
text-align: center;
 
}
It worked perfectly. I was able to target #question163 only (as an ID Tag should do).

Thank you, especially for helping me think through this process.
The administrator has disabled public write access.
Time to create page: 0.223 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form