Other languages:

Introductie

LimeSurvey heeft een template- en stijlsysteem dat het mogelijk maakt om thema's te maken die je wel kent uit browsergebaseerde software. Hier gebruiken we de term Sjablonen. De sjablonen definieren het uiterlijk van de pagina's van een enqûete. Het enqûetebeheer kan het sjabloon kiezen dat gebruikt wordt, en dat aanpassen. Hierbij kunnen het logo en achtergrondkleuren aangepast worden, maar ook tekstkleuren voor specifieke vragen gemaakt worden.

LimeSurvey wordt geleverd met een set standaardsjablonen. Deze staan in de templates-directory: ieder sjabloon heeft z'n eigen directory. Binnen deze directory zijn er verschillende soort bestanden: sjablonen (.pstpl), cascading style sheets (.css), plaatjes (.jpg or .png) en mogelijk andere.

Net als in andere themagebaseerde systemen wordt HTML gebruikt om het sjabloon op te bouwen en te tonen aan de gebruiker. Daarbij worden sleutelwoorden gebruikt die in accolades ('{', '}') geplaatst worden, en die vervangen worden door de eigenlijke tekst. Hieronder een voorbeeld van het sjabloonbestand, en het resultaat zoals getoond aan de gebruiker.

<center><font face='verdana' color='red'>{SURVEYNAME}</font><br />
<font face='verdana' color='blue'><u>{SURVEYDESCRIPTION}</u></center>

Met als resultaat:

My New Survey Dit is mijn enqûete over het soort chocolade dat mensen lekker vinden.

Sjablonen bepalen door het gebruik van HTML ook het lettertype en de positie van de tekst en vergelijkbare structuren. Deze structuren worden meestal vastgelegd in cascading style sheets (CSS), die de positie, lettertype, -kleur en -grootte, etcetera. Stijlsheets gebruiken daarvoor klassen, die refereren aan HTML-objecten in het sjabloon. Binnen LimeSurvey zijn er speciale klassen gedefinieerd, die gebruikt kunnen worden voor het aanpassen van deze elementen. Ook worden sleutelwoorden gebruikt om de inhoud aan te passen, zoals de titel van de enqûete en de vraagtekst van iedere vraag.

Als je een nieuw sjabloon ontwerpt, overweeg dan het beschikbaar te maken voor de LimeSurvey-community. Hiermee vul je de bibliotheek van beschikbare sjablonen, enqûetes en andere aanvullingen, en dat maakt LimeSurvey waardevoller! Kijk hiervoor even in de Sjabloonbibliotheek

Een sjabloon aanmaken

Om een sjabloon aan te kunnen maken (of een bestaande aan te passen) heb je Sjabloonrechten nodig binnen LimeSurvey. Ook heb je toestemming nodig om de bestanden binnen de sjabloondirectory te wijzigen.

Waarschuwing: Wijzigingen op sjablonen worden doorgevoerd op alle enqûetes die er gebruik van maken! Daarom is het verstandig alleen sjablonen aan te passen als je een goede HTML-ontwikkelaar bent.

Het heeft de voorkeur om een nieuw sjabloon te beginnen via de Sjablooneditor (zie ook onder) in het beheerpaneel. Als je dat wilt, kun je de bestanden ook direct benaderen via je favoriete teksteditor. In dit voorbeeld gaan we even uit van de Sjablooneditor om een nieuw sjabloon aan te maken in de directory. Daarna kun je de bestanden vrijelijk aanpassen via de teksteditor.

Rechten: bij unix/linuxsystemen worden de templates beheerd door de groep en eigenaar die ook de webserver beheerd (iets als 'www'). Bekijk eerst of je rechten hebt om de bestanden te wijzigen, en dat ze niet van eigenaar veranderen als je ze opslaat. Anders kan het zijn dat ze niet meer benaderbaar zijn in de Sjablooneditor.

