Styling questions with CSS

Styling questions with CSS

Styling questions with CSS

Styling of questions in CSS has become much easier. Each question type has now a unique class. The mandatory questions have an additional mandatory class. For example, for a non-mandatory question:
<div id="question5" class="gender">
...
</div>
and if the question is mandatory:
<div id="question5" class="gender mandatory">
...
</div>

and if the question is mandatory, but the user didn't answer it or if there is validation on a question:

<div id="question5" class="gender mandatory input-error"> ... </div>
and if the question has validation applied, but the user hasn't answered correctly:
<div id="question6" class="text-short input-error"> ... </div>

Global classes for question part

These classes are used for each question type. Some question types use only one or two classes, while others may use much more.
Global classes:









Some examples of question part with classes

Text-short question type:
<p class="question answer-item text-item "> <label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text empty"> </p>

Multiple short text

<ul class="subquestions-list questions-list text-list">
  <li class="question-item answer-item text-item" id="javatbdSGQA">
    <label for="answerSGQA">Some example subquestion</label>
     <span><input type="text" value="" id="answerSGQA" name="SGQA" size="20" class="text empty"></span>
  </li>
</ul>

Array question type

<table class="question subquestion-list questions-list ">
	<caption class="hide read">Some explanation for accessibility.</caption>
	<colgroup class="col-responses">
		<col width="50%" class="col-answers">
		<col width="25%" class="odd">
		<col width="13.3%" class="col-no-answer even">
	</colgroup>
	<thead>
		<tr class="array1 dontread">
			<td>&nbsp;</td>
			<th>1</th>
			<th>No answer</th>
		</tr>
	</thead>
	<tbody>
		<tr class="array2 answers-list radio-list" id="javatbdSGQ">
			<th width="20%" class="answertext">Some example subquestion
			</th>
			<td class="answer_cell_001 answer-item radio-item">
				<label for="answerSGQA" class="hide read">1</label>
				<input type="radio" value="1" id="answerSGQA" name="SGQA" class="radio">
			</td>
			<td class="answer-item radio-item noanswer-item">
				<label for="answerSGQA" class="hide read">No answer</label>
				<input type="radio" value="" id="answerSGQA" name="SGQA" class="radio">
			</td>
		</tr>
	</tbody>
</table>

The full list of question classes

Question TypeQuestion ClassQuestion ID
5 point choice.choice-5-pt-radio5
Array (10 point choice).array-10-ptB
Array (5 point choice).array-5-ptA
Array (Flexible Labels) dual scale.array-flexible-duel-scale1
Array (Increase, Same, Decrease).array-increase-same-decreaseE
Array (Multi Flexible) (Numbers).array-multi-flexi:
Array (Multi Flexible) (Text).array-multi-flexi-text;
Array (Yes/No/Uncertain).array-yes-uncertain-noC
Array (flexible labels).array-flexible-rowF
Array (flexible labels) by column.array-flexible-columnH
Boilerplate question.boilerplateX
Date.dateD
Equation.equation*
Gender.genderG
Huge free text.text-hugeU
Language switch.languageI
List (dropdown).list-dropdown!
List (radio).list-radioL
List with comment.list-with-commentO
Long free text.text-longT
Multiple numerical input.numeric-multiK
Multiple options.multiple-optM
Multiple options with comments.multiple-opt-commentsP
Multiple short text.multiple-short-txtQ
Numerical input.numericN
Ranking.rankingR
Short free text.text-shortS
Yes/No.yes-noY

The full list of validation classes

Note:  Prior to 1.92, only .mandatory and .input-error classes were available.

These apply to the help and/or validation tip messages so that each type can be individually styled.

The .hide-tip option and .input-error options interact by default so that you can have validation tips hidden. However, they do appear when there are validation errors and disappear again when those errors are rectified.

All of these are designed to eliminate the need for pop-up alert messages. Instead, tips can appear/disappear as needed and are color-coded to indicate whether the answers pass the validation criteria.

Furthermore, when you first visit a page that has unmet validation criteria, you can color-code the tips in a pleasing color to show which validation criteria have not been met yet; then re-display the page using a harsher color if the person submits the page with lingering validation errors.

