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

TOPIC: specific css class for text-display

specific css class for text-display 3 years 8 months ago #88511

Hi, I was wondering if there is a specific css class for text-display items on survey pages? I know there are various classes for question types (docs.limesurvey.org/tiki-index.php?page=The+template+editor) but I could not find any of them for text-display. It would be great to style my question text in a different way than text-display items. I prefer not to place every text in different paragraph classes for question texts and text-display items.

Thanks in advance.
The administrator has disabled public write access.

specific css class for text-display 3 years 8 months ago #88512

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
What do you mean by "text-display items"? Can you provide screenshots?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

specific css class for text-display 3 years 8 months ago #88513

Hi, when I make a question (dropdown, or a radio list) in a question group, it always uses the div class 'survey-question-text' like below:
<div class="survey-question-text">
question text here
</div>

It uses this div for every question type. This also happens when I create a 'text-display' question, which is in fact not a question, but just a text which serves as an instruction for the respondent.

So whether I create an instructional text in a question group, or when I insert a radio list question in a question group, both items are encapsulated by the 'survey-question-text' div. I would like it to be like this:
<div class="survey-question-text">
This is a question
</div>
 
<div class="text-display">
This is an instruction
</div>

With this css for example so that the instructional text differs from the question text:
.survey-question-text {
font-weight: bold;
font-size: 15px;
}
 
.text-display {
font-weight: normal;
font-size: 13px;
}

So would there be a div class available for text-display question types? Or is there a way that inserts a div class whenever I write an instructional text in in the text-display question type?

I hope this is clear. Thanks again.
Last Edit: 3 years 8 months ago by cvandermeij.
The administrator has disabled public write access.

specific css class for text-display 3 years 8 months ago #88514

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
The "survey-question-text" class is defined in your template question.pstpl file and cannot be different for different question types. You can, however, create a specific rule for the text-display question something like:
.boilerplate .survey-question-text {
font-weight: bold;
font-size: 15px;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

specific css class for text-display 3 years 8 months ago #88515

Hi, thanks for your reply. Your proposal, if I understand you well, still does not allow for differentation between a question text and a text-display. I have already put such a code in my template.css, however this style applies to the question text and the instructional text which is placed in the text-display type. The 'survey-question-text' div class applies for any question type, even if it is a text-display type.

So the only way I see to distinguish css classes would be to insert a separate css class into the source code of a question text or text-display item, and then apply a different font-size to that specific css class so that it differs from the 'survey-question-text' class.
The administrator has disabled public write access.

specific css class for text-display 3 years 8 months ago #88522

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9293
  • Thank you received: 1327
  • Karma: 384
Try:
.survey-question-text {
background:red;
}
.boilerplate .survey-question-text {
background:green;
}
So the only way I see to distinguish css classes would be to inser ....
No, here the questio text for all question have red background , except for "Text question type" where it's gree.

Test it please.
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

specific css class for text-display 3 years 8 months ago #88525

Excellent, this works great. Many thanks!
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.429 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form