Sjabloonbestand zijn lastig te begrijpen als je er mee begint. Je moet er HTML voor kennen, en mogelijk ook CSS. Het beste is dan ook eerst een bestaand sjabloon aan te passen. Kopieër daarvoor eerst een bestaand sjabloon naar een nieuwe directory, en wijzig deze bestanden. Daarmee maak je voor jezelf het concept duidelijker.

Een aantal 'publieke' elementen van LimeSurvey kunnen ook aangepast worden met behulp van sjablonen. Hier gaan er daar dieper op in. Meer informatie is te krijgen in de sectie Sjablonen + Stijl.

De LimeSurvey Template Editor

LimeSurvey heeft een Template Editor om het gemakkelijker te maken snelle wijzigingen in sjablonen te maken. Alleen gebruikers met sjabloonrechten hebben toegang tot deze editor in het beheerpaneel. Eén sjabloon bepaalt namelijk hoe alle enqûetes er uit zien die er gebruik van maken, en een foutje is snel gemaakt, waardoor de enqûetes niet meer gebruikt kunnen worden. Beperk daarom de toegang tot gebruikers die weten waar ze het over hebben.

Je kunt de bestanden van het sjabloon wijzigen door te klikken op het "Template Editor"-icoon in het administratiepaneel. Het hoofdscherm lijkt op het enqûetebeheerpaneel: je kunt hier de sjablonen bekijken en wijzigen. Als je een een selectie gemaakt hebt, zie je de lijst met bestanden die binnen het sjabloon gebruikt wordt.

Sjabloonmenu

Bewerk-icoon: geeft aan of een sjabloon aangepast mag worden. Een uitgegrijst icoon geeft aan dat het template niet bewerkt mag worden, een klikbaar icoon dat het aangepast kan worden. Dit kun je aanpassen in de sjabloonrechten.
Hernoemen: geeft de mogelijkheid om het sjabloon een nieuwe naam te geven. Dit gebruik je meestal na het kopiëren of importeren van een bestaand sjabloon.
Exporteren: exporteert het huidige sjabloon naar een .zip-bestand
Kopiëren: kopieert het huidige sjabloon naar een nieuw sjabloon.

In de selectielijst rechts ("Screen") kun je kiezen welke pagina van de enqûete je wilt zien.

Sjabloon importeren/exporteren/kopiëren

Als je een sjabloon exporteert, wordt er een zip-archief aangemaakt met alle bestanden (.pstpl-bestanden, plaatjes, style sheets, ...). Deze kun je simpel weer importeren bij een andere LimeSurvey-installatie. Je kunt ook het zip-archief handmatig kopiëren en daarna uitpakken op de doellokatie. Let er wel op dat je de directorynaam verandert als je dat op de huidige installatie doet.

Als de rechten voor de sjabloondirectory toestaan dat LimeSurvey er in mag schrijven, dan kun je ook de optie gebruiken om een sjabloon te kopiëren.

Paginastructuur / Sjabloongebruik

De Welkostpagina: startpage.pstpl, welcome.pstpl, navigator.pstpl, endpage.pstpl
De Vragenpagina's: startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, navigator.pstpl, endpage.pstpl
De Verzendpagina: startpage.pstpl, survey.pstpl, submit.pstpl, (privacy.pstpl), navigator.pstpl, endpage.pstpl
De Afsluitpagina: startpage.pstpl, completed.pstpl, endpage.pstpl

Sjabloonbestanden

De volgende bestanden worden gebruikt om elke enqûete op te bouwen, en moeten minstens aanwezig zijn in elk sjabloon dat je aanmaakt:

startpage.pstpl: De "kop" van iedere pagina. Begint met de "<head>" tag, maar de "<html>" tag staat er niet in. Wordt door de scripts aangemaakt. Wees er zeker van dat de startpage.pstpl een <body> tag heeft. Ook al staan de meeste browsers dit toe, dan nog heeft het LimeSurvey-javascript deze tag nodig om elementen te kunnen wijzigen. Het is niet versiets dat je veel 'sleutelwoorden' in startpage.pstpl opneemt, alhoewel het nuttig is om de tag {SURVEYNAME} in de titel te zetten. Startpage.pstpl kan code bevatten die in endpage.pstpl afgemaakt wordt, bijvoorbeeld een tabel die je hier opent en in endpage.pstpl weer sluit. Startpage.pstpl en endpage.pstpl files zijn eigenlijk de kop en voettekst van elke pagina van LimeSurvey.
survey.pstpl: De plaats van de naam en beschrijving van de enqûete. Er is geen tegenhanger voor dit gedeelte, dus mocht je HTML willen gebruiken, sluit dan alle tags af aan het eind van dit gedeelte.
welcome.pstpl: Het sjabloon voor het welkomstscherm (of, bij "alles-in-een" enqûetes, het enige scherm). Hier kun je de welkomstboodschap en introductie van de enqûete kwijt. Net zoals 'survey.pstpl' is er geen tegenhanger, dus sluit ook hier alle tags af als je die gebruikt.
startgroup.pstpl: wordt aan het begin van groepen vragen getoond. Dit sjabloon heeft de tegenhanger 'endgroup.pstpl', dus je hoeft daar pas alle tags te sluiten.
groupdescription.pstpl: wordt gebruikt om een beschrijving van de groep te geven. Staat apart van startgroup.pstpl, omdat het getoond wordt op zijn eigen pagina terwijl de deelnemer tussen groepen vragen zit, terwijl het boven de vragen afgebeeld wordt bij opvolgende groepen vragen. Heeft geen tegenhanger: sluit alle tags af.
question.pstpl: de plaats van de vraag, antwoord en hulpteksten. In "groepsgeoriënteerde" en "alles-in-een" enqûetes wordt dit gedeelte telkens opnieuw gebruikt. Heeft geen tegenhanger: sluit alle tags af.
question_start.pstpl: bevat de individuele elementen die voor het begin van de vraag gezet worden. Deze worden in 'question.pstpl' via het {QUESTION} sleutelwoord opgenomen. Het is bedoeld om sjabloonontwerpers meer controle te geven hoe een vraag getoond wordt. Vanaf versie 1.87 is dit niet meer nodig: de sleutelwoorden zijn nu direct beschikbaar in question.pstpl. OPMERKING: sommige templates met een question_start.pstpl werken nog wel binnen LimeSurvey 1.x
submit.pstpl (en privacy.pstpl): wordt getoond voordat de deelnemer de resultaten opstuurt (behalve bij "alles-in-een" enqûetes). Het geeft de deelnemer de gelegenheid om de gegeven antwoorden nog terug te kijken. Ook toont de pagina privacy informatie uit privacy.pstpl.
completed.pstpl: wordt getoond als de deelnemer de resultaten verstuurd heeft en de enqûete ten einde is. Kan ook gebruikt worden om een "forwarding link" te tonen zoals die gezet is in de instellingen van de enqûete.
endgroup.pstpl: sluit de groep vragen af, en kan gebruikt worden om tags die geopend zijn in startgroup.pstpl te sluiten.
navigator.pstpl: bevat de buttons die de navigatiekeuzes "volgende", "vorige", "laatste", "verstuur", "opslaan" en "wis alles". Wordt gebruikt in alle pagina's behalve de compleet-pagina.
printanswers.pstpl: hierin staat de de HTML omslag om de gedrukte versie van de enqûete te tonen.
print_group.pstpl: heeft dezelfde opzet als startgroup.pstpl endgroup.pstpl voor de gedrukte versie van de enqûete.
print_question.pstpl: heeft dezelfde opzet als question.pstpl voor de gedrukte versie van de enqûete.
print_survey.pstpl: zelfde betekenis als survey.pstpl maar dan voor de gedrukte versie van de enqûete.

CSS en Javascript

De volgende twee tags worden gebruikt om de inhoud van de bestanden template.css en template.js toe te voegen in het sjabloon:

{TEMPLATECSS}: voegt de links voor standaard css, template.css en template-rtl.css (voor rechts-naar-links-talen) toe.
{TEMPLATEJS}: voegt de links toe voor de standaard javascript, template.js en alle javascriptbestanden nodig om LimeSurvey te laten werken.

