specific css class for text-display

More
4 years 7 months ago #88511 by cvandermeij
cvandermeij created the topic: specific css class for text-display
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.

Please Log in to join the conversation.

More
4 years 7 months ago #88512 by tpartner
tpartner replied the topic: specific css class for text-display
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.

Please Log in to join the conversation.

More
4 years 7 months ago - 4 years 7 months ago #88513 by cvandermeij
cvandermeij replied the topic: specific css class for text-display
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 7 months ago by cvandermeij.

Please Log in to join the conversation.

More
4 years 7 months ago #88514 by tpartner
tpartner replied the topic: specific css class for text-display
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.

Please Log in to join the conversation.

More
4 years 7 months ago #88515 by cvandermeij
cvandermeij replied the topic: specific css class for text-display
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.

Please Log in to join the conversation.

More
4 years 7 months ago #88522 by DenisChenu
DenisChenu replied the topic: specific css class for text-display
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.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 7 months ago #88525 by cvandermeij
cvandermeij replied the topic: specific css class for text-display
Excellent, this works great. Many thanks!

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now