PurposeCSS ClassDescription
Mandatory.mandatorythe question is mandatory
User input error.input-errorthe question had at least one validation error
Hide Tip.hide-tipadded if you use the hide_tip option
defrault type.em_defaultfor default tip set ( numeric value etc …)
Num answers.em_num_answersfor for min_answers and max_answers
Value range.em_value_rangefor min/max_num_value_n and multiflexible_min/max
Sum range.em_sum_rangefor min/max/equals_num_value
Regex validation.em_regex_validationfor regular-expression validation of the question
Question-level validation function.em_q_fn_validationfor the em_validation_q option
Subquestion-level validation function.em_sq_fn_validationfor the em_validation_sq option
Other comment mandatory.em_other_comment_mandatoryfor other_comment_mandatory option - shows when "other" is selected but associated comment is missing.

Importing styles into your custom template

The custom question styles are near the bottom of each template's CSS file and start with:
/* --------------------------- START: Question styles  ------------------------------ */
If you're styling your own custom template, you should be able to copy everything after the above one from templates/default/template.css (for table-based layouts) or /templates/limespired/template.css (for CSS-based layouts) into your own style sheet without any impact on your other styles.

Internet explorer conditional style sheets

Because of the marked discrepancies in rendering between IE6 & IE7 and the other browsers, there are special IE conditional style sheets included for each template.
<!--[if IE]> <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" /> <![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" /> <![endif]-->
You should include the above code within your startpage.pstpl and copies of both the IE style sheets from either /templates/default/ or /templates/limespired for Tables base layout and CSS based layout respectively.

Note: If you copy the styles into your own style sheet you will almost certainly need to tweak them.

Alternative solution for internet explorer

You can put a conditional class for body in startpage.pstpl and use this class in your template.css. This method is used in the citronade template (Obsolete since 2.06). Adding a js / no-js class to have javascript / no javascript system.
<!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]--> <!--[if IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie7 ielt8 ielt9 no-js"> <![endif]--> <!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9 no-js"> <![endif]--> <!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]--> <!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]--> <script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script>

And in template.css use:

.ie6{/*specific for internet explorer 6*/}
.ielt8{/*specific for internet explorer 6 and 7*/}
.ie{/*specific for all internet explorer */}

Right-to-left (RTL) languages and justify

The text editor within LimeSurvey is able to format RTL text. However, the editor itself shows the RTL language in a left to right format when justified. This is just an editor display issue. The RTL and justified question or text will display correctly from right to left, even when justified, in your survey or on preview.

Keywords

Important.png Deprecated : This features is deprecated in version 3.0.
Keywords within a template file get replaced by the current survey information. They are surrounded by curly brackets, for example: {SURVEYNAME}.

