Welcome, Guest
Username: Password: Remember me

TOPIC: specific css class for text-display

specific css class for text-display 1 year 9 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.

Re: specific css class for text-display 1 year 9 months ago #88512

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4139
  • Thank you received: 767
  • Karma: 348
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: specific css class for text-display 1 year 9 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: 1 year 9 months ago by cvandermeij.
The administrator has disabled public write access.

Re: specific css class for text-display 1 year 9 months ago #88514

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4139
  • Thank you received: 767
  • Karma: 348
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: specific css class for text-display 1 year 9 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.

Re: specific css class for text-display 1 year 9 months ago #88522

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6276
  • Thank you received: 801
  • Karma: 241
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.
The administrator has disabled public write access.

Re: specific css class for text-display 1 year 9 months ago #88525

Excellent, this works great. Many thanks!
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.301 seconds
Donation Image