Vervangen van standaard CSS of Javascript

Sommige vragen gebruiken specifieke onderdelen, waaronder Javascript en CSS. Je kunt ook eigen bestanden toevoegen: alle bestanden in ./scripts of ./styles-public zijn overschrijfbaar.

Andere sjabloonbestanden

Privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl en confirmationemail.pstpl worden niet meer gebruikt door LimeSurvey en vervangen door standaardwaarden in de taalbestanden bij het sjabloon. Emailberichten kunnen aangepast worden per enqûete.

Standaardpagina's

Er zijn 10 standaardpagina's die een deelnemer mogelijk gaat zien bij het gebruik van LimeSurvey. Elke pagina is weer opgebouwd uit de structuur van het Sjabloon dat gekozen is bij de enqûeteinstellingen. Hieronder zie je hoe de structuur samenhangt met de pagina's.

Survey Pages: Template Files	Survey List	Welcome	Question	Completed	Clear All	Register	Load	Save	Print Answers	Print Survey
SurveyList
Welcome
Privacy
Navigator
Survey
StartGroup
GroupDescription
Question*
EndGroup
Assessment
Completed
ClearAll
Register
Load
Save
PrintAnswers
Print Survey
Print Group
Print Question
StartPage EndPage Template.css

*OPMERKING: Vanaf versie 1.90 vervangt dit question.pstpl en question_start.pstpl. Als je een ouder, aangepast sjabloon gebruikt, moet je deze regel aan het begin van quesion.pstpl toevoegen:

<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">

en question.pstpl afsluiten met:

</div>

*OPMERKING: Voor versie 1.91 worden LimeSurvey js-bestanden niet in het sjabloon opgenomen. Vanaf versie 2 moet je {TEMPLATEJS} gebruiken om de links naar de bestanden te maken. Dat kan in startpage.pstpl of endpage.pstpl. Daar kun je de regel met "{TEMPLATEURL}/template.js" verwijderen en vervangen door {TEMPLATEJS} om je sjabloon te updaten.

Bestandsbeheer

In het "Bestandsbeheer"-scherm aan de linkerkant kun je een van de sjabloonbestanden kiezen. De HTML-code zal dan in het "Bewerk"-gedeelte getoond worden. Als je de goede (directory)rechten hebt mag je deze aanpassen en opslaan.

Het "Andere Bestanden"-gedeelte toont alle andere bestanden in de sjabloondirectory. Aan de rechterzijde kun je plaatjes of andere bestanden uploaden om te gebruiken in het sjabloon. Opmerking: in plaats van een directe link te maken naar het bestand kun je ook het veld {TEMPLATEURL} gebruiken. In plaats van:

img src='/limesurvey/templates/yourtemplate/mypicture.jpg'

kun je:

img src='{TEMPLATEURL}mypicture.jpg'

gebruiken.

Een voorvertoning van het sjabloon wordt ondertussen onderin het scherm getoond. Er is geen mogelijkheid om binnen LimeSurvey een sjabloonbestand fysiek te verwijderen: dat moet via het bestandsbeheer van de server.

Opmerking: de meegeleverde sjablonen kunnen niet gewijzigd worden binnen het Sjabloonbeheer. Als je deze wilt wijzigen, maak dan eerst een kopie, en wijzig deze vervolgens.

Lokatie van sjabloonbestanden

LimeSurvey slaat ieder sjabloon op in een aparte subdirectory binnen de /templates directory, die weer onderdeel uitmaakt van alle publieke bestanden van LimeSurvey. Aangepaste (gebruikers)sjablonen worden in de directory /upload/templates geplaatst.

Om een nieuw sjabloon te maken, klik je het icoon in de sjablooneditor.

There should ALWAYS be a "default" directory in the templates directory. This template is used by default and as a fall-back if a template folder doesn't exist, or can't be found. The "default" directory comes with the package.

You can use any image files that you upload into the template management area with syntax like this:

{TEMPLATEURL}filename.xyz

Styling questions with CSS

Styling of questions in CSS has become much easier. Each question type now has a unique class. Mandatory question's also 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>