The following strings will be replaced by LimeSurvey when parsing the template file and presenting it to survey users. These field strings will work on almost every template except for the 'Completed Page'. (Most of these strings can be found in the common.php file. If it's not there, look in the index.php file.)
KeywordTemplate filesDescription
{SURVEYNAME}All FilesThe survey title
{SURVEYDESCRIPTION}All FilesThe survey description
{WELCOME}All files (mainly for welcome.pstpl)The survey 'welcome' text
{PERCENTCOMPLETE}survey.pstplA small graph showing the percentage of the survey completed
{GROUPNAME}startgroup.pstpl, groupdescription.pstpl, endgroup.pstplDisplays the current group name
{GROUPDESCRIPTION}startgroup.pstpl, groupdescription.pstpl, endgroup.pstplDisplays the current group description
{NUMBEROFQUESTIONS}welcome.pstplDisplays the total number of questions in the survey (just the number)
{THEREAREXQUESTIONS}welcome.pstplDisplays the sentence "There are X questions in this survey" - from the relevant language file. The X is replaced with the number of questions. Note that this will also work appropriately for singular or plural. If there is only 1 question, it will print "There is 1 question in this survey".
{CHECKJAVASCRIPT}All files (mainly for welcome.pstpl)Warning message when end-user browser have javascript disabled
{QUESTION}Question.pstpl(Has been superseeded as of LS1.87) Displays the current question text (The format of {QUESTION} can customised by editing 'question_start.pstpl') Use the following: {QUESTION_TEXT}, {QUESTION_MANDATORY}, {QUESTION_HELP}, {QUESTION_MAN_MESSAGE}, {QUESTION_VALID_MESSAGE}, {QUESTION_INPUT_ERROR_CLASS}, and appropriate wrapping HTML instead of {QUESTION}
{ANSWER}question.pstpl, print_question.pstplpresents the answer form for the current question
{SGQ}question.pstpl, question textCan be used in the question text itself to reference the input field of the question dynamically by displaying the Survey-Group-Question id for the current question. (as of svn build 9755)
{QUESTIONHELP}question.pstpl, print_question.pstplDisplays help text (predefined tip for question type) for the current question
{QUESTION_CLASS}question.pstpl, print_question.pstplunique class for each question type. (To be included in the question's wrapping tag.)
{QUESTION_CODE}question.pstpl, print_question.pstplDisplays the current question code
{QUESTION_ESSENTIALS}question.pstplthe question ID and (if a question is conditional), 'style="display:none;"'. (To be included in the question's wrapping tag.)
{QUESTION_HELP}question.pstp, question_start.pstplDisplays the user defined help text for the current question
{QUESTION_TYPE_HELP}print_question.pstpDisplays the user defined help text for the current question
{QUESTION_INPUT_ERROR_CLASS}question.pstp, question_start.pstplProvides a class if there was user input error
{QUESTION_ID}print_question.pstpProvides a unique ID for each question to allow styling for specific questions
{QUESTION_TEXT}question.pstp, print_question.pstp, question_start.pstplDisplays the text for the current question
{QUESTION_MANDATORY}question.pstp, print_question.pstp, question_start.pstplDisplays the translated 'Mandatory' text for the current question
{QUESTION_MAN_CLASS}question.pstpl, print_question.pstplclass if a question is mandatory. (To be included in the question's wrapping tag.)
{QUESTION_MAN_MESSAGE}question.pstp, print_question.pstp, question_start.pstplDisplays the translated 'Mandatory' help message text for the current question
{QUESTION_NUMBER}print_question.pstplIncremental count of questions.
{QUESTION_VALID_MESSAGE}question.pstp, print_question.pstp, question_start.pstplDisplays the translated valid help message text for the current question
{QUESTION_SCENARIO}print_question.pstpPrints out the 'scenario' text for conditional questions.
{NAVIGATOR}navigator.pstplDisplays navigation buttons (next, prev, last)
{CLEARALL}All files (but intended for navigator.pstpl)Displays the "Exit and Clear Results" link
{COMPLETED}completed.pstplDisplays the 'completed' message for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
{URL}completed.pstplDisplays the survey 'url' and 'url text'
{PRIVACYMESSAGE}privacy.pstplThe privacy message is shown if you set your survey to be anonymous.  The text can be edited/translated in the language files. This can also be changed manually by editing the privacy.pstpl template you wish to use.
{TEMPLATEURL}All FilesThe URL to the current template location (useful for referencing image files in your template)
{SURVEYRESOURCESURL}All FilesThe URL to the current uploaded files for this survey location (useful for referencing image files in your question, group, ....)
{SUBMITCOMPLETE}endpage.pstplThe statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button
{SUBMITREVIEW}survey.pstplThe statement (from the language files) that tells the user they can review/change the answers they have made by clicking "<< prev"
{SAVEDID}All FilesDisplays 'Response ID' of user
{QUEXMLPDF}All FilesDisplays button to export the queXML PDF of questionnaire including answers entered up until the point that has been completed in the survey.
{TOKEN:FIRSTNAME}All Files***If survey answers are NOT ANONYMOUS - gets replaced with the users first name from the tokens table
{TOKEN:LASTNAME}All Files***If survey answers are NOT ANONYMOUS - gets replaced with the users last name from the tokens table***
{TOKEN:EMAIL}All Files***If survey answers are NOT ANONYMOUS - gets replaced with the users email from the tokens table***
{TOKEN:ATTRIBUTE_1}All Files***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_1 from the tokens table***
{TOKEN:ATTRIBUTE_2}All Files***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_2 from the tokens table***
{ANSWERSCLEARED}Preferably in navigator.pstplThe "Answers Cleared" statement from the language files
{RESTART}clearall.pstplURL to restart the survey
{REGISTERERROR}register.pstplShows any error messages in the register page (ie: "You must include an email address")
{REGISTERMESSAGE1}register.pstplThe statement "You must be registered to complete this survey" from the language files
{REGISTERMESSAGE2}register.pstplDetails about registering from the language files
{REGISTERFORM}register.pstplThe actual form for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
{SAVE}Works suitable on navigator.pstplDisplays the 'Save your responses so far' button to offer the user to save and come back later to continue the survey. If the Save option is deactivated in the survey properties the tag will not be shown and ignored.
{LANGUAGECHANGER}survey.pstplDisplays a switch in multilingual surveys to change the question.

Input/Buttons

Each "input" type in a survey has been given its own class name, so that you can add CSS to your "startpage.pstpl" file and have some control over the appearance of form buttons and inputs. These class names are as follows:
  • submit (Submit Buttons)
  • text (Text Inputs - for short free text, date, and numerical type)
  • answertext (Text of answers)
  • radio (Radio Buttons)
  • checkbox (Check Boxes)
  • select (Select / List Boxes)
  • textarea (Large text inputs - for long free text)
  • clearall (The "Exit and Clear Survey" link)
  • rank (The rank style question. Doesn't set the colour of the select box or the text boxes, but it does allow the changing of background colour, text colour, size etc., for the rest of the ranking question)
  • graph (The "percentage completed" graph table)
  • innergraph (The table inside the graph table - this contains the 0% and 100% text. Use this for changing the size of this text)
  • question (General settings for any question that is displayed within a table. Generally, you should use this to make sure that their font size and color is the same as you have used elsewhere as a default)
  • mandatory  (Mandatory questions)
  • input-error (User input error - for if a user has made a mistake with a mandatory question or question with validation)
  • array1 and array2 (These two styles are cycled when presenting the range of answers for an array type question. This allows you to set an alternating background color for these question types. Array1 is also used for the column headings in these question types)
  • errormandatory (Sets the color and style of the "This question is mandatory" error message)
  • warningjs (Sets the color and style of the warning message displayed if the participant's browser has javascript disabled)

There are also some elements that can be accessed using the ID of the element (#ID in CSS):
  • surveycontact (The contact message shown on the start page)
  • tokenmessage (used for messages inside the survey, e.g. the session expired error message)

Because you can edit all the HTML aspects, there's no reason to surround your templates with a
<div class='new_name'></div>
and then define a css for that new_name class.

Styling the progress bar

The progress bar appearance can be modified with CSS.
To change the background color of the bar, add something like the following to the end of your template.css file:
#progress-wrapper .ui-widget-header {
 background-color: #3300FF;
}

To change the border color of the bar, add something like the following to the end of your template.css file:

#progress-wrapper .ui-widget-content,
#progress-wrapper .ui-widget-header {
 border: 1px solid #FF0000;
}

Advanced features available to developers

LimeSurvey has integrated some user-made patches that permits some special changes. These very advanced features (generally) require changes to the underlying code base of LimeSurvey and should be done carefully in order not to introduce security holes.

Support For Your Own Javascript Functions

Some users may need to run Javascript on the survey pages, but calling checkconditions() in the BODY element made it impossible to do so. This call has been replaced with a small JavaScript function in the HEAD that sniffs for the existence of checkconditions() and template_onload() before calling them. In this way, a template author can create his or her own template_onload() function in the HEAD that replaces the default one.
  • Disable XSS filter - in Global settings -> Security, set "Filter HTML for XSS" to No.
  • Enter your script in the source of a question or group description.

    • Related Articles

    • Insert Custom CSS or JavaScript files for template

      Insert custom CSS or JavaScript files for template  Upload your files to the template /css or /scripts folder In /{your_template}/config.xml, add the file paths to the <css> or <js> blocks.  See example below. <css> ...
    • Question Themes

      Introduction Question themes can be used to customize existing question types and change their visual appearance. Question themes can only be built on core Question types. To access the question themes, go to Configuration -> Advanced -> Themes -> ...
    • Tips & Tricks

      Tips & tricks Language specific element If you want to have a language specific sentence in a survey, for example a help at the end of each page, you can add in a .pstl file a sentence and hide it for the other language. If we hide it in the ...
    • Overview - Themes

      Overview - Themes Themes are under the Advanced tab of Configuration: Configuration -> Advanced -> Themes LimeSurvey has an advanced theme and style functionality that provides developers a way to customize the appearance of surveys. Since LS3, the ...
    • Custom Question Views (New in 3.0 )

      Custom question views (New in 3.0 ) Note: This is a temporary feature to be replaced in the future by question object (it will be very easy to move custom views to question object). It is disabled by default. As of version 2.5, you can create ...