Theme editor/de

Einführung

LimeSurvey nutzt eine ganze Reihe an Vorlagen um die öffentlich sichtbaren Seiten einer Befragung darzustellen. Das Vorlagenkonzept von LimeSurvey ist relativ einfach gehaltem, erlaubt aber doch eine ziemlich weit gehende Kontrolle des Layouts und Designs einer Befragung.

So kann man zum Beispiel ein eigenes Farbschema, Logo oder zusätzlichen Text zu den unterschiedlichen Ansichten, zum Beispiel der Willkommensseite, der Fragenseite oder der Abschlusseite hinterlegen.

Die Vorlagen bestehen aus Standard-HTML-Code, in welchem Platzhalter in geschweiften Klammern Verwendung finden. Diese Platzhalter werden vom Webserver zur Laufzeit der Befragung mit dem entsprechenden Text ersetzt. Das folgende Beispiel veranschaulicht diese Methode recht gut anhand des folgenden Platzhalters am Anfang einer Vorlage:

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

Der hier dargestellte Code wird in der Befragung etwa so aussehen:

Meine erste Umfrage Dies ist eine Umfrage von mir, um herauszufinden, welche Art von Schokolade Leute mögen.

Damit man über die LimeSurvey Oberfläche eine bestehende Vorlage editieren oder in eine neue kopieren kann, benötigt man zunächst das Benutzerrecht Vorlagen zu editieren. LimeSurvey selbst benötigt natürlich Schreibrechte für das Vorlagenverzeichnis auf dem Server. Ist eines dieser Rechte nicht gesetzt, kann die Vorlage nicht über LimeSurvey angepasst werden. In diesem Fall muss man die Dateien beispielsweise per FTP herunterladen und mit geeigneter Software ändern. Eine Änderung an einer Vorlage kann unter Umständen alle gespeicherten Befragungen betreffen, daher sollten die Designanpassungen von Leuten übernommen werden, die das grundsätzliche Konzept und den genutzen Code von LimeSurvey verstehen. Die Gestaltung der Vorlagen stellen schon eine fortgeschrittene Aufgabe dar und kann einige Zeit in Anspruch nehmen, wenn man mit HTML-Code nicht wirklich viel anfangen kann.

LimeSurvey bringt bereits viele unterschiedliche Vorlagen mit, selbst erstellte Vorlagen sollten der Anwenderschaft zur Verfügung gestellt werden, um das Projekt zu unterstützen. Auf der LimeSurvey-Seite finden sich im Downloadbereich sehr viele Vorlagen und Beschriftungssets.

Auf den ersten Blick wirken die Dateien der Vorlagen sehr komplex, es ist hilfreich, wenn man HTML-Kenntnisse mitbringt, vermutlich auch mit Styles und Styles Sheets bereits Erfahrungen sammeln konnte. Je nach Konfiguration der Verzeichnisrechte kann es auch notwendig sein auf die Dateien und Verzeichnisse Zugriff zu haben, wenn sich die Vorlagen über LimeSurvey nicht anpassen lassen. Kopiere einfach eine bestehende Vorlage in ein neues Verzeichnis und probiere verschiedene Anpassungen durch. Damit wird die Arbeitsweise von LimeSurvey sicher klarer.

Neue Vorlage erstellen

To be able to create a new template (or edit an existing template), you need Template Editing user permission in LimeSurvey as well as permission to manipulate the files in the underlying operating system hosting your LimeSurvey installation.

Note of Warning: As template changes can affect all surveys in an installation, changes should be limited to those skilled in understanding general concepts in the code base. Templates are an advanced feature that can take some experimentation to get correct if you are not familiar with HTML code methods.

The preferred way to create a new template is through the Template Editor (see below) via the web Admin interface. Some people may like to work directly with template files so that they can use their favorite text editor instead of the web interface. In this case, still use the Template Editor to first create your new template. This will create a new base template with all the files you need in the LimeSurvey_web_root/upload/templates/your_new_template directory. From there you can use your text editor to manually adjust the template files.

Permissions Note: on unix/linux systems, these template files will be owned by the group and user who the web server is running as (may be "www" for some systems). So make sure you have access to edit these files, and when you save them make sure they don't change ownership, so you can still use the web Template Editing interface if needed

Template files may seem complex to understand at first. You have to likely understand HTML code, possibly Styles and Style Sheets, and have access to the underlying LimeSurvey installation files if the template files and directories are not editable. Copy an existing template to a new directory to play around with the content. This may help make the concept clearer.

A number of the 'public' elements of LimeSurvey can be adjusted by a series of templates. This section provides a very brief explanation of these templates, however more detailed information - especially regarding the editing/creation of new templates is available under Templates + Styles.