The full list of question classes

Question Type	Question Class	Question ID
5 point choice	.choice-5-pt-radio	5
Array (10 point choice)	.array-10-pt	B
Array (5 point choice)	.array-5-pt	A
Array (Flexible Labels) dual scale	.array-flexible-duel-scale	1
Array (Increase, Same, Decrease)	.array-increase-same-decrease	E
Array (Multi Flexible) (Numbers)	.array-multi-flexi	:
Array (Multi Flexible) (Text)	.array-multi-flexi-text	;
Array (Yes/No/Uncertain)	.array-yes-uncertain-no	C
Array (flexible labels)	.array-flexible-row	F
Array (flexible labels) by column	.array-flexible-column	H
Boilerplate question	.boilerplate	X
Date	.date	D
Gender	.gender	G
Huge free text	.text-huge	U
Language switch	.language	I
List (dropdown)	.list-dropdown	!
List (flexible labels) (dropdown)	.list-dropdown-flexible	W
List (flexible labels) (radio)	.list-radio-flexible	Z
List (radio)	.list-radio	L
List with comment	.list-with-comment	O
Long free text	.text-long	T
Multiple numerical input	.numeric-multi	K
Multiple options	.multiple-opt	M
Multiple options with comments	.multiple-opt-comments	P
Multiple short text	.multiple-short-txt	Q
Numerical input	.numeric	N
Ranking	.ranking	R
Short free text	.text-short	S
Yes/No	.yes-no	Y

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, by default, interact so that you can have validation tips start hidden, but appear when there 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 med; then re-display the page using a harsher color if the person submits the page with lingering validation errors.

Purpose	CSS Class	Description
Mandatory	.mandatory	the question is mandatory
User input error	.input-error	the question had at least one validation error
Hide Tip	.hide-tip	added if you use the hide_tip option
Num answers	.em_num_answers	for for min_answers and max_answers
Value range	.em_value_range	for min/max_num_value_n and multiflexible_min/max
Sum range	.em_sum_range	for min/max/equals_num_value
Regex validation	.em_regex_validation	for regular-expression validation of the question
Question-level validation function	.em_q_fn_validation	for the em_validation_q option
Subquestion-level validation function	.em_sq_fn_validation	for the em_validation_sq option
Other comment mandatory	.em_other_comment_mandatory	for 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:

/* <strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike>----

  START: Question styles  <strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike><strike>-</strike> */

If you're styling your own custom template, You should be able to copy everything after the above from templates/default/template.css (for tables 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 most other browsers, there are special IE conditional style sheets included for each template.

/* -------------------------------------------------
   START: Question styles  ------------------------- */

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 conditional class for body in startpage.pstpl, and use this class in your template.css

<body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT}">

And in template.css use

.ie6{/*specific for internet explorer */}

.ie{/*specific for all internet explorer */}

You can see this alternative in citronade template.

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

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.)

::KEYWORD::	TEMPLATE FILES::	::DESCRIPTION::
{SURVEYNAME}	All Files	The survey title
{SURVEYDESCRIPTION}	All Files	The survey description
{WELCOME}	All files (mainly for welcome.pstpl)	The survey 'welcome' text
{PERCENTCOMPLETE}	survey.pstpl	A small graph showing the percentage of the survey completed
{GROUPNAME}	startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl	Displays the current group name
{GROUPDESCRIPTION}	startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl	Displays the current group description
{NUMBEROFQUESTIONS}	welcome.pstpl	Displays the total number of questions in the survey (just the number)
{THEREAREXQUESTIONS}	welcome.pstpl	Displays 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 but the {QUESTION_...} keywords 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} and {QUESTION_INPUT_ERROR_CLASS} and appropriate wrapping HTML instead of {QUESTION})
{ANSWER}	question.pstpl, print_question.pstpl	presents the answer form for the current question
{SGQ}	question.pstpl, question text	Can 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.pstpl	Displays help text (predefined tip for question type) for the current question
{QUESTION_CLASS}	question.pstpl, print_question.pstpl	unique class for each question type. (To be included in the question's wrapping tag.)
{QUESTION_CODE}	question.pstpl, print_question.pstpl	Displays the current question code
{QUESTION_ESSENTIALS}	question.pstpl	the 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.pstpl	Displays the user defined help text for the current question
{QUESTION_TYPE_HELP}	print_question.pstp	Displays the user defined help text for the current question
{QUESTION_INPUT_ERROR_CLASS}	question.pstp, question_start.pstpl	Provides a class if there was user input error
{QUESTION_ID}	print_question.pstp	Provides a unique ID for each question to allow styling for specific questions
{QUESTION_TEXT}	question.pstp, print_question.pstp, question_start.pstpl	Displays the text for the current question
{QUESTION_MANDATORY}	question.pstp, print_question.pstp, question_start.pstpl	Displays the translated 'Mandatory' text for the current question
{QUESTION_MAN_CLASS}	question.pstpl, print_question.pstpl	class if a question is mandatory. (To be included in the question's wrapping tag.)
{QUESTION_MAN_MESSAGE}	question.pstp, print_question.pstp, question_start.pstpl	Displays the translated 'Mandatory' help message text for the current question
{QUESTION_NUMBER}	print_question.pstpl	Incremental count of questions.
{QUESTION_VALID_MESSAGE}	question.pstp, print_question.pstp, question_start.pstpl	Displays the translated valid help message text for the current question
{QUESTION_SCENARIO}	print_question.pstp	Prints out the 'scenario' text for conditional questions.
{NAVIGATOR}	navigator.pstpl	Displays navigation buttons (next, prev, last)
{CLEARALL}	All files (but intended for navigator.pstpl)	Displays the "Exit and Clear Results" link
{SUBMITBUTTON}	submit.pstpl	Displays the final submit button
{COMPLETED}	completed.pstpl	Displays the 'completed' messagem for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
{URL}	completed.pstpl	Displays the survey 'url' and 'url text'
{PRIVACY}	submit.pstpl	Displays privacy information when survey is anonymous
{PRIVACYMESSAGE}	privacy.pstpl	The 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 Files	The URL to the current template location (useful for referencing image files in your template)
{SUBMITCOMPLETE}	endpage.pstpl	The statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button
{SUBMITREVIEW}	survey.pstpl	The statement (from the language files) that tells the user they can review/change the answers they have made by clicking "<< prev"
{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.pstpl	The "Answers Cleared" statement from the language files
{RESTART}	clearall.pstpl	URL to restart the survey
{CLOSEWINDOW}	All Files (Preferably in navigator.pstpl)	URL to close current window
{REGISTERERROR}	register.pstpl	Shows any error messages in the register page (ie: "You must include an email address")
{REGISTERMESSAGE1}	register.pstpl	The statement "You must be registered to complete this survey" from the language files
{REGISTERMESSAGE2}	register.pstpl	Details about registering from the language files
{REGISTERFORM}	register.pstpl	The actual form for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
{SAVE}	Works suitable on navigator.pstpl	Displays 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.pstpl	Displays 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 (these are set by relevant section above) but does allow changing of background colour, text colour and 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 colour 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 colour for these question types. Array1 is also used for the column headings in these question types)
errormandatory (Sets the colour and style of the "This question is mandatory" error message)
warningjs (Sets the colour 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)

An example of using these classes with style sheets can be found in the "bubblegum" template that comes with the LimeSurvey application.

Because you can edit all the HTML aspects, there's no reason to surround your templates with a

and then define a css for that new_name class.

Styling the progress bar

Before version 1.87:

The chart.jpg file is a simple one pixel image file which is used to create the progress bar image in the 'PERCENTCOMPLETE' table. If the file does not exist, LimeSurvey will use the default 'maroon' coloured image in the public directory. If you want to create a bar to match your own colour scheme, then you should save the color in this file. Remember it should be a JPEG file, 1 pixel x 1 pixel, in the colour desired.

Version 1.87 and newer:

The progress bar appearance can be modified with CSS.

To change the background colour 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 colour 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

Starting with version 0.99, LimeSurvey has integrated some user-made patches that allow for some special changes. These very advanced features generally require changes to the underlying code base of LimeSurvey and should be done carefully so as not to introduce security holes.

Basic CMS Integration support

Deprecated: This function is not available anymore in version 2.0 or later

To be able to integrate LimeSurvey into another CMS, use the following options in config.php:

// Set $embedded to true and specify the header and footer functions if the survey is to be displayed embedded in a CMS

$embedded = false;
$embedded_inc = "";               // path to the header to include if any
$embedded_headerfunc = "";        // e.g. COM_siteHeader for geeklog
$embedded_footerfunc = "";        // e.g. COM_siteFooter for geeklog

Set $embedded = true; to enable CMS-embedding. By using the $embedded_inc variable one can include their own .php files. By setting $embedded_headerfunc or $embedded_footerfunc, one can call functions from within included files that output the relevant headers or footers instead of LimeSurveys default ones.

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 each. This way a template author can create their own template_onload() function in the HEAD that replaces the default one.

Version 1.87 and newer:

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.
There are more details in the workaround section.

Videos on Templates

This video will demonstrate the basic and advanced template functions that are available to all LimeSurvey users. This includes changing the appearance of certain forms and inserting custom graphics. Additionally, it will thoroughly walk you through on how to edit and preview specific page templates, importing/exporting templates, modify appearance of questions in the CSS, customizing survey description page, and completed page.

video - eigen sjabloon maken

Tips & Tricks

Some language specific element

If you want to have some langage specific sentence in a survey, for example an help at end of each page, you can add in a .pstl file a sentence and hidding it for other langage. ANd hidding it in the template.css, we can use psuedo selector :lang, but for best compatibility, we use some class.

Example for a help sentence at bottom of the page, in french an english, put this on endpage.pstpl:

<div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<div class="en" lang="en">For some help, please call 000000</div>

ans in template.css

.lang-fr .en{display:none}
.lang-en .fr{display:none}

You can use it to for other sentence in your question before 1.92 ( in 1.92, there are better solutions).

Change the layout of the survey page

When editing a template this template can be assigned to a single survey while the survey list page, which is shown at www.yourdomain.org/limesurveyinstallfolder, lists all your surveys.

To use your current template for this page you have change the according setting at the Global Settings screen; at older versions this change can be done by editing the $defaulttemplate setting at the config file: Copy this setting from config-defaults.php to config.php which overrides config-defaults.php and edit this setting to $defaulttemplate = 'yourtemplatename';

Import/Export of templates: Mac users

Mac users, please note: Mac OSX default archive utility may have problems with zip folders "generated on the fly".

a work around is to unix'es unzip from the command line:

$ unzip template.zip -d template

Archive: template.zip

inflating: template/startpage

inflating: ...

or scripts in their mac-compiled counterparts:

http://homepage.mac.com/roger_jolly/software/

Changing your templates traffic light from red to green

If you haven't already, set the admin directory to read/write/execute (777). The files within it, however, may be set to read/execute only (chmod 755).

GO to file directory ie file manager, find templates directory.

1 change permission on eg"vallendar" (or any template of your choice) directory to read 777

2 voila! the red traffic light on "vallendar" is now green.

3 NOTE: to restrict access for safety, when finished editing template files, change all templates files back to what they were eg 644

Replacing the help icon

When a question help text is shown then an help.gif image is used from the default template folder.

You can replace this image by uploading a new help.gif, help.png or help.jpg in your custom template folder. It then will be automatically used instead of the default help icon.

Replacing an existing logo

Note: Before uploading new logo delete previous one.

1. To edit logo go to „template.css”, you can find it here (see in screen):

File:1.PNG

2. Find and Click Search button, to find place where is logo style text.

File:2.PNG

3. Find in search #logo (It is logo design code)

File:3.PNG

4. Edit style file

You will see something like this code:

File:4.PNG

If you want change image just replace logo.gif to antoher image link. Like: (logo.png, logo.jpg, logo.swf).

If you want change image size just change, width and height (in pixels) like:

Width:100px; Height:100px;

Adding your own logo

1. Find and Open „startpage.pstpl” template file.

2. Write in „startpage.pstpl” this line:

<img id=&rdquo;page_logo&rdquo; src=&rdquo;{TEMPLATEURL}logo.png&rdquo;><br>

After

<body ... >

tag

3. To add logo go to „template.css”, you can find it here (see in screen):

File:1.PNG

3.1 Go to end of „template.css” style file.

3.2 Write in end:

If you want in left side:

#page_logo{

   float:left;

}

If you want in right side:

#page_logo{

   float:right;

}

