Theme editor/de

=Einführung=

LimeSurvey verfügt über ein grundlegendes Template- und Style-System, das eine themenähnliche Funktionalität bietet, die in vielen Browser-basierten Anwendungen zu finden ist. Sie werden hier einfach als Design-Vorlagen bezeichnet. Die Vorlagen ermöglichen die Kontrolle über das Aussehen und die Handhabung von Seiten während einer Umfrage. Ein Umfrageadministrator kann die für jede Umfrage zu verwendende Vorlage auswählen, um das Aussehen und die Bedienung der Umfrage zu personalisieren. Änderungen an einer Vorlage können so einfach sein, wie das Hinzufügen eines einzigartigen Logos auf der Startseite, das Ändern von Hintergrundfarben oder vielleicht neue Textfarben für bestimmte Fragen.

LimeSurvey wird mit einem Satz Vorlagen ausgeliefert. Diese initialen Vorlagen werden durch Verzeichnisse innerhalb des LimeSurvey-Installationsverzeichnisses "templates" definiert. Jedes Vorlage hat sein eigenes Verzeichnis. Im Hauptverzeichnis eines Vorlageverzeichnisses befinden sich zahlreiche Dateien: Vorlagen (.pstpl),  Kaskadierende Stylesheets (.css), Bilder (.jpg oder .png) und vielleicht andere.

Wie in anderen themenbasierten Systemen werden auch in den. pstpl-Vorlagen-Dateien Fragmente von HTML-Code gespeichert. Diese Fragmente werden eingelesen und zur Erstellung der Seite verwendet, die dem Endbenutzer während des Betriebs einer Umfrage angezeigt werden soll. Oftmals werden Schlüsselwörter von geschweiften Klammern umgeben in die Dateien aufgenommen, die dann durch den entsprechenden Text ersetzt werden. Im Folgenden finden Sie ein Beispiel für den Inhalt einer Vorlagen-Datei und ihr Ergebnis bei der Verwendung in einer Umfrage-Seite:

Seit LimeSurvey 3 verwendet die Theme-Engine Twig, sodass die Theme-Entwickler die Logik des Renderings der Umfrage auf sichere und einfache Weise ändern können. Twig ersetzt das alte System der Platzhalter, das in früheren Versionen verwendet wurde. Die Logik, die zum Generieren des HTML verwendet wurde, ist jetzt Teil der Theme.

Schnipsel aus der Vanilla Theme:

Meine neue Umfrage Dies ist eine Umfrage, die von mir geschrieben wurde, 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.

Wenn Sie eine neue Vorlage erstellen, ziehen Sie bitte in Erwägung diese der LimeSurvey Community zur Verfügung zu stellen, um das Projekt zu unterstützen. Auf der LimeSurvey-Seite finden sich im Downloadbereich sehr viele Vorlagen und Beschriftungssets.

Mit Ihrer Hilfe können wir unsere Downloadbereich aus Vorlagen, Umfragen und anderen Add-Ons weiter wachsen lassn, um LimeSurvey noch besser zu machen (siehe Template Repository).

=Neue Vorlage erstellen=

Damit Sie eine neue Designvorlage erstellen (oder eine bestehende bearbeiten) können, benötigen Sie die Berechtigung Designvorlagen zu erstellen, als auch Berechtigung die dahinter liegenden Dateien des Betriebssystems zu bearbeiten.

Achtung: Da Änderungen an der Designvorlage alle Umfragen in einer LimeSurvey-Installation beeinflussen können, sollten diese nur von jemandem durchgeführt werden, der die Konzepte dahinter versteht. Designvorlagen sind ein erweitertes Feature, welches Erfahrung und etwas Experimentieren benötigt, bis man es wirklich richtig macht mit den HTML-Code Methoden.

Der bevorzugte Weg, um eine neue Vorlage zu erstellen, ist durch den Template-Editor (siehe unten) über die Webadmin-Oberfläche. Einige Leute können gerne direkt mit Template-Dateien arbeiten, so dass sie ihren Lieblings-Text-Editor stattdessen verwenden können anstatt der Web-Schnittstelle. In diesem Fall benutzen Sie immer noch den Template-Editor um zuerst Ihre neue Vorlage zu erstellen. Dies wird eine neue Basis-Vorlage mit allen Dateien, die Sie benötigen im Verzeichnis LimeSurvey_web_root/upload/templates/neues_template erstellen. Von dort aus können Sie Ihren Text-Editor zum manuellen Bearbeiten der Template-Dateien benutzen.

Permissions Note: on unix/linux systems, these theme files will be owned by the group and user where the web server is running (may be "www" for some systems). So, make sure you have enough access to edit these files, When you save them, make sure they don't change ownership! In this way, you can still use the web Theme Editing interface if needed.

Eine Reihe von 'öffentlichen' Elementen von LimeSurvey kann durch eine Reihe von Vorlagen angepasst werden. Im nächsten Abschnitt finden Sie eine sehr kurze Erläuterung dieser Vorlagen.

=Der LimeSurvey-Template-Editor=