Der LimeSurvey-Template-Editor

To ease the understanding and quick update of a Template, LimeSurvey provides a Template Editor in the main administrative toolbar of the application.  This Template Editor is only available to users given the privilege in the User Security settings.  A template effects all surveys and can render a survey inoperable if not constructed properly.  So Template editing is thought best restricted to a very limited, knowledgeable set of users.  Having permission to enter the Template Editor is not enough though.

The LimeSurvey Template Editor allows you to edit the contents of your templates online. Start the Template Editor by clicking on the "Template Editor" icon in the LimeSurvey Administration toolbar (Templates). The main screen is similar to the LimeSurvey Survey Administration screen. It allows you to select the template to edit/view. Once this has been selected you can then select from one of the different public survey pages. You are then presented with a list of the template files that make up that particular page.

The Template Menu

• Edit Icon: The "edit" icon indicates whether or not the template is editable. A blurred out icon indicates that the template is read only; a clickable icon indicates you may make modifications. To change the icon from blurred to clear, you have to modify the template's permissions.
• Rename this template: Allows you to change the name of the template.  Generally used after copying an existing template or importing a template by manipulating the underlying directories.
• Export Template: Allows you to export the current template to a .zip-File.
• Copy Template: Allows you to make a new template by copying the current one.

The "Screen" drop-down list on the right allows you to choose which particular survey page you are currently looking at.

Importieren/Exportieren/Kopieren einer Vorlage

When you export a template, this will create a zip-file archive with all the files your template consists of (.pstpl files, images, css files, ...). You can simply import the exported zip-file at other LimeSurvey systems by using the import feature or you can manually copy the archive to another installation and extract it into the corresponding template directory there. If you copy the template in the same installation, you will need to rename the folder to create another named copy of that template.

If the file and directory permissions are open for the LimeSurvey application to write, then you can use the programs copy and rename features to make a local copy of a template.

Page Structure / Template Use

• The Welcome Page: startpage.pstpl, welcome.pstpl, navigator.pstpl, endpage.pstpl
• The Questions Pages: startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, navigator.pstpl, endpage.pstpl
• The Submit Page: startpage.pstpl, survey.pstpl, submit.pstpl, (privacy.pstpl), navigator.pstpl, endpage.pstpl
• The Final Page: startpage.pstpl, completed.pstpl, endpage.pstpl

Template-Dateien

The following template files are used to produce your public survey and must exist in any new template folder you create:

• startpage.pstpl: Produces the start of each html page. It starts at the "<head>" tag, and should not contain the "<html>" tag. This 'very beginning' of a standard html page is written by the scripts. Please ensure that your startpage.pstpl files contains a <body> tag, even though many browsers do not require strict adherence to the W3 HTML stanards, the LimeSurvey script needs to find a <body> tag, to run certain javascript elements. It is not expected that many 'keywords' will be used in the startpage.pstpl file, however you may wish to put the {SURVEYNAME} into the title. The startpage.pstpl file can contain code that ends in the corresponding endpage.pstpl file, so you can start a table in this file and close the table in the endpage.pstpl file. The startpage.pstpl and endpage.pstpl files wrap around every possible page used by LimeSurvey.
• survey.pstpl: This template is the second used on most pages, and provides a space to put the survey name and description. This template does not have a corresponding 'closing' template, and subsequently you should close all tags opened in this template file (ie: don't leave a table open here because there is nowhere else to close it)
• welcome.pstpl: This template is only used in the welcome screen (which is also on the main page for 'all in one' surveys). You can use this to print out the welcome text, and other information that should be provided in the introduction. Like the 'survey.pstpl' file, there is no corresponding 'closing' template, so all tags opened in this template file should be closed as well.
• startgroup.pstpl: This template can provide a 'summary' wrap around for questions within a group. It has a matching 'endgroup.pstpl' template that can be used to close any opened tags in this file, so you can open a table within this.
• groupdescription.pstpl: This template file is used to display a description of a group. It is separate to the startgroup.pstpl file because in a "question by question" survey it will be displayed on its own unique page in between groups, whereas in a "group by group" or "all in one" survey it provides a header to the subsequent questions. groupdescription.pstpl does not have a corresponding 'closing' template file, so all tags should be closed.
• question.pstpl: This file contains the question, answer and help text sections of your survey, and in the "group by group" and "all in one" surveys this template is cycled repeatedly with each question. There is no corresponding closing file for this and all tags should be closed.
• question_start.pstpl: This file contains the individual elements found at the start of a question. It is included within 'question.pstpl' via the {QUESTION} keyword. It is intended to allow template designers more control over the layout of a question. This template sits outside the normal templating system and was superseeded (as of LS1.87). All keywords from this template are now available directly in question.pstpl. NOTE: templates using question_start.pstpl will still work at least for a couple more versions of LS 1.x
• submit.pstpl (and privacy.pstpl): This page is the penultimate page for all types of survey (except the "all in one" type) where the participant is given an option to review questions before submitting their responses. It provides privacy information where a survey is anonymous, which it extracts from the privacy.pstpl file.
• completed.pstpl: This page is displayed as the final page when the survey responses have been saved and the survey is over. It can be used to display a "forwarding link" as set in the survey setup.
• endgroup.pstpl: This file closes the group, and can be used to close off any tags opened in the startgroup.pstpl file
• navigator.pstpl: This file contains the buttons that navigate through the survey, "next", "prev", "last", "submit", "save so far"  and the "clear all" link. It is used in all pages except the completed page.
• printanswers.pstpl: This file has the HTML wrapper for the print version of the survey.
• print_group.pstpl: This file is the same as startgroup.pstpl endgroup.pstpl but for the print version of the survey.
• print_question.pstpl: This file is the same as question.pstpl but for the print version of the survey.
• print_survey.pstpl: This file is the same as survey.pstpl but for the print version of the survey.

CSS and Javascript

Two files are allways used for template : template.css for css and template.js for javascript.

• {TEMPLATECSS}: Add lines for default css, template.css and template-rtl.css for rtl language.
• {TEMPLATEJS}: Add lines for default javascript files, template.js and all js files needed for LimeSurvey.

Replacing default css or javascript

Some question use specific files for javascript or css. You can use your own files. All files used in your survey included in ./scripts or in .//styles-public can be replaced, just put a file with the same name in your template.

Other Template Files

The privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl and confirmationemail.pstpl are no longer used by LimeSurvey and defaults are instead set in the applicable language files. The email messages can now be edited on a survey by survey basis.

Standard Pages

There are ten standard pages that a survey participant may see in the course of taking or accessing the LimeSurvey application.  Each is constructed from a number of common Template files from the Template specified in the survey's settings.  The table below indicates which template files are used in constructing each of these pages.

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

*NOTE: In versions 1.90 and up this replaces question.pstpl AND question_start.pstpl. If you are using an old custom template, you need to add the following line to the beginning of question.pstpl:

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

And then add the corresponding closing tag to the end of question.pstpl:

</div>

*NOTE: In version 1.91 and earlier, LimeSurvey js files are not included by the template. In version 2, you have to use {TEMPLATEJS} in your one of your template file to add the link to the js file. You can add it in startpage.pstpl or in endpage.pstpl. You can remove the {TEMPLATEURL}/template.js line and you have to replace with {TEMPLATEJS} to update a personal template.

The File Control Section

In the "file control" window on the left, you can click on one of the template files that is used to compile the page. The HTML code for that file will then appear in the "Now editing" window in the center. If the template is editable (determined by directory permissions) you can then make any changes and save them.

The "Other Files" window shows a list of all other files in the template directory. You can use the right side to upload and select image files (your pics, logos,...) or other files needed to create your template. Note: Instead of a link directly to each picture in your template you can use the field string {TEMPLATEURL}.  So instead of:

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

You can use:

img src='{TEMPLATEURL}mypicture.jpg'

A "sample" of the template page you are editing will be visible at the bottom of the screen. There is no way to to delete a template from the template editor. This must be done by accessing the underlying directory and deleting the file there.

Note: The shipped templates cannot be edited using the Template Editor and should never be changed. If you want to modify them, create a copy first and modify the copy.

Location of template files

LimeSurvey stores each of the 'standard' templates in their own distinct sub-directory within the /templates directory that is kept in the public directory with the other LimeSurvey public files. Customized user templates are stored in the /upload/templates directory.

To create a new template, use the according icon in the template editor.

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.

Schlüsselwörter

Schlüsselwörter in einer Vorlagendatei werden durch entsprechenden Umfrage-Information ersetzt. Sie sind von geschweiften Klammern umschlossen, z.B {SURVEYNAME}

Die folgenden Ausdrücke/Platzhalter werden von LimeSurvey beim Aufbau der Umfrageseite automatisch umgewandelt und der entsprechenden Information ersetzt. Diese Ausdrücke funktionieren auf fast jeder Vorlagenseite, ausgenommen der Abschluss-Seite.

Ausdruck	wird ersetzt mit
{SURVEYNAME}	Der Name der Umfrage
{SURVEYDESCRIPTION}	Der Beschreibung der Umfrage
{WELCOME}	Dem Willkommenstext der Umfrage
{PERCENTCOMPLETE}	Ein grafischer Balken, der den Prozentsatz anzeigt, wie viel der Umfrage schon beantwortet wurde
{GROUPNAME}	Dem Namen der aktuellen Gruppe
{GROUPDESCRIPTION}	Die Beschreibung der aktuellen Gruppe
{QUESTION}	Den Text der aktuellen Frage
{QUESTION_CODE}	Den Fragencode der aktuellen Frage
{ANSWER}	Die Anwort(en) zur aktuellen Frage
{THEREAREXQUESTIONS}	Wird ersetzt mit der Textzeile: "Ihre Umfrage besteht aus X Fragen."
{NUMBEROFQUESTIONS}	Die Anzahl der Fragen in ihrer Umfrage
{TOKEN}	Der entsprechende Probandenschlüssel
{SID}	DieID der aktuellen Umfrage
{QUESTIonhelp}	Dem Hilfetext zur aktuellen Frage (in einem Java-Skript-Popup)
{QUESTIonhelpPLAINTEXT}	Der Ausfüllhilfe zur aktuellen Frage
{NAVIGATOR}	Die "Vor >>" and "<< Zurück" Buttons
{SUBMITBUTTON}	Dem "Absenden" Button
{COMPLETED}	Dem Tesxt "Survey is completed and saved" aus der Übersetzung
{url}	Der URL/URL Titel für die Umfrage
{PRIVACY}	Fügt den Inhalt der Datei privacy.pstpl aus der Vorlage ein
{PRIVACYMESSAGE}	Der "Privacy Message" aus der Übersetzung
{CLEARALL}	DerURL für "Beenden und Antworten verwerfen"
{TEMPLATEURL}	Der URL zum aktuellen Vorlagen-Verzeichnis (nützlich um Logos und Bilder in eine Vorlage einzubauen)
{SUBMITCOMPLETE}	Dem entsprechenden Text aus der Übersetzung, welche dem Benutzer mitteilt, dass er die Umfrage vollständig ausgefüllt hat und nun absenden kann, in dem er auf den "Absenden"-Button klickt.
{SUBMITREVIEW}	Dem entsprechenden Text aus der Übersetzung, welche dem Benutzer mitteilt, dass er die Ergebnisse der Umfrage verändern kann, wenn er auf den "Vor" oder "Zurück"-Button klickt.
{TOKEN:FIRSTNAME}	Wenn die Antworten der Umfrage nicht anonym sind, mit dem Vornamen des entsprechenden Probanden (aus der Probandentabelle)
{TOKEN:LASTNAME}	Wenn die Antworten der Umfrage nicht anonym sind, mit dem Nachnamen des entsprechenden Probanden (aus der Probandentabelle)
{TOKEN:EMAIL}	Wenn die Antworten der Umfrage nicht anonym sind, mit der E-Mail-Adresse des entsprechenden Probanden (aus der Probandentabelle)
{TOKEN:ATTRIBUTE_1}	Wenn die Antworten der Umfrage nicht anonym sind, mit dem Attribut 1 des entsprechenden Probanden (aus der Probandentabelle)
{TOKEN:ATTRIBUTE_2}	Wenn die Antworten der Umfrage nicht anonym sind, mit dem Attribut 2 des entsprechenden Probanden (aus der Probandentabelle)
{ANSWERSCLEARED}	Dem Text "Antworten zurückgesetzt" aus der Übersetzung
{RESTART}	URL um mit der Umfrage erneut beginnen zu können
{CLOSEWINDOW}	URL zum Schließen des Fensters
{REGISTERERROR}	Zeigt eine Fehlermeldung auf der Registrierungsseite (z.B.:: "Sie müssen eine gültige E-Mail-Adresse angeben")
{REGISTERMESSAGE1}	Dem Text "Sie müssen registriert sein, um an dieser Umfrage teilzunehmen." aus der Übersetzung
{REGISTERMESSAGE2}	Informationen zur Registrierung aus der Übersetzung
{REGISTERFORM}	Das aktuelle Formular zur Registrierung, hängt davon ab, ob das Feld attribute_1 oder attribute_2 verwendet wird.
{CHECKJAVASCRIPT}	Eine Fehlermeldung, welche dem Benutzer mitteilt, dass er in seinem Browser Javascript deaktiviert hat. Das Aussehen dieser Meldung wird auf CSS ähnliche Art in der Datei startpage.pstpl festgelegt.

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.

LimeSurvey training video - template customization

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.

1. you can remove the {QUESTIONHELP} and is container from the file question.pstl, but it can be a bad idea for screenreader.
2. 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:

1. Create a favicon - google will find you lots of free favicon generators
2. Name your new favicon "favicon.ico" and place it in your template directory
3. 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}