How do I style an specific question?

More
4 years 8 months ago #87704 by atavei
atavei created the topic: How do I style an specific question?
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 8 months ago #87705 by DenisChenu
DenisChenu replied the topic: How do I style an specific question?
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).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 8 months ago #87715 by atavei
atavei replied the topic: How do I style an specific question?
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 8 months ago #87723 by DenisChenu
DenisChenu replied the topic: How do I style an specific question?
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).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 8 months ago #87733 by atavei
atavei replied the topic: How do I style an specific question?-SOLVED
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.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now