If you want in center:

#page_logo{

   display: block;

   margin-left: auto;

   margin-right: auto;

}

Use the same template with different logos

If you want to use the same template for all surveys and just want to change the logo for each survey, you can use the {SID} placeholder in the template .pstpl file and thereby refer to different images:

<img src="{TEMPLATEURL}logoImage-{SID}.png">

Remove the default help to all question (hide_tip)

There are 2 solution to remove the default help, like a #hide_tip|hide_tip attribute but for all question and survey.

you can remove the {QUESTIONHELP} and is container from the file question.pstl, but it can be a bad idea for screenreader.
for the default template and some other , add this at the end of tempate.css

span.questionhelp{display:none;}

Display custom favicon

A favicon is the little icon you see in the browser's address bar, list of bookmarks or tab. You can display your own icon as follows:

Create a favicon - google will find you lots of free favicon generators
Name your new favicon "favicon.ico" and place it in your template directory
Add the following code to your startpage.pstpl before the </head> tag

<link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">

<link rel="icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">

Different appearance for survey-/question-pages

(Version 1.91 and newer)

If you want LimeSurvey to change the appearance of every second page (i.e. of even and odd survey pages) you can use .page-odd class in your css file to change the appearance of odd pages.

example from default template of LimeSurvey 1.91+

