Check out the LimeSurvey source code on GitHub!

How do I style an specific question?

More
4 years 2 months ago #87704 by atavei
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?

Please Log in to join the conversation.

More
4 years 2 months ago #87705 by DenisChenu
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.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).

Please Log in to join the conversation.

More
4 years 2 months ago #87715 by atavei
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.

Please Log in to join the conversation.

More
4 years 2 months ago #87723 by DenisChenu
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.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).

Please Log in to join the conversation.

More
4 years 2 months ago #87733 by atavei
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.

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form