Welcome, Guest
Username: Password: Remember me

TOPIC: How do I style an specific question?

How do I style an specific question? 1 year 8 months ago #87704

  • atavei
  • atavei's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 19
  • 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.

Re: How do I style an specific question? 1 year 8 months ago #87705

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6222
  • Thank you received: 791
  • Karma: 238
Hello:
#question(questionnumber) in css.

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

For example:
#question42{text-align:center}
The administrator has disabled public write access.

Re: How do I style an specific question? 1 year 8 months ago #87715

  • atavei
  • atavei's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 19
  • 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.

Re: How do I style an specific question? 1 year 8 months ago #87723

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6222
  • Thank you received: 791
  • Karma: 238
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;
}
The administrator has disabled public write access.

Re: How do I style an specific question?-SOLVED 1 year 8 months ago #87733

  • atavei
  • atavei's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 19
  • 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.
Moderators: ITEd
Time to create page: 0.225 seconds
Donation Image