.page-odd table.question-group {

 background-color: #D2F2D3;

}

To not differentiate even and odd pages at the (default) template find all instances of .page-odd in template.css and remove those styles.

Create a vertical separator border for dual scale array

To create a vertical separator border for a dual scale array you can add the following lines to your template.css-file.

table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
   border-right:solid 1px #00A8E1;
}

header_separator is used to adress the separator for the header "td" and "dual_scale_separator" is used to adress the separator column in the dual scale array.

Hide the survey contact message shown on the start page/survey list

To hide the "Please contact ..." meassage on the start page (with the survey list) you can add the following to the $(document).ready function in the template.js of your used design template:

$('#surveycontact').hide(); //Hides the survey contact message

Remove the survey contact message shown on error messages

If you want to remove the survey contact message from error messages it'll be trickier. You can add the following function call to the $(document).ready function in the template.css of your used design template:

removeContactAdressFromMessage(); //Removes the survey contact message from error messages

and add the following function to your *template.js* file

function removeContactAdressFromMessage()
{
if ($('#tokenmessage').length > 0)
   {
   var oldMessage = $('#tokenmessage').html();
   var indexContact = oldMessage.indexOf('Bitte kontaktieren');
   var newMessage = oldMessage.substr(0, indexContact);
   $('#tokenmessage').html(newMessage);
   }
}

It will probably not work for an englisch survey and have to be extended when using for multilingual surveys. But it's an idea/tip how to solve this.

How to deal with multilingual question attributes (before version 2.0 at which those were added)

If you have a multilingual survey and e. g. want to use a different string for the "other" field, this could only be done for the base language (until this feature was added at Limesurvey 2.0). To work around this, paste in the field to change the label for "other"

<span class="en">New label</span><span class="fr">Nouveau label</span>

At the template.css of your template (at /limesurvey/upload/templates/<yourtemplatename>/template.css) add:

html:lang(en) .fr{display:none}
html:lang(fr) .en{display:none}

Thema-editor (Sjabloonbeheer)

From LimeSurvey Manual

Revision as of 15:06, 7 June 2013 by Rikthoff (talk | contribs)(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)