Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: specific css class for text-display

specific css class for text-display 1 Jahr 5 Monate her #88511

  • cvandermeij
  • cvandermeijs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 13
  • Karma: 0
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: specific css class for text-display 1 Jahr 5 Monate her #88512

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: specific css class for text-display 1 Jahr 5 Monate her #88513

  • cvandermeij
  • cvandermeijs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 13
  • Karma: 0
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.
Letzte Änderung: 1 Jahr 5 Monate her von cvandermeij.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: specific css class for text-display 1 Jahr 5 Monate her #88514

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: specific css class for text-display 1 Jahr 5 Monate her #88515

  • cvandermeij
  • cvandermeijs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 13
  • Karma: 0
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: specific css class for text-display 1 Jahr 5 Monate her #88522

  • DenisChenu
  • DenisChenus Avatar
  • ONLINE
  • Moderator Lime
  • Beiträge: 5850
  • Dank erhalten: 716
  • Karma: 222
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: specific css class for text-display 1 Jahr 5 Monate her #88525

  • cvandermeij
  • cvandermeijs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 13
  • Karma: 0
Excellent, this works great. Many thanks!
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.340 Sekunden
Donation Image