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 4 years 2 weeks 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 4 years 2 weeks ago #88512

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6566
  • Thank you received: 1477
  • Karma: 578
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 4 years 2 weeks 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: 4 years 2 weeks ago by cvandermeij.
The administrator has disabled public write access.

specific css class for text-display 4 years 2 weeks ago #88514

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6566
  • Thank you received: 1477
  • Karma: 578
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 4 years 2 weeks 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 4 years 2 weeks ago #88522

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9552
  • Thank you received: 1370
  • Karma: 389
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 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.

specific css class for text-display 4 years 2 weeks ago #88525

Excellent, this works great. Many thanks!
The administrator has disabled public write access.
Time to create page: 0.445 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form