Um das Verständnis und die schnelle Aktualisierung eines Templates zu erleichtern, bietet LimeSurvey einen' Template Editor in der Hauptsymbolleiste der Anwendung an. Dieser Vorlageneditor steht nur Benutzern zur Verfügung, die das Zugriffsrecht in den Benutzersicherheitseinstellungen haben und für Superadministratoren. Eine Vorlage wirkt sich auf alle Umfragen aus, und kann eine Umfrage unbrauchbar machen, wenn sie nicht korrekt aufgebaut ist.

The LimeSurvey theme editor allows you to edit the contents of your themes online. To start the Theme Editor: click on Themes link in the Configuration menu, and then click on the "Theme editor" button next of the theme you want to edit or extend.



The template editor page allows you to select the template you would like to edit/view.



Folgende Optionen stehen zur Verfügung:


 * Create: Allows you to create a new template. In order not to start from scratch, the template 'default' is copied.
 * Import: Allows you to import a template from a ZIP file.
 * Export: Allows you to export the current template to a ZIP file.
 * Copy: Allows you to make a new template by copying the current one.
 * Rename: Allows you to change the name of the template. It is generally used after copying or importing a template.
 * Template: It is a drop-down list that shows all the available templates that are located in your LimeSurvey installation.


 * Screen: It is a drop-down list which allows you to choose which particular survey page of that template you want to look at.
 * Return to admin panel.

Importieren/Exportieren/Kopieren einer Vorlage
When you export a template, a ZIP-file archive with all the files your template consists of will be created (.pstpl files, images, css files, ...). You can simply import the exported zip-file into another LimeSurvey installation by using the import feature or you can manually copy the archive into another LimeSurvey installation and extract it into the corresponding template directory there.

However, it is preferred to use the LimeSurvey template import/export/copy functions in the template editor.

Page Structure / Template Use

 * The Welcome Page: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
 * The Questions Pages: startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
 * The Final Page: startpage.pstpl, assessment.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 " " tag, and should not contain the " " tag. This 'very beginning' of a standard html page is written by the scripts. Please ensure that your startpage.pstpl files contains a tag. Even though many browsers do not require strict adherence to the W3 HTML standards, the LimeSurvey script needs to find a tag to run certain javascript elements. It is not expected to see many 'keywords' 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. For example, 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 (i.e.: 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. Please note that in the survey settings (access the Presentation & navigation settings by clicking on the Presentation tab) you can set if the group description should be shown or not. If not, then this file is not included at all.
 * question.pstpl: This file contains the question, answer, and help text sections of your survey. 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 LimeSurvey 1.87). All keywords from this template are now available directly in question.pstpl.
 * 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 necessary for the print version of the survey.
 * print_group.pstpl: This file is the same as startgroup.pstpl and 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 und JavaScript
Two files that are always used in a template are 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.

Using Bootstrap
LimeSurvey has Bootstrap 3 embedded, so you can style all your templates with the well documented Bootstrap classes. For more information please refer to the Bootstrap documentation.

The Awesome-Bootstrap-Checkbox plugin is also included. With it, you can use the typical Bootstrap color-classes (info,warning,danger,etc.) also with the suffix "-checkbox" or "-radio", though styling checkboxes and radios as you prefer.

Replacing default CSS or Javascript
Some questions use specific files for Javascript or CSS. If you need to replace a function, use a cascading system. For javascript function, the last function read is the function used.

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 settings of the survey. The table below indicates which template files are used in constructing each of these pages.

* NOTE: In version 1.90+, 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: And then add the corresponding closing tag to the end of question.pstpl:

* NOTE: In version 1.91 and earlier, LimeSurvey js files are not included in the template. In version 2, you have to use {TEMPLATEJS} in 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. You can see the Screen part, JavaScript, and CSS files. 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 from 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.

Instead of using a link for each picture, utilize the field string {TEMPLATEURL}. So, instead of:

You can use :

In LimeSurvey versions before 2.50 use:

A "sample" of the template page you are editing will be visible in the bottom of the screen. There is no way to delete a template from the template editor. This must be done by accessing the underlying directory and deleting manually the files from there. You also have the possibility to select different screen resolutions in order to better evaluate the feel and look of the template.

Note: The shipped templates cannot be edited using the template editor. If you want to modify them, create a copy first and edit the copy.

Template files location
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.

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. It comes installed by default.

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

=Fragen stylen mit 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:

and if the question is mandatory:

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

and if the question has validation applied, but the user hasn't answered correctly:

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.

Some example of question part with classes
Text-short question type: Multiple short text Array question type

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.

Importing styles into your custom template
The custom question styles are near the bottom of each template's CSS file and start with:

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.

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. Adding a js / no-js class to have javascript / no javascript system.

And in template.css use:

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.

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 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:

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

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.

=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, and customizing survey description page.

Video - needed

=Tips & Tricks=

Some language specific element
If you want to have some 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 hidding it for other language. If we hide it in the template.css, we can use the pseudo selector :lang, but we use some class for better compatibility.

Below, there are two help sentences, in French and English. Put this on endpage.pstpl:

and in template.css:

Change the layout of the survey page
After editing and saving a template, it applies to a survey list page only if it is selected from the settings of the survey. To make it the default template, go under the General tab located in the Global settings of your LimeSurvey installation and choose the desired template. From now on, all the templates that use the "default" option as template plus the ones that are going to be newly created, will use the newly selected default template.

To use your current template for this page, you have to change the according setting from Global settings. In older versions, this change can be done by editing the $defaulttemplate setting from the config file: copy this setting from config-defaults.php to config.php which overrides config-defaults.php and edit this setting to.

Import/Export of templates: Mac users
Mac users, please note that the Mac OSX default archive utility may have problems with zip folders "generated on the fly".

A workaround is to unix'es unzip from the command line:

$ unzip template.zip -d template

Archive: template.zip

inflating: template/startpage

inflating: ...

Another workaround is to use scripts in their mac-compiled counterparts.

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 will then be automatically used instead of the default help icon.

Replacing an existing logo
Note: In the default Template of 2.50, there is no preembedded logo. Read further our wiki on how to add your own logo.

1. To edit the logo go to the  template.css  file which you can find it here:



2. Click the search button to find occurrences of logo related styles and search for logo



3. Edit the main style file.

You will see something similar to:



If you want to change the image, just replace logo.gif with another image link. Example: ( logo.png or logo.jpg ).

If you want to change the image size, adjust width and height (in pixels) like this:

Adding your own logo
1. Find and open the startpage.pstpl template file.



2. After this add this line to startpage.pstpl:

3. To upload your own logo, go to the template editor and upload your logo.



To position your logo, please use one of the following css classes:


 * If you want the logo to be placed on the left side:


 * If you want the logo to be placed on the right side:


 * If you want to center the logo

Dasselbe Template mit verschiedenen Logos benutzen
Wenn Sie dasselbe Template für all Ihre Umfrage nutzen und nur das Logo für jede Umfrage ändern möchten, dann können Sie den {SID}-Platzhalter in Ihrer .pstpl Vorlagendatei benutzen und auf diesem Weg auf verschiedene Bilder verweisen:

Eigenes Favicon zeigen
Ein Favicon ist das kklein Symbol, das Sie in ihrer Browser-Adresszeile, Ihren Lesezeichen oder auf dem Tabfür ihre LimeSurvey-Umfrage sehen. Sie können Ihr eigenes Icon auf folgende Weise anzeigen:
 * 1) Erstellen Sie ein neue Favicon - googlen Sie einfach um viele Webseiten zu finden, die Ihnen dabei helfen.
 * 2) Benennen Sie die Datei 'favicon.ico" und laden Sie diese in ihrem Template als zusätzliche Datei hoch.
 * 3) Fügen Sie den folgenden Code zu Ihrer "startpage.pstpl" for dem Tag hinzu.

Different appearance for survey-/question-pages
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.

An example from default template of LimeSurvey 1.91+:

If you do not want differentiate even and odd pages, 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.

header_separator is used to adress the separator for the header "td". The "dual_scale_separator" is used to address 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 ..." message 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:

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 function from below. It calls the $(document).ready function in the template.css of your used design template:

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

It will probably not work for a survey in English language and has to be extended when used for multilingual surveys. But it's an idea/tip on how to solve this.

How to deal with multilingual question attributes
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":

Add in the template.css of your template (at /limesurvey/upload/templates/ /template.css):

Adding your own logo to the survey list

 * 1) First please open the theme editor for the theme you like to use. [[File:OpenThemeEditor.jpg]]
 * 2) We recommend to use fruity, it is our best theme currently.
 * 3) Then extend the theme and give it a name you will recognize. [[File:ExtendTheme.jpg]]
 * 4) In the following view you may upload the logo you want to use. [[File:UploadFileTheme.jpg]]
 * 5) Select the editor screen `Survey List´ in the Screen dropdown in the top right corner. [[File:OpenScreenSurveyList.jpg]]
 * 6) Then select `layout_survey_list.twig´ in the left side menu. [[File:EditLayoutSurveyListTwig.jpg]]
 * 7) In the editor scroll to line 126 and change the marked part to the filename of the image you uploaded to the theme before. [[File:ChangeSurveyListHeaderImageEditor.jpg]]
 * 8) Save your file. [[File:ThemeEditorSaveChanges.jpg]]
 * 9) Change default theme to your extended theme. [[File:ChangeDefaultTheme.jpg]]

=Custom Question Views =

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 template-specific custom views for questions and some of their incorporated elements. This is useful if you want to modify the HTML layout of a particular question type for one or more surveys.


 * In application/config/config.php, find 'config'=>array and add this line to the array : 'allow_templates_to_overwrite_views'=>1
 * In /{your_template}/config.xml, set "overwrite_question_views" to true
 * Copy application/views/survey/* to template/{your_view_directory}/survey/
 * Note that you only need to copy the files that you intend to modify but the file structure must remain the same as in application/views/survey/

=Insert Custom CSS or JavaScript files for template =

As of version 2.50, you can use the config.xml file to automatically load plugin files.


 * Upload your files to the template /css or /scripts folder
 * In /{your_template}/config.xml, add the file paths to the or  blocks, something like this: