Actions

Theme editor/de: Difference between revisions

From LimeSurvey Manual

No edit summary
No edit summary
 
(207 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<languages />  
<languages />  
=Einführung=
==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.
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.


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:
LimeSurvey wird mit einem drei Vorlagen ausgeliefert. Diese initialen Vorlagen werden durch Verzeichnisse innerhalb des LimeSurvey-Installationsverzeichnisses "/themes/survey/" 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.


<syntaxhighlight lang="html4strict" enclose="div"><center><font face='verdana' color='red'>{SURVEYNAME}</font><br />
 
<font face='verdana' color='blue'><u>{SURVEYDESCRIPTION}</u></center>
Seit LimeSurvey 2.50 verwendet die Theme-Engine [http://getbootstrap.com/docs/3.3/ Bootstrap 3] als CSS-Framework. Da es sich bei Bootstrap 3 um ein Standard-Framework handelt, finden Entwickler im Internet jede Menge Dokumentationen, Tutorials und Foren-Threads dazu.
 
 
Seit LimeSurvey 3 verwendet die Designvorlage-Engine [https://twig.symfony.com Twig], sodass die Designvorlage-Entwickler die Logik des Umfrage-Renderings auf sichere und einfache Weise ändern können. Twig ersetzt das alte System von Ersatzschlüsselwörtern, das in den vorherigen Versionen verwendet wurde. Die Logik, die verwendet wurde, um den HTML-Code der Schlüsselwörter zu generieren, ist jetzt in den Ansichten der Designvorlage verfügbar.
 
 
Ausschnitt aus dem Vanilla-Thema:
 
<syntaxhighlight lang="twig">
<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>  
{# HINWEIS: Wenn Sie das Aussehen der Frage anpassen möchten, verwenden Sie ein Fragenthema #}
{{ eine Frage.antwort | roh }}
</div>  
</syntaxhighlight>
</syntaxhighlight>


Der hier dargestellte Code wird in der Befragung etwa so aussehen:
Designvorlagen, bei denen es sich um HTML- und Twig-Code handelt, neigen dazu, die Positionierung und Art des anzuzeigenden Textes und ähnliche strukturelle Merkmale der Seite zu definieren. Sie verweisen oft auf andere Dateien oder schließen diese ein. Die meisten von ihnen verweisen auf eine gemeinsame CSS-Datei (Cascading Style Sheets), die Schriftart, Farbe, Größe, Hintergrund und ähnliche Parameter definiert, die allen Seiten in der Umfrage gemeinsam sind. Stylesheets verweisen auf HTML-'''class'''-Parameter, die den verschiedenen Objekttypen im HTML-Code zugeordnet sind. Dadurch kann das Stylesheet definieren, wie jede der vielen Arten von Text oder anderen Objekten angezeigt wird, die an mehreren Stellen erscheinen können. Für jeden Fragetyp in LimeSurvey gibt es eindeutige Klassen, die eine detaillierte Kontrolle über das Erscheinungsbild der einzelnen geben. Bilddateien wie Logos oder spezielle Fortschrittsbalken-Konstruktoren können ebenfalls in der Designdatei referenziert werden. Schließlich werden spezielle Schlüsselwörter in geschweiften Klammern durch Text ersetzt, der in der Umfrage für jeden Sprachübersetzungskorrespondenten definiert ist (z. B. der „Umfragetitel“ oder der „Fragetext“ für jede definierte Sprache).
 
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 [https://www.limesurvey.org/index.php?option=com_sobipro&sid=55:Templates&Itemid=729 Template Repository]).
 
==Eine neue Desigvorlage erstellen==


<div class="simplebox"><center>'''<span style='color:red'>My New Survey</span>'''</center>
Um ein neues Designvorlage erstellen (oder ein bestehendes Theme bearbeiten) zu können, benötigen Sie [[Manage users/de#Setze globale Berechtigungen für einen Benutzer|Benutzerberechtigung zum Bearbeiten von Vorlagen]] in LimeSurvey sowie die Berechtigung zum Bearbeiten der Dateien im zugrunde liegenden Betriebssystem System, das Ihre LimeSurvey-Installation hostet.
<center><u><span style='color:#0000ff'>This is a survey written by me to find out what sort of chocolate people like.</span></u></center></div>


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.
<div class="simplebox"><span style='color:red'>'''Warnhinweis:'''</span> Wenn Sie Designvorlagen ändern, können Sie auch alle bereits bestehenden Umfragen Ihrer LimeSurvey-Installation beeinflussen. Designs sind eine erweiterte Funktion, die Erfahrung und HTML-Kenntnisse erfordert.</div>


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.
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/themes/survey/neues_template erstellen. Von dort aus können Sie Ihren Text-Editor zum manuellen Bearbeiten der Template-Dateien benutzen.
 
<div class="simplebox">'''Berechtigungshinweis:''' Auf Unix/Linux-Systemen gehören diese Themendateien der Gruppe und dem Benutzer, auf dem der Webserver läuft (kann für einige Systeme "www" sein). Stellen Sie also sicher, dass Sie die erforderlichen Berechtigungen zum Bearbeiten dieser Dateien haben. Wenn Sie sie speichern, stellen Sie sicher, dass sie den Besitzer nicht ändern! Auf diese Weise können Sie bei Bedarf weiterhin die Weboberfläche zur Themenbearbeitung verwenden.</div><br />
 
Eine Reihe von „öffentlichen“ Elementen von LimeSurvey können durch eine Reihe von Designvorlagen angepasst werden. Der nächste Abschnitt enthält eine sehr kurze Erläuterung dieser Vorlagen.


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 [http://www.limesurvey.org/en/download-limesurvey-design-templates/com_josetta_menu_control_panel/viewcategory/9-survey-design-templates Template Repository]).
{{Hinweis|Designdateien sind ein komplexes Feature. Neben HTML sollten Sie auch mit CSS, Twig und JavaScript vertraut sein.}}


=Neue Vorlage erstellen=
=Der LimeSurvey-Designeditor=


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.
'''Theme-Editor''': '''Konfiguration''' > '''Themes'''> '''Theme-Editor'''
Der Theme-Editor ist nur für Benutzer verfügbar [[Benutzer verwalten#Set globale Berechtigungen für einen Benutzer|mit der Berechtigung „Vorlagen“]] und für Superadministratoren.  


<div class="simplebox">'''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.</div>


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.
{{Alert|title=Achtung|text=Ein nicht korrekt aufgebautes Thema kann dazu führen, dass eine Umfrage (die die entsprechende Vorlage verwendet) nicht mehr funktionsfähig ist. }}


<div class="simplebox">'''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</div>


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.
Mit dem Theme-Editor von LimeSurvey können Sie die Inhalte Ihrer Themes online bearbeiten. So starten Sie den Theme-Editor: Klicken Sie im Menü „Konfiguration“ auf „Themen“ und dann auf die Schaltfläche „Themen-Editor“ neben dem Theme, das Sie bearbeiten oder erweitern möchten.  


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.


=Der LimeSurvey-Template-Editor=
[[File:Themes menu.png]]
[[File:Theme editor button.png|''Die Schaltfläche zum Zugriff auf den Theme-Editor für das Bootswatch-Theme'']]


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.


Auf der Seite „Vorlageneditor“ können Sie die Vorlage auswählen, die Sie bearbeiten/ansehen möchten.


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 [[File:templates.png]] 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.


[[File:Template-editor-2013-7-10_11_38_16.png|center]]
[[File:Template-editor-2013-7-10_11_38_16.png|center]]


==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.
Folgende Optionen stehen zur Verfügung:
*'''Import Template:''' Allows you to import a template.
 
*'''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.
*'''Erstellen'': Ermöglicht das Erstellen einer neuen Vorlage. Um nicht bei Null anzufangen, wird die Vorlage „default“ kopiert.
*'''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.
*'''Import''': Ermöglicht den Import einer Vorlage aus einer ZIP-Datei.
*'''Export''' : Ermöglicht das Exportieren der aktuellen Vorlage in eine ZIP-Datei.
*'''Kopieren''': Ermöglicht das Erstellen einer neuen Vorlage durch Kopieren der aktuellen.
*'''Umbenennen''': Ermöglicht Ihnen, den Namen der Vorlage zu ändern. Es wird im Allgemeinen nach dem Kopieren oder Importieren einer Vorlage verwendet.
*'''Vorlage''': Eine Dropdown-Liste, die alle verfügbaren Vorlagen anzeigt, die sich in Ihrer LimeSurvey-Installation befinden.
 
*'''Bildschirm''': Eine Dropdown-Liste, mit der Sie auswählen können, welche bestimmte Umfrageseite dieser Vorlage Sie anzeigen möchten.
*'''Zurück zum Admin-Bereich'''.
 
===Eine Vorlage importieren/exportieren/kopieren===


The "Screen" drop-down list on the right allows you to choose which particular survey page you are currently looking at.
Wenn Sie eine Vorlage „exportieren“, wird ein ZIP-Archiv mit allen Vorlagendateien erstellt (.pstpl-Dateien, Bilder, CSS-Dateien, etc.). Sie können die exportierte ZIP-Datei mithilfe der Importfunktion in eine andere LimeSurvey-Installation „importieren“ oder das Archiv manuell in eine andere LimeSurvey-Installation kopieren und in die entsprechende Vorlage extrahieren.  


==Importieren/Exportieren/Kopieren einer Vorlage==
Am besten verwenden Sie jedoch die Import-/Export-/Kopierfunktionen für LimeSurvey-Vorlagen im Vorlageneditor.


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.
===Seitenstruktur/Vorlagenverwendung===
*''''Die Willkommensseite:'' startpage.pstpl, Welcome.pstpl, Privacy.pstpl, Navigator.pstpl, Endpage.pstpl
*'' „Die Fragenseiten:“ startpage.pstpl, Survey.pstpl, startgroup.pstpl, groupdescription.pstpl, questions.pstpl, endgroup.pstpl, endpage.pstpl
*“ „Die letzte Seite:“ startpage .pstpl, Beurteilung.pstpl, abgeschlossen.pstpl, endpage.pstpl


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.
===Vorlagendateien===


==Page Structure / Template Use==
Die folgenden Vorlagendateien werden zum Erstellen Ihrer öffentlichen Umfrage verwendet und müssen in jedem neuen Vorlagenordner vorhanden sein, den Sie erstellen:
*'''The Welcome Page:''' startpage.pstpl, welcome.pstpl, privacy.pstpl,  navigator.pstpl, endpage.pstpl
*''startpage.pstpl:'' Erstellt den Anfang jeder HTML-Seite. Es beginnt beim „<head> „-Tag und sollte nicht das „“ enthalten.<html> "-Tag. Dieser „Alleranfang“ einer Standard-HTML-Seite wird von den Skripten geschrieben. Bitte stellen Sie sicher, dass Ihre startpage.pstpl-Dateien einen enthalten<body> Schild. Auch wenn viele Browser keine strikte Einhaltung der W3-HTML-Standards erfordern, muss das LimeSurvey-Skript ein Tag finden, um bestimmte Javascript-Elemente auszuführen. Es kommt nicht häufig vor, dass in der Datei startpage.pstpl viele „Schlüsselwörter“ verwendet werden. Möglicherweise möchten Sie jedoch {SURVEYNAME} in den Titel einfügen. Die Datei startpage.pstpl kann Code enthalten, der in der entsprechenden Datei endpage.pstpl endet. Sie können beispielsweise eine Tabelle in dieser Datei starten und die Tabelle in der Datei endpage.pstpl schließen. Die Dateien startpage.pstpl und endpage.pstpl umschließen jede mögliche von LimeSurvey verwendete Seite.
*'''The Questions Pages:''' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl
*''survey.pstpl:'' Diese Vorlage ist die zweite, die auf den meisten Seiten verwendet wird und bietet Platz für den Namen der Umfrage und Beschreibung. Für diese Vorlage gibt es keine entsprechende „schließende“ Vorlage, und anschließend sollten Sie alle in dieser Vorlagendatei geöffneten Tags schließen (d. h.: Lassen Sie hier keine Tabelle offen, da es sonst keinen Ort zum Schließen gibt).
*'''The Submit Page:''' startpage.pstpl, survey.pstpl, submit.pstpl, (privacy.pstpl), navigator.pstpl, endpage.pstpl
*' ''welcome.pstpl:'' Diese Vorlage wird nur im Begrüßungsbildschirm verwendet (der sich auch auf der Hauptseite für „All-in-one“-Umfragen befindet). Hiermit können Sie den Begrüßungstext und weitere Informationen, die in der Einleitung enthalten sein sollten, ausdrucken. Wie bei der Datei „survey.pstpl“ gibt es keine entsprechende „schließende“ Vorlage, daher sollten alle in dieser Vorlagendatei geöffneten Tags ebenfalls geschlossen werden.
*'''The Final Page:''' startpage.pstpl, assesment.pstpl, completed.pstpl, endpage.pstpl
*''startgroup.pstpl:'' Diese Vorlage kann Folgendes bereitstellen eine „Zusammenfassung“ für Fragen innerhalb einer Gruppe. Es verfügt über eine passende Vorlage „endgroup.pstpl“, mit der alle geöffneten Tags in dieser Datei geschlossen werden können, sodass Sie darin eine Tabelle öffnen können.
*''groupdescription.pstpl:'' Diese Vorlagendatei ist Wird verwendet, um eine Beschreibung einer Gruppe anzuzeigen. Bitte beachten Sie, dass Sie in den Umfrageeinstellungen (Zugriff auf die „Präsentations- und Navigationseinstellungen“, indem Sie auf die Registerkarte „Präsentation“ klicken) festlegen können, ob die Gruppenbeschreibung angezeigt werden soll oder nicht. Wenn nicht, ist diese Datei überhaupt nicht enthalten.
*'''question.pstpl:''' Diese Datei enthält die Frage-, Antwort- und Hilfetextabschnitte Ihrer Umfrage. In den Umfragen „Gruppe für Gruppe“ und „All in One“ wird diese Vorlage bei jeder Frage wiederholt. Hierfür gibt es keine entsprechende Abschlussdatei und alle Tags sollten geschlossen werden.
*''question_start.pstpl:'' Diese Datei enthält die einzelnen Elemente, die am Anfang einer Frage gefunden werden. Es ist über das Schlüsselwort {QUESTION} in „question.pstpl“ eingebunden. Es soll Vorlagendesignern mehr Kontrolle über das Layout einer Frage ermöglichen. Diese Vorlage befindet sich außerhalb des normalen Vorlagensystems und wurde ersetzt (ab LimeSurvey 1.87). Alle Schlüsselwörter aus dieser Vorlage sind jetzt direkt in questions.pstpl verfügbar.
*''completed.pstpl:'''' Diese Seite wird als letzte Seite angezeigt, wenn die Umfrageantworten gespeichert wurden und die Umfrage beendet ist. Es kann verwendet werden, um einen „Weiterleitungslink“ anzuzeigen, wie er im Umfrage-Setup festgelegt wurde.
*''endgroup.pstpl:'' Diese Datei schließt die Gruppe und kann zum Schließen aller in der geöffneten Tags verwendet werden startgroup.pstpl-Datei
*'''navigator.pstpl:''' Diese Datei enthält die Schaltflächen, mit denen Sie durch die Umfrage navigieren: „Weiter“, „Zurück“, „Zuletzt“, „Senden“, „Bisher speichern“. und der Link „Alles löschen“. Es wird auf allen Seiten außer der abgeschlossenen Seite verwendet.
*'''printanswers.pstpl:''' Diese Datei enthält den HTML-Wrapper, der für die Druckversion der Umfrage erforderlich ist.
*'''print_group.pstpl :''' Diese Datei ist dieselbe wie startgroup.pstpl und endgroup.pstpl, jedoch für die Druckversion der Umfrage.
*'''print_question.pstpl:''' Diese Datei ist dieselbe wie questions.pstpl , aber für die Druckversion der Umfrage.
*'''print_survey.pstpl:''' Diese Datei ist die gleiche wie Survey.pstpl, aber für die Druckversion der Umfrage.


==Template-Dateien==
=== CSS und Javascript===


The following template files are used to produce your public survey and must exist in any new template folder you create:
Zwei Dateien, die immer in einer Vorlage verwendet werden, sind template.css (für CSS) und template.js (für Javascript).
*'''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.
*'''{TEMPLATECSS}:''' Zeilen für Standard-CSS hinzufügen, template.css, und template-rtl.css für die RTL-Sprache.
*'''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)
*'''{TEMPLATEJS}:''' Fügen Sie Zeilen für Standard-Javascript-Dateien, template.js und alle für LimeSurvey benötigten JS-Dateien hinzu.
*'''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 und JavaScript==
=== Bootstrap verwenden===
LimeSurvey hat Bootstrap 3 eingebettet, sodass Sie alle Ihre Vorlagen mit den gut dokumentierten Bootstrap-Klassen gestalten können.
Weitere Informationen finden Sie im [https://getbootstrap.com Bootstrap Dokumentation].


Two files are allways used for template : template.css for css and template.js for javascript.
Das Plugin [https://github.com/flatlogic/awesome-bootstrap-checkbox Awesome-Bootstrap-Checkbox] ist ebenfalls enthalten. Damit können Sie die typischen Bootstrap-Farbklassen (Info, Warnung, Gefahr usw.) auch mit dem Suffix „-checkbox“ oder „-radio“ verwenden, Checkboxen und Radios jedoch nach Ihren Wünschen gestalten.
*'''{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===
==== Standard-CSS oder Javascript ersetzen====


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.
Einige Fragen verwenden bestimmte Dateien für Javascript oder CSS. Wenn Sie eine Funktion ersetzen müssen, verwenden Sie ein Kaskadensystem. Bei Javascript-Funktionen ist die zuletzt gelesene Funktion die verwendete Funktion.


==Other Template Files==
===Andere Vorlagendateien===


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.
Die Dateien „privacy.pstpl“, „invitationemail.pstpl“, „reminderemail.pstpl“ und „confirmationemail.pstpl“ werden von LimeSurvey nicht mehr verwendet, sondern standardmäßig stattdessen in den entsprechenden Sprachdateien festgelegt. Die E-Mail-Nachrichten können jetzt für jede Umfrage einzeln bearbeitet werden.


==Standard Pages==
===Standardseiten===


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.
Es gibt zehn Standardseiten, die ein Umfrageteilnehmer sehen kann, wenn er an der LimeSurvey-Anwendung teilnimmt oder darauf zugreift. Jede wird aus einer Reihe gemeinsamer „Template“-Dateien aus der „Template“ erstellt, die in den Einstellungen der Umfrage angegeben wurde. Die folgende Tabelle zeigt, welche Vorlagendateien beim Erstellen jeder dieser Seiten verwendet werden.


{| class="wikitable"
{| class="wikitable"
! '''Survey Pages:'''<br />'''Template Files'''!!Survey<br />List!!Welcome!!Question!!Completed!!Clear All!!Register!!Load!!Save!!Print<br />Answers!!Print<br />Survey
! '''Umfrageseiten/'''<br /> '''Vorlagendateien''!!Umfrage<br /> Liste!!Willkommen!!Frage!!Abgeschlossen!!Alles löschen!!Registrieren!!Laden!!Speichern!!Drucken<br /> Antworten!!Drucken<br /> Umfrage
|-
|-
|SurveyList||align="center" | [[File:check.gif]]|| || || || || || || || ||
|SurveyList||align="center" | [[Datei:check.gif]]|| || || || || || || || ||
|-
|-
|Welcome|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|Willkommen|| ||align="center" | [[Datei:check.gif]]|| || || || || || || ||
|-
|-
|Privacy|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|Datenschutz|| ||align="center" | [[Datei:check.gif]]|| || || || || || || ||
|-
|-
|Navigator|| ||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]|| || || || || || ||
|Navigator|| ||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]|| || || || || || ||
|-
|-
|Survey|| || ||align="center" | [[File:check.gif]]|| || ||align="center" | [[File:check.gif]]|| || || ||
|Umfrage|| || ||align="center" | [[Datei:check.gif]]|| || ||align="center" | [[Datei:check.gif]]|| || || ||
|-
|-
|StartGroup|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|StartGruppe|| || ||align="center" | [[Datei:check.gif]]|| || || || || || ||
|-
|-
|GroupDescription|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|Gruppenbeschreibung|| || ||align="center" | [[Datei:check.gif]]|| || || || || || ||
|-
|-
|Question<span style='color:red'>'''*'''</span>|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|Frage <span style='color:red'>'''*'''</span> || || ||align="center" | [[Datei:check.gif]]|| || || || || || ||
|-
|-
|EndGroup|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|EndGroup|| || ||align="center" | [[Datei:check.gif]]|| || || || || || ||
|-
|-
|Assessment|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|Bewertung|| || || ||align="center" | [[Datei:check.gif]]|| || || || || ||
|-
|-
|Completed|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|Abgeschlossen|| || || ||align="center" | [[Datei:check.gif]]|| || || || || ||
|-
|-
|ClearAll|| || || || ||align="center" | [[File:check.gif]]|| || || || ||
|ClearAll|| || || || ||align="center" | [[Datei:check.gif]]|| || || || ||
|-
|-
|Register|| || || || || ||align="center" | [[File:check.gif]]|| || || ||
|Registrieren|| || || || || ||align="center" | [[Datei:check.gif]]|| || || ||
|-
|-
|Load|| || || || || || ||align="center" | [[File:check.gif]]|| || ||
|Last|| || || || || || ||align="center" | [[Datei:check.gif]]|| || ||
|-
|-
|Save|| || || || || || || ||align="center" | [[File:check.gif]]|| ||
|Speichern|| || || || || || || ||align="center" | [[Datei:check.gif]]|| ||
|-
|-
|PrintAnswers|| || || || || || || || ||align="center" | [[File:check.gif]]||
|Antworten drucken|| || || || || || || || ||align="center" | [[Datei:check.gif]]||
|-
|-
|Print Survey || || || || || || || || || ||align="center" | [[File:check.gif]]
|Umfrage drucken || || || || || || || || || ||align="center" | [[Datei:check.gif]]
|-
|-
|Print Group || || || || || || || || || ||align="center" | [[File:check.gif]]
|Druckgruppe || || || || || || || || || ||align="center" | [[Datei:check.gif]]
|-
|-
|Print Question || || || || || || || || || ||align="center" | [[File:check.gif]]
|Frage drucken || || || || || || || || || ||align="center" | [[Datei:check.gif]]
|-
|-
|StartPage<br />EndPage<br />Template.css||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||  
|StartPage<br /> EndPage<br /> Template.css||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||align="center" | [[Datei:check.gif]]||  
|}
|}


<span style='color:red'>'''*'''</span>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:<syntaxhighlight lang="php" enclose="div"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight>And then add the corresponding closing tag to the end of question.pstpl:<syntaxhighlight lang="php" enclose="div"></div></syntaxhighlight>
<span style='color:red'>'''*'''</span> HINWEIS: In Version 1.90+ ersetzt dies Frage.pstpl UND Frage_start.pstpl. Wenn Sie eine alte benutzerdefinierte Vorlage verwenden, müssen Sie die folgende Zeile am Anfang von questions.pstpl hinzufügen: <syntaxhighlight lang="php"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight> Und fügen Sie dann das entsprechende schließende Tag am Ende von questions.pstpl hinzu:<syntaxhighlight lang="php"></div></syntaxhighlight>
 
<span style='color:red'>'''*'''</span> HINWEIS: In Version 1.91 und früher sind LimeSurvey-JS-Dateien nicht in der Vorlage enthalten. In Version 2 müssen Sie {TEMPLATEJS} in einer Ihrer Vorlagendateien verwenden, um den Link zur js-Datei hinzuzufügen. Sie können es in startpage.pstpl oder in endpage.pstpl hinzufügen. Sie können die Zeile {TEMPLATEURL}/template.js entfernen und müssen sie durch {TEMPLATEJS} ersetzen, um eine persönliche Vorlage zu aktualisieren.
 
===Der Dateikontrollabschnitt===
 
Im Fenster „Dateisteuerung“ auf der linken Seite können Sie auf eine der Vorlagendateien klicken, die zum Kompilieren der Seite verwendet werden. Sie können den „Bildschirmteil“, die JavaScript- und CSS-Dateien sehen. Der HTML-Code für diese Datei wird dann im Fenster „Aktuelle Bearbeitung“ in der Mitte angezeigt. Wenn die Vorlage bearbeitbar ist (abhängig von den Verzeichnisberechtigungen), können Sie beliebige Änderungen vornehmen und diese speichern.
 
<center>[[File:File Control Section.png|center]]</center>


<span style='color:red'>'''*'''</span>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==
Das Fenster „Andere Dateien“ zeigt eine Liste aller anderen Dateien aus dem Vorlagenverzeichnis. Auf der rechten Seite können Sie „Bilddateien (Ihre Bilder, Logos usw.) oder andere Dateien, die zum Erstellen Ihrer Vorlage benötigt werden, hochladen und auswählen“.


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:
Anstatt für jedes Bild einen Link zu verwenden, verwenden Sie die Feldzeichenfolge {TEMPLATEURL}. Also statt:


<syntaxhighlight lang="html4strict" enclose="div">img src='/limesurvey/templates/yourtemplate/mypicture.jpg'</syntaxhighlight>  
<syntaxhighlight lang="html4strict">img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'</syntaxhighlight>  
You can use:
Sie können {{NewIn|2.50}}:
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>
verwenden.<syntaxhighlight lang="html4strict"> img src='{TEMPLATEURL}files/mypicture.jpg'</syntaxhighlight>


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.
In LimeSurvey-Versionen vor 2.50 verwenden Sie:
<syntaxhighlight lang="html4strict"> img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>


<div class="simplebox">'''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.</div>
Unten auf dem Bildschirm wird ein „Beispiel“ der von Ihnen bearbeiteten Vorlagenseite angezeigt. Es gibt keine Möglichkeit, eine Vorlage aus dem Vorlageneditor zu löschen. Dies muss durch Zugriff auf das zugrunde liegende Verzeichnis und manuelles Löschen der Dateien von dort erfolgen. Sie haben auch die Möglichkeit, verschiedene Bildschirmauflösungen auszuwählen, um die Haptik und Optik der Vorlage besser beurteilen zu können.


==Location of template files==
<div class="simplebox">'''Hinweis:'' Die ausgelieferten Vorlagen können nicht mit dem Vorlageneditor bearbeitet werden. Wenn Sie sie ändern möchten, erstellen Sie zunächst eine Kopie und bearbeiten Sie die Kopie.</div>


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.
===Speicherort der Vorlagendateien===


To create a new template, use the according icon in the template editor.
LimeSurvey speichert jede der „Standard“-Vorlagen in einem eigenen Unterverzeichnis innerhalb des Verzeichnisses „/templates“, das zusammen mit den anderen öffentlichen Dateien von LimeSurvey im öffentlichen Verzeichnis aufbewahrt wird. Benutzerdefinierte Benutzervorlagen werden im Verzeichnis „/upload/templates“ gespeichert.


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.
Es sollte IMMER ein „Standard“-Verzeichnis im Vorlagenverzeichnis geben. Diese Vorlage wird standardmäßig und als Ersatz verwendet, wenn kein Vorlagenordner vorhanden ist oder nicht gefunden werden kann. Es wird standardmäßig installiert.


You can use any image files that you upload into the template management area with syntax like this:
Sie können alle Bilddateien verwenden, die Sie mit Hilfe dieser Syntax in den Vorlagenverwaltungsbereich hochladen:


<syntaxhighlight lang="php" enclose="div">{TEMPLATEURL}filename.xyz</syntaxhighlight>
<syntaxhighlight lang="php">{TEMPLATEURL}Dateiname.xyz</syntaxhighlight>


=Fragen stylen mit CSS=
==Fragen mit CSS gestalten==


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:
Das Gestalten von Fragen in CSS ist viel einfacher geworden. Jeder Fragetyp hat jetzt eine eindeutige Klasse. Die Pflichtfragen haben eine zusätzliche Pflichtklasse. Zum Beispiel für eine nicht obligatorische Frage:


<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question is mandatory
und wenn die Frage obligatorisch ist:


<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender mandatory">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender mandatory">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question is mandatory but the user didn't answer it or if there is validation on a question
und wenn die Frage obligatorisch ist, der Benutzer sie aber nicht beantwortet hat oder wenn es eine Bestätigung für eine Frage gibt:


<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender mandatory input-error">
<syntaxhighlight lang="php" enclose="div"><div id="question5" class="gender mandatory">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question has validation applied but the user hasn't answered correctly
und wenn auf die Frage eine Validierung angewendet wurde, der Benutzer jedoch nicht richtig geantwortet hat:


<syntaxhighlight lang="html4strict" enclose="div"><div id="question6" class="text-short input-error">
<syntaxhighlight lang="php" enclose="div"><div id="question5" class="gender mandatory">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


==Global classes for question part==
==Globale Klassen für Fragenteil==


This class are used for each question type. Some question type use only one or two class, but other can use much more.
Diese Klassen werden für jeden Fragetyp verwendet. Einige Fragetypen verwenden nur eine oder zwei Klassen, während andere möglicherweise viel mehr verwenden.


{| class="wikitable alternance"
{| class="wikitable alternance"
|+ Global classes
|+ Globale Klassen
|-
! Scope="col" | Klassenname
! Scope="col" | Teil
! Scope="col" | Fragetyp
! Scope="col" | Beispiele
! Scope="col" | Hinweis
|-
|-
! scope="col" | Class name
! Scope="Zeile" | .question {{ObsoleteIn|3.0}}
! scope="col" | Part
| Alle Fragenblock
! scope="col" | Question type
| Alle Fragetypen
! scope="col" | Examples
|<p class="question">, <ul class="question">, <table class="question">
! scope="col" | Note
|  
|-
|-
! scope="row" | .question
! Scope="Zeile" | .ls-answers {{NewIn|3.0}}
| All question block
| Alle Fragenblock
| All question type
| Alle Fragetypen
|&lt;p class="question">, &lt;ul class="question">, &lt;table class="question">
|<div class="ls-answers ">, <ul class="ls-answers ">, <table class="ls-answers">
|  
|  
|-
|-
! scope="row" | .subquestions-list
! Scope="Zeile" | .subquestions-list
| List of subquestion
| Liste der Unterfragen
| Multi choice question, array question type
| Multi-Choice-Frage, Array-Fragetyp
| &lt;ul class="subquestions-list">, &lt;table class="subquestions-list">
| <ul class="subquestions-list">, <table class="subquestions-list">
| .questions-list is used too
| .questions-list wird auch verwendet
|-
|-
! scope="row" | .answers-list
! Scope="Zeile" | .answers-list
| List of answers
| Liste der Antworten
| Single choice question, array question type, Multi input text question
| Single-Choice-Frage, Array-Fragetyp, Textfrage mit mehreren Eingaben
| &lt;ul class="answers-list">, &lt;table class="answers-list">
| <ul class="answers-list">, <table class="answers-list">
|  
|  
|-
|-
! scope="row" | .answer-item
! Scope="Zeile" | .answer-item
| The answer part: one answer
| Der Antwortteil: eine Antwort
| Single choice question, array question type, Multi input text question
| Single-Choice-Frage, Array-Fragetyp, Textfrage mit mehreren Eingaben
| &lt;li class="answer-item">, &lt;td class="answer-item">
| <li class="answer-item">, <td class="answer-item">
|
|
|-
|-
! scope="row" | .noanswer-item
! Scope="Zeile" | .noanswer-item
| The answer part for no answer
| Der Antwortteil für keine Antwort
| Single choice question, array question type
| Single-Choice-Frage, Array-Fragetyp
| &lt;li class="noanswer-item">, &lt;td class="noanswer-item">
| <li class="noanswer-item">, <td class="noanswer-item">
| No answer is an answer too, then have double class noanswer-item and answer-item
| Keine Antwort ist auch eine Antwort, dann haben Sie die Doppelklasse noanswer-item und answer-item
|-
|-
! scope="row" | .question-item
! Scope="Zeile" | .question-item
| The question part: one question
| Der Frageteil: eine Frage
| Multi text question, array question type
| Mehrtextfrage, Array-Fragetyp
| &lt;li class="question-item">, &lt;tr class="question-item">
| <li class="question-item">, <tr class="question-item">
| Some answer are question too, then we have a lot of class="question-item answer-item"
| Manche Antworten sind auch Fragen. Dann haben wir eine Menge class="question-item answer-item"
|-
|-
! scope="row" | .checkbox-list
! Scope="Zeile" | .button-list
| A list of checkbox
| Eine Liste von button
| Multi choice question, array number (checkbox) question type
| Ja, nein und Geschlechtsfrage
| &lt;ul class="checkbox-list">, &lt;tr class="checkbox-list">
| <ul class="button-list">
| Some question type have multi list class: like checkbox with comment : class="checkbox-list text-list"
|  
|-
|-
! scope="row" | .checkbox-item
! Scope="Zeile" | .button-item
| The answer part with a checkbox
| Der Antwortteil mit einem Button
| Multi choice question, array number (checkbox) question type
| Ja, nein und Geschlechtsfrage
| &lt;li class="checkbox-item">, &lt;td class="checkbox-item">
| <li class="button-item">
|
|
|-
|-
! scope="row" | .radio-list
! Scope="Zeile" | .checkbox-list
| A list of radio item
| Eine Liste mit Kontrollkästchen
| Single choice question, array question type
| Multi-Choice-Frage, Fragetyp Array-Nummer (Kontrollkästchen)
| &lt;ul class="radio-list">, &lt;tr class="radio-list">
| <ul class="checkbox-list">, <tr class="checkbox-list">
| Einige Fragetypen verwenden Multi-List-Klassen, z. B. Kontrollkästchen mit Kommentar: class="checkbox-list text-list"
|-
! Scope="Zeile" | .checkbox-array {{NewIn|3.0}}
| Ein Array von Kontrollkästchen
| Array (Zahlen) mit Checkbox-Option
| <table class="checkbox-list">
|
|-
! Scope="Zeile" | .checkbox-item
| Der Antwortteil mit einem Kontrollkästchen
| Multi-Choice-Frage, Fragetyp Array-Nummer (Kontrollkästchen)
| <li class="checkbox-item">, <td class="checkbox-item">
|
|
|-
|-
! scope="row" | .radio-item
! Scope="Zeile" | .radio-list
| The answer part with a radio
| Eine Liste der Radioelemente
| Single choice question, array question type
| Single-Choice-Frage, Array-Fragetyp (jede Zeile)
| &lt;li class="radio-item">, <td class="radio-item">
| <ul class="radio-list">, <tr class="radio-list">
|
|
|-
|-
! scope="row" | .text-list
! Scope="Zeile" | .radio-array {{NewIn|3.0}}
| A list of text input
| Ein Array von Radioelementen
| Multi text question type, array of text
| Array-Fragetyp
| &lt;ul class="text-list">, &lt;tr class="text-list">
| <table class="radio-array">
|
|
|-
|-
! scope="row" | .text-item
! Scope="Zeile" | .radio-item
| The answer part of a text input
| Der Antwortteil mit einem Radio
| Multi text question type, array of text
| Single-Choice-Frage, Array-Fragetyp
| &lt;li class="text-item">, <td class="text-item">
| <li class="radio-item">,<td class="radio-item">  
|
|
|-
|-
! scope="row" | .numeric-list
! Scope="Zeile" | .text-list
| A list of text input with numeric only answer
| Eine Liste mit Texteingaben
| Multi numeric question type, array of number
| Fragetyp mit mehreren Texten, Textarray
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
| <ul class="text-list">, <tr class="text-list">
|
|
|-
|-
! scope="row" | .numeric-item
! Scope="Zeile" | .text-item
| The answer part of a numeric input
| Der Antwortteil einer Texteingabe
| Multi numeric question type, array of number
| Fragetyp mit mehreren Texten, Textarray
| &lt;li class="numeric-item">, &lt;td class="numeric-item">
| <li class="text-item">,<td class="text-item">  
|
|
|-
|-
! scope="row" | .select-list
! Scope="Zeile" | .numeric-list
| A list of select
| Eine Liste von Texteingaben mit nur numerischer Antwort
| Array numbers, Dual scale array (select)
| Multinumerischer Fragetyp, Zahlenarray
| &lt;table class="select-list">
| <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .select-item
! Scope="Zeile" | .Nummernliste
| The answer part of a select
| Eine Liste von Texteingaben mit rein numerischer Antwort (jede Zeile)
| Array numbers, Dual scale array (select), single choice with select
| Multinumerischer Fragetyp, Zahlenarray
| &lt;p class="select-item">, &lt;td class="select-item">
| <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .hide
! Scope="Zeile" | .Zahlenarray {{NewIn|3.0}}
| Used for accessibility: hidden with css but read by screenreader
| Der Antwortteil einer numerischen Eingabe
| Short text question
| Array von Zahlen
| &lt;label class="hide">
| <table class="number-array">
| Can be used for other purpose
|
|-
|-
! scope="row" | .dontread
! Scope="Zeile" | .select-list {{ObsoleteIn|2.50}}
| Used for accessibility: not be read by screenreader
| Eine Liste von select
| Array question type
| Array-Nummern, Dual-Scale-Array (auswählen)
| &lt;th class="dontread">
| <table class="select-list">
|
|
|-
|-
! scope="row" | .checkbox
! Scope="Zeile" | .dropdown-list {{NewIn|2.50}}
| input[type=checkbox]
| Eine Liste von select
| Question with checkbox
| Array-Nummern, Dual-Scale-Array (auswählen) (jede Zeile)
| &lt;input type="checkbox" class="checkbox">
| <table class="dropdown-list">
| With modern browser: not needed but some old browser need this
|
|-
! Scope="Zeile" | .dropdown-array {{NewIn|3.0}}
| Ein Array von Dropdown
| Array-Nummern, Dual-Scale-Array (auswählen)
| <table class="dropdown-array">
|
|-
! Scope="Zeile" | .select-item {{ObsoleteIn|2.50}}
| Der Antwortteil eines select
| Array-Nummern, Dual-Scale-Array (Auswahl), Einzelauswahl mit Select
| <p class="select-item">, <td class="select-item">
|
|-
! Scope="Zeile" | .dropdown-item {{NewIn|2.50}}
| Der Antwortteil eines select
| Array-Nummern, Dual-Scale-Array (Auswahl), Einzelauswahl mit Select
| <p class="dropdown-item">, <td class="dropdown-item">
|
|-
! Scope="Zeile" | .hide {{ObsoleteIn|3.0}}
| Wird zur Barrierefreiheit verwendet: Mit CSS versteckt, aber vom Screenreader gelesen, seit 2.50: Sie können sr-only von Bootstrap
| aus verwenden Kurze Textfrage
| <label class="hide">
| Kann für andere Zwecke verwendet werden
|-
! Scope="Zeile" | .ls-js-hidden {{NewIn|3.0}}
| Wird verwendet, damit ein Teil ausgeblendet wird, wenn Javascript aktiviert ist
| Schaltfläche zum Beispiel
| <div class="ls-js-hidden">
| Der LimeSurvey-Kern hat es verwendet, aber Sie können es auch in Ihrer Vorlage verwenden
|-
! Scope="Zeile" | .ls-js-hidden-sr {{NewIn|3.0}}
| Wird zur Barrierefreiheit verwendet: Ausblenden, wenn js aktiviert ist, aber immer anzeigen, wenn der Benutzer einen Screenreader verwendet
| Schaltfläche zum Beispiel
| <a class="ls-js-hidden-sr">
| Knopf
|-
|-
! scope="row" | .radio
! Scope="Zeile" | .ls-no-js-hidden {{NewIn|3.0}}
| input[type=radio]
| Wird verwendet, um einen Teil auszublenden, wenn Javascript nicht aktiviert ist
| Question with radio
| Link
| &lt;input type="radio" class="radio">
| <a class="ls-no-js-hidden">
| With modern browser: not needed but some old browser need this
| Der LimeSurvey-Kern verwendet es für inaktive Links, wenn Javascript nicht aktiviert ist
|-
|-
! scope="row" | .text
! Scope="Zeile" | .ls-label-xs-visibility {{NewIn|3.0}}
| input[type=text]
| Die Beschriftung soll auf dem großen Bildschirm ausgeblendet, aber auf dem kleinen Bildschirm (ohne weitere Tabelle) und für den Screenreader angezeigt werden
| Question with input text, or textarea
| label
| &lt;textarea class="text">
| <label class="ls-no-js-hidden">
| Wird für die Beschriftung innerhalb der Tabellenzelle des Array-Fragetyps
|-
! verwendet. Scope="Zeile" | .ls-input-group-extra {{NewIn|3.0}}
| Gleiche Verwendung von Boostrap Input-Group-Addon, jedoch ohne Rahmen und Hintergrund.
| richtiges Suffix
| <div class="ls-input-group-extra">
| Wird für das rechte und linke Suffix verwendet (global)
|-
! Scope="Zeile" | .checkbox {{ObsoleteIn|3.0}}
| Eingabe[Typ=Kontrollkästchen]
| Frage mit Checkbox
| <input type="checkbox" class="checkbox">
| Mit modernem Browser: nicht erforderlich, aber einige alte Browser benötigen dies
|-
! Scope="Zeile" | .radio {{ObsoleteIn|3.0}}
| Eingabe[Typ=Radio]
| Frage mit Radio
| <input type="radio" class="radio">
| Mit modernem Browser: nicht erforderlich, aber einige alte Browser benötigen dies
|-
! Scope="Zeile" | .text
| Eingabe[Typ=Text]
| Frage mit Eingabetext oder Textbereich
| <textarea class="text">
|
|
|-
|-
! scope="row" | .answertext
! Scope="Zeile" | .answertext
| Array question type
| Array-Fragetyp
| Answer part of array question type
| Beantworten Sie einen Teil des Array-Fragetyps
| &lt;th class="answertext">
| <th class="answertext">
|
|
|-
|-
! scope="row" | .col-answers
! Scope="Zeile" | .col-answers
| Array question type
| Array-Fragetyp
| Column of answers
| Spalte mit Antworten
| &lt;col class="col-answers">
| <col class="col-answers">
|
|
|-
|-
! scope="row" | .odd .even
! Scope="Zeile" | .odd .even {{ObsoleteIn|2.50}}
| Array question type
| Array-Fragetyp
| Alternation for column
| Alternative für Spalte
| &lt;col class="odd">
| <col class="odd">
|
|
|-
|-
! scope="row" | .odd .even
! Scope="Zeile" | .array1 .array2 {{ObsoleteIn|3.0}}
| Array question type
| Array-Fragetyp
| Alternation for column
| Alternative für Zeile
| &lt;col class="odd">
| <tr class="array1">
|
|
|-
|-
! scope="row" | .array1 .array2
! Scope="Zeile" | .ls-odd .ls-even {{NewIn|3.0}}
| Array question type
| Array-Fragetyp
| Alternation for line
| Wechsel für Unterfrage und Y-Achse
| &lt;tr class="array1">
| <tr class="ls-odd">
|
|
|}
|}


=== Some example of question part with classes===
==== Einige Beispiele für Fragenteile mit Klassen====


'''text-short question type:'''<source lang="html4strict">
'''Text-Kurzfragetyp:''''<source lang="html4strict">
<p class="question answer-item text-item ">
<p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
</p>
</p>
</source>
</source>
'''Multiple short text'''<source lang="html4strict">
'''Mehrere Kurztexte''<source lang="html4strict">
<ul class="subquestions-list questions-list text-list">
<ul class="subquestions-list questions-list text-list">
   <li class="question-item answer-item text-item" id="javatbdSGQA">
   <li class="question-item answer-item text-item" id="javatbdSGQA">
Line 390: Line 501:
</ul>
</ul>
</source>
</source>
'''Array question type'''<source lang="html4strict">
'''Array-Fragentyp''''<source lang="html4strict">
<table class="question subquestion-list questions-list ">
<table class="question subquestion-list questions-list ">
<caption class="hide read">Some explanation for accessibility.</caption>
<caption class="hide read">Some explanation for accessibility.</caption>
Line 421: Line 532:
</table>
</table>
</source>
</source>
==Vollständige Liste der CSS-Klassen für Fragen==
===Die vollständige Liste der Fragenklassen===


{|
{|
|'''Question Type'''||'''Question Class'''||'''Question ID'''
|'''Fragetyp'''||'''Frageklasse'''||'''Frage-ID'''
|-
|-
|5 point choice||.choice-5-pt-radio||5
|5-Punkte-Auswahl||.choice -5-pt-radio||5
|-
|-
|Array (10 point choice)||.array-10-pt||B
|Array (10 Punkte Auswahl)||.array-10-pt||B
|-
|-
|Array (5 point choice)||.array-5-pt||A
|Array (5 Punkte Auswahl) ||.array-5-pt||A
|-
|-
|Array (Flexible Labels) dual scale||.array-flexible-duel-scale ||1
|Array (Flexible Labels) Dual-Skala||.array-flexible-duel-scale ||1
|-
|-
|Array (Increase, Same, Decrease)||.array-increase-same-decrease||E
|Array (Erhöhen, Gleich, Verringern)||.array-increase-same-decrease||E
|-
|-
|Array (Multi Flexible) (Numbers)||.array-multi-flexi ||:
|Array (Multi Flexi) (Zahlen)||.array-multi-flexi ||:!N !|-
|Array (Multi flexibel) (Text)||.array-multi-flexi-text||;
|-
|-
|Array (Multi Flexible) (Text)||.array-multi-flexi-text||;
|Array (Ja/Nein/Unsicher)||.array- ja-unsicher-nein||C
|-
|-
|Array (Yes/No/Uncertain)||.array-yes-uncertain-no||C
|Array (flexible Beschriftungen)||.array-flexible-row ||F
|-
|-
|Array (flexible labels)||.array-flexible-row ||F
|Array (flexible Beschriftungen) nach Spalte| |.array-flexible-column||H
|-
|-
|Array (flexible labels) by column||.array-flexible-column||H
|Boilerplate-Frage||.boilerplate||X
|-
|-
|Boilerplate question||.boilerplate||X
|Datum||.date||D
|-
|-  
|Date||.date||D
|Equation||.equation||*
|-
|-
|Gender||.gender||G
|Gender||.gender||G
|-
|-
|Huge free text||.text-huge||U
|Huge free text||.text-huge||U  
|-
|Language switch||.language||I
|-
|List (dropdown)||.list-dropdown||!
|-
|-
|List (radio)||.list-radio||L
|Sprachumschaltung||.Sprache||I
|-
|-
|List with comment||.list-with-comment||O
|Liste (Dropdown)||.list-dropdown||!
|-
|-
|Long free text||.text-long||T
|Liste (radio)||.list-radio||L
|-
|-
|Multiple numerical input||.numeric-multi||K
|Liste mit Kommentar||.list-with-comment||O
|-
|-
|Multiple options||.multiple-opt||M
|Langer Freitext||. text-long||T
|-
|-
|Multiple options with comments||.multiple-opt-comments||P
|Mehrfache numerische Eingabe||.numeric-multi||K
|-
|-
|Multiple short text||.multiple-short-txt||Q
|Mehrere Optionen||.multiple-opt||M
|-
|Mehrere Optionen mit Kommentaren||.multiple-opt-comments||P
|-
|-
|Numerical input||.numeric||N
|Mehrere Kurztexte||.multiple-short-txt||Q
|-! N!|Numerische Eingabe||.numeric||N
|-
|-
|Ranking||.ranking||R
|Ranking||.ranking||R
|-
|-
|Short free text||.text-short||S
|Kurzer Freitext||.text-short||S  
|-
|-
|Yes/No||.yes-no||Y
|Ja/Nein||.ja-nein||Y
|-
|-
|
|
|}
|}


==The full list of validation classes==
===Die vollständige Liste der Validierungsklassen===


<div class="simplebox">Note:  Prior to 1.92, only .mandatory and .input-error classes were available.</div>
<div class="simplebox">Hinweis: Vor 1.92 waren nur die Klassen .mandatory und .input-error verfügbar.</div>


These apply to the help and/or validation tip messages so that each type can be individually styled.
Diese gelten für die Hilfe- und/oder Validierungstippmeldungen, sodass jeder Typ individuell gestaltet werden kann.


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.
Die Optionen .hide-tip und .input-error interagieren standardmäßig, sodass Sie Validierungstipps ausblenden können. Sie erscheinen jedoch bei Validierungsfehlern und verschwinden wieder, wenn diese Fehler behoben werden.


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.
All dies ist darauf ausgelegt, Popup-Warnmeldungen überflüssig zu machen. Stattdessen können Tipps nach Bedarf angezeigt bzw. ausgeblendet werden und sind farblich gekennzeichnet, um anzuzeigen, ob die Antworten die Validierungskriterien erfüllen.


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.
Darüber hinaus können Sie beim ersten Besuch einer Seite mit nicht erfüllten Validierungskriterien die Tipps in einer ansprechenden Farbe kennzeichnen, um anzuzeigen, welche Validierungskriterien noch nicht erfüllt wurden. Zeigen Sie die Seite dann erneut mit einer kräftigeren Farbe an, wenn die Person die Seite mit verbleibenden Validierungsfehlern übermittelt.


{|
{|
|'''Purpose'''||'''CSS Class'''||'''Description'''
|'''Zweck'''||'''CSS-Klasse'''||'''Beschreibung'''
|-
|-
|Mandatory||.mandatory||the question is mandatory
|Mandatory||.mandatory||die Frage ist obligatorisch
|-
|-
|User input error||.input-error||the question had at least one validation error
|Benutzereingabefehler||.input-error||der Frage wurde mindestens ein Validierungsfehler hinzugefügt
|-
|-
|Hide Tip||.hide-tip||added if you use the hide_tip option
|Hide Tip||.hide-tip||hinzugefügt Wenn Sie die Option hide_tip verwenden
|-
|-
|Num answers||.em_num_answers||for for min_answers and max_answers
|Betrugstyp||.em_default||für den Standard-Tippsatz (numerischer Wert usw. …)
|-
|-
|Value range||.em_value_range||for min/max_num_value_n and multiflexible_min/max
|Anzahl der Antworten||.em_num_answers|| für für min_answers und max_answers
|-
|-
|Sum range||.em_sum_range||for min/max/equals_num_value
|Wertebereich||.em_value_range||für min/max_num_value_n und multiflexible_min/max
|-
|-
|Regex validation||.em_regex_validation||for regular-expression validation of the question
|Summenbereich||.em_sum_range||für min/ max/equals_num_value
|-
|-
|Question-level validation function||.em_q_fn_validation||for the em_validation_q option
|Regex-Validierung||.em_regex_validation||für die reguläre Ausdrucksvalidierung der Frage
|-
|-
|Subquestion-level validation function||.em_sq_fn_validation||for the em_validation_sq option
|Validierungsfunktion auf Fragenebene||.em_q_fn_validation||für die em_validation_q option
|-
|-
|Other comment mandatory||.em_other_comment_mandatory||for other_comment_mandatory option - shows when "other" is selected but associated comment is missing.
|Validierungsfunktion auf Unterfrageebene||.em_sq_fn_validation||für die em_validation_sq-Option
|-
|Anderer Kommentar obligatorisch||.em_other_comment_mandatory||für other_comment_mandatory-Option – zeigt wann „Sonstiges“ ist ausgewählt, aber der zugehörige Kommentar fehlt.
|-
|-
|
|
|}
|}


==Importing styles into your custom template==
===Stile in ihre benutzerdefinierte Vorlage importieren===


The custom question styles are near the bottom of each template's CSS file and start with:<syntaxhighlight lang="php" enclose="div">/* --------------------------- START: Question styles  ------------------------------ */</syntaxhighlight>
Die benutzerdefinierten Fragestile befinden sich am Ende der CSS-Datei jeder Vorlage und beginnen mit:<syntaxhighlight lang="php"> /* ------------- START: Fragestile ----------------- ------------- */</syntaxhighlight>


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.
Wenn Sie Ihre eigene benutzerdefinierte Vorlage gestalten, sollten Sie in der Lage sein, alles nach der obigen Vorlage aus „templates/default/template.css“ (für tabellenbasierte Layouts) oder „/templates/limespired/template“ zu kopieren. css'' (für CSS-basierte Layouts) in Ihr eigenes Stylesheet ohne Auswirkungen auf Ihre anderen Stile.


==Internet Explorer conditional style sheets==
===Bedingte Stylesheets für Internet Explorer===


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.
Aufgrund der deutlichen Diskrepanzen bei der Darstellung zwischen IE6 und IE7 und den anderen Browsern sind für jede Vorlage spezielle IE-Conditional-Stylesheets enthalten.


<source lang="html4strict" enclose="div">
<source lang="html4strict">
<!--[if IE]>
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]-->
<![endif]-->  
<!--[if lt IE 7]>
<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]-->
<![endif]-->  
<!--[if IE 8]>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->
<![endif]-->  
</source>
</source>


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.
Sie sollten den obigen Code in Ihre „startpage.pstpl“ und Kopien beider IE-Stylesheets aus entweder „/templates/default/“ oder „/templates/limespired“ für das Tabellen-Basislayout und einbinden CSS-basiertes Layout bzw.


<div class="simplebox">'''Note:''' If you copy the styles into your own style sheet you will almost certainly need to tweak them.</div>
<div class="simplebox">'''Hinweis:'' Wenn Sie die Stile in Ihr eigenes Stylesheet kopieren, müssen Sie sie mit ziemlicher Sicherheit anpassen.</div>


===Alternative solution for Internet explorer===
====Alternative Lösung für Internet Explorer====


You can put conditional class for body in startpage.pstpl, and use this class in your template.css. This method is used in citronade template. Adding a js / no-js class to to have javascript / no javascript system.
Sie können eine bedingte Klasse für den Text in startpage.pstpl einfügen und diese Klasse in Ihrer template.css verwenden. Diese Methode wird in der Citronade-Vorlage{{ObsoleteIn|2.06}} verwendet. Hinzufügen einer js-/no-js-Klasse, um ein Javascript-/kein Javascript-System zu haben.


<source lang="html4strict"><!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<source lang="html4strict"><!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
Line 555: Line 668:
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->  
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script></source>
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script></source>


And in template.css use
Und in template.css verwenden Sie:


<source lang="css">.ie6{/*specific for internet explorer 6*/}
<source lang="css">.ie6{/*spezifisch für Internet Explorer 6*/}
.ielt8{/*specific for internet explorer 6 and 7*/}
.ielt8{/*spezifisch für Internet Explorer 6 und 7*/}
.ie{/*specific for all internet explorer */}</source>
.ie{/*spezifisch für alle Internet Explorer */}</source>


== Right-to-Left (RTL) Languages and justify==
=== Rechts-nach-Links-Sprachen (RTL) und 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.
Der Texteditor in LimeSurvey ist in der Lage, RTL-Text zu formatieren. Allerdings zeigt der Editor selbst die RTL-Sprache im Blocksatz von links nach rechts an. Dies ist lediglich ein Problem mit der Editor-Anzeige. Die RTL und die begründete Frage oder der Text werden in Ihrer Umfrage oder in der Vorschau von rechts nach links korrekt angezeigt, auch wenn sie ausgerichtet sind.


==Schlüsselwörter==
===Schlüsselwörter===
 
{{Veraltet|3.0}}


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


{|class=wikitable
{|class=wikitable
!'''Keyword'''!!'''Template files'''!!'''Description'''
|'''<center>Ausdruck</center>'''||'''<center>wird ersetzt mit</center>'''
|-
|-
|{SURVEYNAME}||All Files||The survey title
|{SURVEYNAME}||Der Name der Umfrage
|-
|-
|{SURVEYDESCRIPTION}||All Files||The survey description
|{SURVEYDESCRIPTION}||Der Beschreibung der Umfrage
|-
|-
|{WELCOME}||All files (mainly for welcome.pstpl)||The survey 'welcome' text
|{WELCOME}||Dem Willkommenstext der Umfrage
|-
|-
|{PERCENTCOMPLETE}||survey.pstpl||A small graph showing the percentage of the survey completed
|{PERCENTCOMPLETE}||Ein grafischer Balken, der den Prozentsatz anzeigt, wie viel der Umfrage schon beantwortet wurde
|-
|-
|{GROUPNAME}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Displays the current group name
|{GROUPNAME}||Dem Namen der aktuellen Gruppe
|-
|-
|{GROUPDESCRIPTION}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Displays the current group description
|{GROUPDESCRIPTION}||Die Beschreibung der aktuellen Gruppe
|-
|-
|{NUMBEROFQUESTIONS}||welcome.pstpl||Displays the total number of questions in the survey (just the number)
|{QUESTION}||Den Text der aktuellen Frage
|-
|-
|{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".
|{QUESTION_CODE}||Den Fragencode der aktuellen Frage
|-
|-
|{CHECKJAVASCRIPT}||All files (mainly for welcome.pstpl)||Warning message when end-user browser have javascript disabled
|{ANSWER}||Die Anwort(en) zur aktuellen Frage
|-
|-
|{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}
|{THEREAREXQUESTIONS}||Wird ersetzt mit der Textzeile: "Ihre Umfrage besteht aus X Fragen."
|-
|-
|{ANSWER}||question.pstpl, print_question.pstpl||presents the answer form for the current question
|{NUMBEROFQUESTIONS}||Die Anzahl der Fragen in ihrer Umfrage
|-
|-
|{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)
|{TOKEN}||Der entsprechende Probandenschlüssel
|-
|-
|{QUESTIONHELP}||question.pstpl, print_question.pstpl||Displays help text (predefined tip for question type) for the current question
|{SID}||DieID der aktuellen Umfrage
|-
|-
|{QUESTION_CLASS}||question.pstpl, print_question.pstpl||unique class for each question type. (To be included in the question's wrapping tag.)
|{QUESTIONHELP}||Dem Hilfetext zur aktuellen Frage (in einem Java-Skript-Popup)
|-
|-
|{QUESTION_CODE}||question.pstpl, print_question.pstpl||Displays the current question code
|{QUESTIONHELPPLAINTEXT}||Der Ausfüllhilfe zur aktuellen Frage
|-
|-
|{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.)
|{NAVIGATOR}||Die "Vor >>" und "<< Zurück" Buttons
|-
|-
|{QUESTION_HELP}||question.pstp, question_start.pstpl||Displays the user defined help text for the current question
|{SUBMITBUTTON}||Dem "Absenden" Button
|-
|-
|{QUESTION_TYPE_HELP}||print_question.pstp||Displays the user defined help text for the current question
|{COMPLETED}||Dem Text "Survey is completed and saved" aus der Übersetzung
|-
|-
|{QUESTION_INPUT_ERROR_CLASS}||question.pstp, question_start.pstpl||Provides a class if there was user input error
|{URL}||Der URL/URL Titel für die Umfrage
|-
|-
|{QUESTION_ID}||print_question.pstp||Provides a unique ID for each question to allow styling for specific questions
|{PRIVACY}||Fügt den Inhalt der Datei privacy.pstpl aus der Vorlage ein
|-
|-
|{QUESTION_TEXT}||question.pstp, print_question.pstp, question_start.pstpl||Displays the text for the current question
|{PRIVACYMESSAGE}||Die "Privacy Message" aus der Übersetzung
|-
|-
|{QUESTION_MANDATORY}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated 'Mandatory' text for the current question
|{CLEARALL}||DerURL für "Beenden und Antworten verwerfen"
|-
|-
|{QUESTION_MAN_CLASS}||question.pstpl, print_question.pstpl||class if a question is mandatory. (To be included in the question's wrapping tag.)
|{TEMPLATEURL}||Der URL zum aktuellen Vorlagen-Verzeichnis (nützlich um Logos und Bilder in eine Vorlage einzubauen)
|-
|-
|{QUESTION_MAN_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated 'Mandatory' help message text for the current question
|{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.
|-
|-
|{QUESTION_NUMBER}||print_question.pstpl||Incremental count of questions.
|{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.
|-
|-
|{QUESTION_VALID_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated valid help message text for the current question
|{TOKEN:FIRSTNAME}||Wenn die Antworten der Umfrage nicht anonym sind, mit dem Vornamen des entsprechenden Probanden (aus der Probandentabelle)
|-
|-
|{QUESTION_SCENARIO}||print_question.pstp||Prints out the 'scenario' text for conditional questions.
|{TOKEN:LASTNAME}||Wenn die Antworten der Umfrage nicht anonym sind, mit dem Nachnamen des entsprechenden Probanden (aus der Probandentabelle)
|-
|-
|{NAVIGATOR}||navigator.pstpl||Displays navigation buttons (next, prev, last)
|{TOKEN:EMAIL}||Wenn die Antworten der Umfrage nicht anonym sind, mit der E-Mail-Adresse des entsprechenden Probanden (aus der Probandentabelle)
|-
|-
|{CLEARALL}||All files (but intended for navigator.pstpl)||Displays the "Exit and Clear Results" link
|{TOKEN:ATTRIBUTE_1}||Wenn die Antworten der Umfrage nicht anonym sind, mit dem Attribut 1 des entsprechenden Probanden (aus der Probandentabelle)
|-
|-
|{SUBMITBUTTON}||submit.pstpl||Displays the final submit button
|{TOKEN:ATTRIBUTE_2}||Wenn die Antworten der Umfrage nicht anonym sind, mit dem Attribut 2 des entsprechenden Probanden (aus der Probandentabelle)
|-
|-
|{COMPLETED}||completed.pstpl||Displays the 'completed' message for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
|{ANSWERSCLEARED}||Dem Text "Antworten zurückgesetzt" aus der Übersetzung
|-
|-
|{URL}||completed.pstpl||Displays the survey 'url' and 'url text'
|{RESTART}||URL um mit der Umfrage erneut beginnen zu können
|-
|-
|{PRIVACY}||submit.pstpl||Displays privacy information when survey is anonymous
|{CLOSEWINDOW}||URL zum Schließen des Fensters
|-
|-
|{PRIVACYMESSAGE}||privacy.pstpl||The privacy message is shown if you set your survey to be anonymous. [[Translating LimeSurvey|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.
|{REGISTERERROR}||Zeigt eine Fehlermeldung auf der Registrierungsseite (z.B.:: "Sie müssen eine gültige E-Mail-Adresse angeben")
|-
|-
|{TEMPLATEURL}||All Files||The URL to the current template location (useful for referencing image files in your template)
|{REGISTERMESSAGE1}||Dem Text "Sie müssen registriert sein, um an dieser Umfrage teilzunehmen." aus der Übersetzung
|-
|-
|{SUBMITCOMPLETE}||endpage.pstpl||The statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button
|{REGISTERMESSAGE2}||Informationen zur Registrierung aus der Übersetzung
|-
|-
|{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"
|{REGISTERFORM}||Das aktuelle Formular zur Registrierung, hängt davon ab, ob das Feld attribute_1 oder attribute_2 verwendet wird.
|-
|-
|{TOKEN:FIRSTNAME}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users first name from the tokens table
|{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.
|-
|{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==
===Eingabe/Schaltflächen===
 
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 <div class='new_name'> and then define a css for that new_name class.


==Styling the progress bar==
Jedem „Eingabe“-Typ in einer Umfrage wurde ein eigener Klassenname zugewiesen, sodass Sie Ihrer Datei „startpage.pstpl“ CSS hinzufügen und eine gewisse Kontrolle über das Erscheinungsbild von Formularschaltflächen und Eingaben haben können. Diese Klassennamen lauten wie folgt:
*'''submit''' (Senden-Schaltflächen)
*'''text''' (Texteingaben – für kurzen Freitext, Datum und numerischen Typ)!N !*'''answertext''' (Text der Antworten)
*'''radio''' (Optionsschaltflächen)
*'''checkbox''' (Kontrollkästchen)
*'' 'select''' (Auswahl-/Listenfelder)
*'''textarea''' (Große Texteingaben – für langen Freitext)
*'''clearall''' (Die „Beenden- und Löschen-Umfrage " link)
*'''rank''' (Die Frage zum Rangstil. Legt nicht die Farbe des Auswahlfelds oder der Textfelder fest, ermöglicht aber das Ändern der Hintergrundfarbe, Textfarbe, Größe usw ., für den Rest der Rangfolgefrage)
*'''graph''' (Die Diagrammtabelle „Prozentsatz abgeschlossen“)
*''innergraph''' (Die Tabelle innerhalb der Diagrammtabelle – this enthält den 0%- und 100%-Text. Verwenden Sie dies, um die Größe dieses Textes zu ändern.)
*'''Frage''' (Allgemeine Einstellungen für jede Frage, die in einer Tabelle angezeigt wird. Im Allgemeinen sollten Sie dies verwenden, um Stellen Sie sicher, dass die Schriftgröße und -farbe mit denen übereinstimmen, die Sie an anderer Stelle als Standard verwendet haben.)
*'''mandatory''' (Pflichtfragen)
*'''input-error''' (Benutzer Eingabefehler – wenn ein Benutzer bei einer Pflichtfrage oder einer Frage mit Validierung einen Fehler gemacht hat)
*''Array1'' und ''Array2'' (Diese beiden Stile werden bei der Darstellung des Bereichs abwechselnd verwendet Antworten auf eine Frage vom Typ Array. Dadurch können Sie für diese Fragetypen eine wechselnde Hintergrundfarbe festlegen. '''Array1''' wird auch für die Spaltenüberschriften in diesen Fragetypen verwendet)
*'''errormandatory''' (Legt die Farbe und den Stil der Fehlermeldung „Diese Frage ist obligatorisch“ fest)
*'''warningjs''' (Legt die Farbe und den Stil der Warnmeldung fest, die angezeigt wird, wenn im Browser des Teilnehmers Javascript deaktiviert ist)


'''Before version 1.87:'''
Es gibt auch einige Elemente, auf die über die ID des Elements („#ID“ in CSS) zugegriffen werden kann:
*''surveycontact''' (Die auf der Startseite angezeigte Kontaktnachricht)! N!*'''tokenmessage'' (wird für Nachrichten innerhalb der Umfrage verwendet, z. B. die Fehlermeldung „Sitzung abgelaufen“)


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.
Da Sie alle HTML-Aspekte bearbeiten können, gibt es keinen Grund, Ihre Vorlagen mit einem
zu umgeben.<syntaxhighlight lang="php"><div class='new_name'></div></syntaxhighlight>
und definieren Sie dann ein CSS für diese neue_Name-Klasse.


'''Version 1.87 and newer:'''
==Den Fortschrittsbalken gestalten==


The progress bar appearance can be modified with CSS.
Das Erscheinungsbild des Fortschrittsbalkens kann mit CSS geändert werden.


To change the background colour of the bar, add something like the following to the end of your template.css file.
Um die Hintergrundfarbe der Leiste zu ändern, fügen Sie am Ende Ihrer custom.css-Datei etwas wie das Folgende hinzu (Beispiel für ein fruchtiges Design):


<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-header {
<syntaxhighlight lang="php">.fruity .progress-bar {
 background-color: #3300FF;
Hintergrundfarbe: #3300FF;
}</syntaxhighlight>
}</syntaxhighlight>


To change the border colour of the bar, add something like the following to the end of your template.css file.
Um die Rahmenfarbe der Leiste zu ändern, fügen Sie am Ende Ihrer custom.css-Datei etwas wie das Folgende hinzu (Beispiel für ein fruchtiges Design):


<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-content,
<syntaxhighlight lang="php">.fruity .progress-bar {
#progress-wrapper .ui-widget-header {
Rand: 1 Pixel durchgehend #FF0000;
 border: 1px solid #FF0000;
}</syntaxhighlight>
}</syntaxhighlight>


==Advanced Features Available to Developers==
==Erweiterte Funktionen für Entwickler verfügbar==
 
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===
LimeSurvey hat einige benutzerdefinierte Patches integriert, die einige spezielle Änderungen ermöglichen. Diese sehr erweiterten Funktionen erfordern (im Allgemeinen) Änderungen an der zugrunde liegenden Codebasis von LimeSurvey und sollten sorgfältig durchgeführt werden, um keine Sicherheitslücken zu schaffen.


<div class="simplebox">Deprecated: This function is not available anymore in version 2.0 or later</div>
====Unterstützung für Ihre eigenen Javascript-Funktionen====


To be able to integrate LimeSurvey into another CMS, use the following options in '''config.php''':
Einige Benutzer müssen möglicherweise Javascript auf den Umfrageseiten ausführen, aber der Aufruf von „checkconditions()“ im BODY-Element machte dies unmöglich. Dieser Aufruf wurde durch eine kleine JavaScript-Funktion im HEAD ersetzt, die vor dem Aufruf nach der Existenz von „checkconditions()“ und „template_onload()“ sucht. Auf diese Weise kann ein Vorlagenautor seine eigene Funktion „template_onload()“ im HEAD erstellen, die die Standardfunktion ersetzt.


// Set $embedded to true and specify the header and footer functions if the survey is to be displayed embedded in a CMS
*Deaktivieren Sie den XSS-Filter – setzen Sie unter „Globale Einstellungen -> Sicherheit“ „HTML für XSS filtern“ auf „Nein“.
*Geben Sie Ihr Skript in die Quelle einer Frage oder Gruppenbeschreibung ein.


<nowiki>
{{Hinweis|Weitere Einzelheiten finden Sie im Abschnitt [[Problemumgehungen: Bearbeiten einer Umfrage zur Laufzeit mit Javascript#So verwenden Sie Skripte (z. B. JavaScript usw.) in LimeSurvey|Abschnitt zur Problemumgehung]].}}
$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
</nowiki>


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===
==Tipps & Tricks==


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.
===Sprachspezifisches Element===


'''Version 1.87 and newer:'''
Wenn Sie in einer Umfrage einen sprachspezifischen Satz haben möchten, beispielsweise eine Hilfe am Ende jeder Seite, können Sie einem Satz eine .pstl-Datei hinzufügen und ihn für die andere Sprache ausblenden. Wenn wir es in der template.css verstecken, können wir den Pseudo-Selektor :lang verwenden, aber wir verwenden eine Klasse für eine bessere Kompatibilität.
*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 [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|workaround section]].


=Videos on Templates=
Nachfolgend finden Sie zwei Hilfesätze in Französisch und Englisch. Fügen Sie dies in endpage.pstpl ein:


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.
<syntaxhighlight lang="php"><div class="fr" lang="fr">Bitte wenden Sie sich direkt an 000000</div>
<div class="en" lang="en"> Für Hilfe rufen Sie bitte 000000 an</div></syntaxhighlight>


[http://youtu.be/Uk3FQyDTIY0 LimeSurvey training video - template customization]
und in template.css:


=Tips & Tricks=
<syntaxhighlight lang="php">.lang-fr .en{display:none}
 
==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:
 
<syntaxhighlight lang="php" enclose="div"><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></syntaxhighlight>
 
and in template.css
 
<syntaxhighlight lang="php" enclose="div">.lang-fr .en{display:none}
.lang-en .fr{display:none}</syntaxhighlight>
.lang-en .fr{display:none}</syntaxhighlight>


You can use it to for other sentence in your question before 1.92 ( in 1.92, there are better solutions).
===Ändern Sie das Layout der Umfrageseite===
 
==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.
Nach dem Bearbeiten und Speichern einer Vorlage gilt diese nur dann für eine Umfragelistenseite, wenn sie in den Einstellungen der Umfrage ausgewählt wird. Um es zur Standardvorlage zu machen, gehen Sie zur Registerkarte „Allgemein“ in den „Globalen Einstellungen“ Ihrer LimeSurvey-Installation und wählen Sie die gewünschte Vorlage aus. Ab diesem Zeitpunkt verwenden alle Vorlagen, die die Option „Standard“ als Vorlage verwenden, sowie diejenigen, die neu erstellt werden, die neu ausgewählte Standardvorlage.


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';
Um Ihre aktuelle Vorlage für diese Seite zu verwenden, müssen Sie die entsprechende Einstellung unter „Globale Einstellungen“ ändern. In älteren Versionen kann diese Änderung durch Bearbeiten der Einstellung $defaulttemplate in der Konfigurationsdatei vorgenommen werden: Kopieren Sie diese Einstellung von config-defaults.php nach config.php, wodurch config-defaults.php überschrieben wird, und bearbeiten Sie diese Einstellung in <code lang="html">$defaulttemplate = 'yourtemplatename';</code> .


==Import/Export of templates: Mac users==
===Import/Export von Vorlagen: Mac-Benutzer===


Mac users, please note: Mac OSX default archive utility may have problems with zip folders "generated on the fly".
<u>Mac-Benutzer</u> beachten bitte, dass das standardmäßige Archivierungsdienstprogramm von Mac OSX möglicherweise Probleme mit ZIP-Ordnern hat, die „on the fly“ generiert werden.


a work around is to unix'es unzip from the command line:
Eine Problemumgehung besteht darin, Unix-Dateien über die Befehlszeile zu entpacken:


$ unzip template.zip -d template
$ unzip template.zip -d template


Archive: template.zip
Archiv: template.zip


 inflating: template/startpage
aufblasen: Vorlage/Startseite


 inflating: ...
Aufblasen: ...


or scripts in their mac-compiled counterparts:
Eine weitere Problemumgehung besteht darin, Skripte in ihren auf dem Mac kompilierten Gegenstücken zu verwenden.


http://homepage.mac.com/roger_jolly/software/
===Verwenden Sie dieselbe Vorlage mit unterschiedlichen Logos===


==Changing your templates traffic light from red to green==
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:


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).
<syntaxhighlight lang="php"><img src="{TEMPLATEURL}files/logoImage-{SID}.png"></syntaxhighlight>


GO to file directory ie file manager, find templates directory.
=== Benutzerdefiniertes Favicon anzeigen===


1 change permission on eg"vallendar" (or any template of your choice) directory to read 777
Ein Favicon ist das kleine Symbol, das Sie in Ihrer Browser-Adresszeile, Ihrem Lesezeichen oder auf dem Tab für Ihre LimeSurvey-Umfrage sehen. Sie können Ihr eigenes Icon auf folgende Weise anzeigen:
#Erstellen Sie ein neue Favicon - googlen Sie einfach, um viele Webseiten zu finden, die Ihnen dabei helfen.
#Benennen Sie die Datei "favicon.ico" und laden Sie diese in Ihrem Template als zusätzliche Datei hoch.
#Fügen Sie den folgenden Code zu Ihrer "startpage.pstpl" for dem </head> Tag hinzu.


2 voila! the red traffic light on "vallendar" is now green.
<syntaxhighlight lang="html4strict"><link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"></syntaxhighlight>


3 NOTE: to restrict access for safety, when finished editing template files, change all templates files back to what they were eg 644
=== Unterschiedliches Erscheinungsbild für Umfrage-/Fragenseiten===


==Replacing the help icon==
Wenn Sie möchten, dass LimeSurvey das Erscheinungsbild jeder zweiten Seite (d.h., gerader und ungerader Umfrageseiten) ändert, können Sie die Klasse „.page-odd“ in Ihrer CSS-Datei verwenden, um das Erscheinungsbild ungerader Seiten zu ändern.


When a question help text is shown then an help.gif image is used from the default template folder.
Ein Beispiel aus der Standardvorlage von LimeSurvey 1.91+:


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.
<syntaxhighlight lang="php">
 
.page-odd table.question-group {
==Replacing an existing logo==
Hintergrundfarbe: #D2F2D3;
 
'''Note''': Before uploading a new logo always delete the old, existing one!
 
1. To edit the logo go to the &bdquo;<u>template.css</u>&rdquo; file which you can find it here:
 
[[File:t1.PNG|200px]]
 
2. Click the search button to find occurrences of logo related styles.
 
[[File:2.png|200px]]
 
3. Search for <u>#logo</u>
 
[[File:3.PNG|200px]]
 
4. Edit the main style file
 
You will see something similar to:
 
[[File:t4.PNG|500px]]
 
 
If you want to change the image just replace logo.gif with another image link. Example: (<u>logo.png</u> or <u>logo.jpg</u>).
 
 
If you want change the image size adjust width and height (in pixels) like this:
 
<syntaxhighlight lang="php" enclose="div">width:100px; height:100px;</syntaxhighlight>
 
==Adding your own logo==
 
1. Find and open the &bdquo;<u>startpage.pstpl</u>&rdquo; template file.
 
[[File:5.PNG|200px]]
 
 
2. After the <source lang="html4strict" ><body ... ></source> tag add this line to &bdquo;<u>startpage.pstpl</u>&rdquo;:
<source lang="html4strict"><img id="page_logo" src="{TEMPLATEURL}logo.png"><br></source>
 
 
3. To add logo go to &bdquo;<u>template.css</u>&rdquo;, you can find it here (see in screen):
 
[[File:6.PNG|500px]]
 
 
3.1 Then go to the end of the main &bdquo;<u>template.css</u>&rdquo; style file.
 
 
3.2 To align the logo add...
 
 
'''If you want the logo to be placed at left side:'''
 
<syntaxhighlight lang="php" enclose="div">#page_logo{
   float:left;
}</syntaxhighlight>
}</syntaxhighlight>


Wenn Sie gerade und ungerade Seiten nicht unterscheiden möchten, suchen Sie alle Instanzen von „.page-odd“ in template.css und entfernen Sie diese Stile.


'''If you want the logo to be placed at right side:'''
===Erstellen Sie einen vertikalen Trennrahmen für ein Dual-Scale-Array===


<syntaxhighlight lang="php" enclose="div">#page_logo{
Um einen vertikalen Trennrahmen für ein Dual-Scale-Array zu erstellen, können Sie die folgenden Zeilen zu Ihrer '''template.css''-Datei hinzufügen.
   float:right;
}</syntaxhighlight>


<syntaxhighlight lang="php">
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
border-right:solid 1px #00A8E1;
}
</syntaxhighlight>


'''If you want to center the logo'''
Mit „header_separator“ wird das Trennzeichen für den Header „td“ angesprochen. Der „dual_scale_separator“ wird verwendet, um die Trennspalte im Dual-Scale-Array anzusprechen.


<syntaxhighlight lang="php" enclose="div">#page_logo{
===Hinzufügen Ihres eigenen Logos zur Umfrageliste===
   display: block;
   margin-left: auto;
   margin-right: auto;
}</syntaxhighlight>


==Use the same template with different logos==
# Bitte öffnen Sie zunächst den Theme-Editor für das Theme, das Sie verwenden möchten. [[File:OpenThemeEditor.jpg]]
# Wir empfehlen die Verwendung von Fruity, es ist derzeit unser bestes Theme.
# Erweitern Sie dann das Thema und geben Sie ihm einen Namen, den Sie wiedererkennen. [[File:ExtendTheme.jpg]]
# In der folgenden Ansicht können Sie das Logo hochladen, das Sie verwenden möchten. [[File:UploadFileTheme.jpg]]
# Wählen Sie im Dropdown-Menü „Bildschirm“ in der oberen rechten Ecke den Editor-Bildschirm „Umfrageliste“ aus. [[File:OpenScreenSurveyList.jpg]]
# Wählen Sie dann „layout_survey_list.twig“ im Menü auf der linken Seite. [[File:EditLayoutSurveyListTwig.jpg]]
# Scrollen Sie im Editor zu Zeile 126 und ändern Sie den markierten Teil in den Dateinamen des Bildes, das Sie zuvor in das Theme hochgeladen haben. [[File:ChangeSurveyListHeaderImageEditor.jpg]]
# Speichern Sie Ihre Datei. [[File:ThemeEditorSaveChanges.jpg]]
# Ändern Sie das Standardthema in Ihr erweitertes Thema. [[Datei:ChangeDefaultTheme.jpg]]


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:
=== Logo in der Mitte der Umfrageseite ausrichten===
Dieses Beispiel gilt für die Vorlage „extends_fruity“. Für andere Vorlagen kann das erforderliche CSS unterschiedlich sein.
# Melden Sie sich im Admin-Bereich von LimeSurvey an
# Navigieren Sie zum Theme-Editor: Konfiguration > Themes
# Suchen Sie in der Liste nach „LimeSurvey Fruity Theme“ und klicken Sie auf „ Schaltfläche „Theme-Editor“
# Klicken Sie in der Dateiliste links unten auf der Seite auf „custom.css“
# Kopieren Sie das folgende CSS in diese Datei und klicken Sie auf „Änderungen speichern“.


<syntaxhighlight lang="php" enclose="div"><img src="{TEMPLATEURL}logoImage-{SID}.png"></syntaxhighlight>
<syntaxhighlight lang="css">
.navbar-fixed-top > div.navbar-header {
Breite: 100 % !important;
}


==Remove the default help to all question (hide_tip)==
.navbar-fixed-top > div.navbar-header > div {
Breite: 100 % !important;
}


There are 3 solutions to remove the default help:
.navbar-fixed-top > div.navbar-header > div > img {
# like a [[Advanced question settings#hide_tip|hide_tip attribute]] but for all question and survey.
margin: 0 auto 0 auto !important;
# 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
</syntaxhighlight>


<syntaxhighlight lang="php" enclose="div">span.questionhelp{display:none;}</syntaxhighlight>


== 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:
==Benutzerdefinierte Fragenansichten {{NewIn|3.0}}==
#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


<syntaxhighlight lang="html4strict" enclose="div"><link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">
<div class="simplebox">'''Hinweis:'' Dies ist eine vorübergehende Funktion, die in Zukunft durch das Frageobjekt ersetzt werden soll (es wird sehr einfach sein, benutzerdefinierte Ansichten in das Frageobjekt zu verschieben). Es ist standardmäßig deaktiviert.</div>
<link rel="icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon"></syntaxhighlight>


== Different appearance for survey-/question-pages==
Ab Version 2.5 können Sie vorlagenspezifische benutzerdefinierte Ansichten für Fragen und einige der darin enthaltenen Elemente erstellen. Dies ist nützlich, wenn Sie das HTML-Layout eines bestimmten Fragetyps für eine oder mehrere Umfragen ändern möchten.


(''Version 1.91 and newer'')
*In application/config/config.php suchen Sie nach „config“=>array und fügen diese Zeile zum Array hinzu: „allow_templates_to_overwrite_views“=>1
*In /{your_template}/config.xml setzen Sie „overwrite_question_views“ auf true
*Kopieren Sie application/views/survey/* nach template/{your_view_directory}/survey/
*Beachten Sie, dass Sie nur die Dateien kopieren müssen, die Sie ändern möchten, die Dateistruktur jedoch dieselbe bleiben muss wie in Bewerbung/Ansichten/Umfrage/


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.
==Fügen Sie benutzerdefinierte CSS- oder JavaScript-Dateien für template== ein


example from default template of LimeSurvey 1.91+
Ab Version 2.50 können Sie die Datei config.xml verwenden, um Plugin-Dateien automatisch zu laden.


<syntaxhighlight lang="php" enclose="div">
*Laden Sie Ihre Dateien in den Vorlagenordner /css oder /scripts hoch
.page-odd table.question-group {
*Fügen Sie in /{your_template}/config.xml die Dateipfade hinzu<css> oder<js> Blöcke, etwa so:<syntaxhighlight lang="xml"><css>  
 background-color: #D2F2D3;
<filename> css/jquery-ui-custom.css</filename>
}</syntaxhighlight>
<filename> css/bootstrap-slider.css</filename>


To '''not''' differentiate even and odd pages at the (default) template find all instances of ''.page-odd'' in template.css and remove those styles.
<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
<filename> css/flat_and_modern.css</filename>


==Create a vertical separator  border for dual scale array==
<filename>css/template.css</filename>


To create a vertical separator border for a dual scale array you can add the following lines to your '''template.css'''-file.
<filename>css/myCustomPlugin.css</filename>
</css>
<js>
<filename> scripts/template.js</filename>
<filename> scripts/bootstrap-slider.js</filename>


<syntaxhighlight lang="php" enclose="div">
<filename>scripts/myCustomPlugin.js</filename>
table.question thead td.header_separator,
</js>
table.question tbody td.dual_scale_separator
{
   border-right:solid 1px #00A8E1;
}
</syntaxhighlight>
</syntaxhighlight>


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.
==Klassendefinitionen (für Entwickler)==


==Hide the survey contact message shown on the start page/survey list==
===Antwortliste===
{|class=wikitable
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
|arrays/5point || Ein || tr
|-
|arrays/10point|| B|| tr
|-
|arrays/array || F || tr
|-
|Arrays/Spalte || H || tr und col
|-
|arrays/dualscale || 1 || tr
|-
|arrays/increasesamedecrease || E || tr
|-
|arrays/yesnouncertain || C || tr
|-
|Geschlecht || G || div und ul
|-
|list_with_comment || O || div
|-
|ranking || R || ul und div
|-
|yesno || Y || ul und div
|-
|ranking_advanced || R || ul und div
|-
|listradio || L || div
|-
|5pointchoice || 5 || ul
|-
|multiplechoice || M || div
|-
|}


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:


<syntaxhighlight lang="php" enclose="div">
===radio-list===
{|class=wikitable
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
| janein || Y || ul
|-
|Geschlecht || G || ul
|-
|arrays/yesnouncertain || C || tr
|-
|arrays/increasesamedecrease || E || tr
|-
|arrays/dualscale || 1 || tr
|-
|arrays/5point || Ein || Tabelle und tr
|-
|arrays/10point || B || tr
|-
|arrays/array || F || tr
|-
|Arrays/Spalte || H || col
|-
|listradio || L || div
|-
|list_with_comment || O || div gefolgt von ul
|-
|}


$('#surveycontact').hide(); //Hides the survey contact message
===radio-item===
{|class=wikitable
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
|arrays/yesnouncertain || C || td
|-
|5pointchoice || 5 || li
|-
|arrays/10point || B || td
|-
|arrays/5point || Ein || td
|-
|arrays/array || F || td
|-
|Arrays/Spalte || H || td
|-
|arrays/dualscale || 1 || td
|-
|arrays/increasesamedecrease || E || td
|-
|Geschlecht || G || li
|-
|listradio || L || li
|-
|janein || Y || li
|-
|listradio || L || li und div
|-
|image_select-listradio || L || li und div
|-
|list_with_comment || 0 || li
|-
|}


</syntaxhighlight>
===list-group===
{|class=wikitable
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
|janein || Y || ul
|-
|5pointchoice || 5 || ul
|-
|Geschlecht || G || ul
|-
|ranking || R || ul
|-
|ranking_advanced || R || ul und div
|-
|question_index_group_buttons || || div
|-
|question_index_questions_buttons || || div
|-
|}


==Remove the survey contact message shown on error messages==
===list-group-horizontal===
{|class=wikitable
!'''Frage'''!!'''Fragetyp'''!!'''Elemente''' ! N!|-
|janein || Y || ul
|-
|5pointchoice || 5 || ul
|-
|Geschlecht || G || ul
|-
|}


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:
===list-unstyled===
{|class=wikitable
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
|list_with_comment || 0 || ul
|-
|listradio|| L || ul
|-
|multiplechoice|| M || ul
|-
|multiplechoice_with_comments|| P || ul
|-
|multiplenumeric|| K || ul
|-
|multipleshorttext|| Q || ul
|-
|ranking|| R || ul
|-
|ranking_advanced|| R || ul
|-
|bootstrap_buttons_multi|| M || ul
|-
|image_select-multiplechoice|| M || ul
|-
|inputondemand/multipleshorttext || Q || ul
|-
|register_error|| || ul
|-
|register_message|| || ul
|-
|layout_survey_list || || ul
|-
|load|| || ul
|-
|save|| || ul
|-
|captcha|| || ul
|-
|}


<syntaxhighlight lang="php" enclose="div">
===select-list===
removeContactAdressFromMessage(); //Removes the survey contact message from error messages
{|class=wikitable
</syntaxhighlight>
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
|Rangliste|| R || ul
|-
|ranking_advanced|| R || ul
|-
|}


and add the following function to your *template.js* file
===checkbox-item===
{|class=wikitable
!''Frage'''!!''Fragetyp'''!!'''Elemente'''
|-
|multiflexi (Array-Nummern)|| : || td
|-
|multiplechoice|| M || li
|-
|multiplechoice_with_comments|| P || div
|-
|image_select-listradio|| L || li
|-
|image_select-multiplechoice|| M || li und div
|-
|navigator|| || span
|-
|}


<syntaxhighlight lang="php" enclose="div">
===checkbox-text-item===
function removeContactAdressFromMessage()
{|class=wikitable
{
!'''Frage'''!!'''Fragetyp'''!!'''Elemente''' ! N!|-
if ($('#tokenmessage').length > 0)
|multiplechoice_with_comments|| P || li
   {
|-
   var oldMessage = $('#tokenmessage').html();
|multiplechoice|| M || li
   var indexContact = oldMessage.indexOf('Bitte kontaktieren');
|-
   var newMessage = oldMessage.substr(0, indexContact);
|image_select-multiplechoice|| M || li
   $('#tokenmessage').html(newMessage);
|-
   }
}
</syntaxhighlight>


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"
 
<syntaxhighlight lang="php" enclose="div"><span class="en">New label</span><span class="fr">Nouveau label</span></syntaxhighlight>
 
At the template.css of your template (at /limesurvey/upload/templates/<yourtemplatename>/template.css) add:


<syntaxhighlight lang="php" enclose="div">html:lang(en) .fr{display:none}
[[Category:Theme]]
html:lang(fr) .en{display:none}</syntaxhighlight>
[[Category:Twig]]

Latest revision as of 07:17, 31 July 2023

Other languages:

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 drei Vorlagen ausgeliefert. Diese initialen Vorlagen werden durch Verzeichnisse innerhalb des LimeSurvey-Installationsverzeichnisses "/themes/survey/" 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.


Seit LimeSurvey 2.50 verwendet die Theme-Engine Bootstrap 3 als CSS-Framework. Da es sich bei Bootstrap 3 um ein Standard-Framework handelt, finden Entwickler im Internet jede Menge Dokumentationen, Tutorials und Foren-Threads dazu.


Seit LimeSurvey 3 verwendet die Designvorlage-Engine Twig, sodass die Designvorlage-Entwickler die Logik des Umfrage-Renderings auf sichere und einfache Weise ändern können. Twig ersetzt das alte System von Ersatzschlüsselwörtern, das in den vorherigen Versionen verwendet wurde. Die Logik, die verwendet wurde, um den HTML-Code der Schlüsselwörter zu generieren, ist jetzt in den Ansichten der Designvorlage verfügbar.


Ausschnitt aus dem Vanilla-Thema: 

 <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> 
 {# HINWEIS: Wenn Sie das Aussehen der Frage anpassen möchten, verwenden Sie ein Fragenthema #}
 {{ eine Frage.antwort | roh }}
</div>

Designvorlagen, bei denen es sich um HTML- und Twig-Code handelt, neigen dazu, die Positionierung und Art des anzuzeigenden Textes und ähnliche strukturelle Merkmale der Seite zu definieren. Sie verweisen oft auf andere Dateien oder schließen diese ein. Die meisten von ihnen verweisen auf eine gemeinsame CSS-Datei (Cascading Style Sheets), die Schriftart, Farbe, Größe, Hintergrund und ähnliche Parameter definiert, die allen Seiten in der Umfrage gemeinsam sind. Stylesheets verweisen auf HTML-class-Parameter, die den verschiedenen Objekttypen im HTML-Code zugeordnet sind. Dadurch kann das Stylesheet definieren, wie jede der vielen Arten von Text oder anderen Objekten angezeigt wird, die an mehreren Stellen erscheinen können. Für jeden Fragetyp in LimeSurvey gibt es eindeutige Klassen, die eine detaillierte Kontrolle über das Erscheinungsbild der einzelnen geben. Bilddateien wie Logos oder spezielle Fortschrittsbalken-Konstruktoren können ebenfalls in der Designdatei referenziert werden. Schließlich werden spezielle Schlüsselwörter in geschweiften Klammern durch Text ersetzt, der in der Umfrage für jeden Sprachübersetzungskorrespondenten definiert ist (z. B. der „Umfragetitel“ oder der „Fragetext“ für jede definierte Sprache).

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

Eine neue Desigvorlage erstellen

Um ein neues Designvorlage erstellen (oder ein bestehendes Theme bearbeiten) zu können, benötigen Sie Benutzerberechtigung zum Bearbeiten von Vorlagen in LimeSurvey sowie die Berechtigung zum Bearbeiten der Dateien im zugrunde liegenden Betriebssystem System, das Ihre LimeSurvey-Installation hostet.

Warnhinweis: Wenn Sie Designvorlagen ändern, können Sie auch alle bereits bestehenden Umfragen Ihrer LimeSurvey-Installation beeinflussen. Designs sind eine erweiterte Funktion, die Erfahrung und HTML-Kenntnisse erfordert.

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/themes/survey/neues_template erstellen. Von dort aus können Sie Ihren Text-Editor zum manuellen Bearbeiten der Template-Dateien benutzen.

Berechtigungshinweis: Auf Unix/Linux-Systemen gehören diese Themendateien der Gruppe und dem Benutzer, auf dem der Webserver läuft (kann für einige Systeme "www" sein). Stellen Sie also sicher, dass Sie die erforderlichen Berechtigungen zum Bearbeiten dieser Dateien haben. Wenn Sie sie speichern, stellen Sie sicher, dass sie den Besitzer nicht ändern! Auf diese Weise können Sie bei Bedarf weiterhin die Weboberfläche zur Themenbearbeitung verwenden.


Eine Reihe von „öffentlichen“ Elementen von LimeSurvey können durch eine Reihe von Designvorlagen angepasst werden. Der nächste Abschnitt enthält eine sehr kurze Erläuterung dieser Vorlagen.

Template:Hinweis

Der LimeSurvey-Designeditor

Theme-Editor: Konfiguration > Themes> Theme-Editor Der Theme-Editor ist nur für Benutzer verfügbar mit der Berechtigung „Vorlagen“ und für Superadministratoren.


  Achtung : Ein nicht korrekt aufgebautes Thema kann dazu führen, dass eine Umfrage (die die entsprechende Vorlage verwendet) nicht mehr funktionsfähig ist.



Mit dem Theme-Editor von LimeSurvey können Sie die Inhalte Ihrer Themes online bearbeiten. So starten Sie den Theme-Editor: Klicken Sie im Menü „Konfiguration“ auf „Themen“ und dann auf die Schaltfläche „Themen-Editor“ neben dem Theme, das Sie bearbeiten oder erweitern möchten.


Die Schaltfläche zum Zugriff auf den Theme-Editor für das Bootswatch-Theme


Auf der Seite „Vorlageneditor“ können Sie die Vorlage auswählen, die Sie bearbeiten/ansehen möchten.



Folgende Optionen stehen zur Verfügung:


  • 'Erstellen: Ermöglicht das Erstellen einer neuen Vorlage. Um nicht bei Null anzufangen, wird die Vorlage „default“ kopiert.
  • Import: Ermöglicht den Import einer Vorlage aus einer ZIP-Datei.
  • Export : Ermöglicht das Exportieren der aktuellen Vorlage in eine ZIP-Datei.
  • Kopieren: Ermöglicht das Erstellen einer neuen Vorlage durch Kopieren der aktuellen.
  • Umbenennen: Ermöglicht Ihnen, den Namen der Vorlage zu ändern. Es wird im Allgemeinen nach dem Kopieren oder Importieren einer Vorlage verwendet.
  • Vorlage: Eine Dropdown-Liste, die alle verfügbaren Vorlagen anzeigt, die sich in Ihrer LimeSurvey-Installation befinden.
  • Bildschirm: Eine Dropdown-Liste, mit der Sie auswählen können, welche bestimmte Umfrageseite dieser Vorlage Sie anzeigen möchten.
  • Zurück zum Admin-Bereich.

Eine Vorlage importieren/exportieren/kopieren

Wenn Sie eine Vorlage „exportieren“, wird ein ZIP-Archiv mit allen Vorlagendateien erstellt (.pstpl-Dateien, Bilder, CSS-Dateien, etc.). Sie können die exportierte ZIP-Datei mithilfe der Importfunktion in eine andere LimeSurvey-Installation „importieren“ oder das Archiv manuell in eine andere LimeSurvey-Installation kopieren und in die entsprechende Vorlage extrahieren.

Am besten verwenden Sie jedoch die Import-/Export-/Kopierfunktionen für LimeSurvey-Vorlagen im Vorlageneditor.

Seitenstruktur/Vorlagenverwendung

  • ''Die Willkommensseite: startpage.pstpl, Welcome.pstpl, Privacy.pstpl, Navigator.pstpl, Endpage.pstpl
  • „Die Fragenseiten:“ startpage.pstpl, Survey.pstpl, startgroup.pstpl, groupdescription.pstpl, questions.pstpl, endgroup.pstpl, endpage.pstpl
  • “ „Die letzte Seite:“ startpage .pstpl, Beurteilung.pstpl, abgeschlossen.pstpl, endpage.pstpl

Vorlagendateien

Die folgenden Vorlagendateien werden zum Erstellen Ihrer öffentlichen Umfrage verwendet und müssen in jedem neuen Vorlagenordner vorhanden sein, den Sie erstellen:

  • startpage.pstpl: Erstellt den Anfang jeder HTML-Seite. Es beginnt beim „<head> „-Tag und sollte nicht das „“ enthalten.<html> "-Tag. Dieser „Alleranfang“ einer Standard-HTML-Seite wird von den Skripten geschrieben. Bitte stellen Sie sicher, dass Ihre startpage.pstpl-Dateien einen enthalten<body> Schild. Auch wenn viele Browser keine strikte Einhaltung der W3-HTML-Standards erfordern, muss das LimeSurvey-Skript ein Tag finden, um bestimmte Javascript-Elemente auszuführen. Es kommt nicht häufig vor, dass in der Datei startpage.pstpl viele „Schlüsselwörter“ verwendet werden. Möglicherweise möchten Sie jedoch {SURVEYNAME} in den Titel einfügen. Die Datei startpage.pstpl kann Code enthalten, der in der entsprechenden Datei endpage.pstpl endet. Sie können beispielsweise eine Tabelle in dieser Datei starten und die Tabelle in der Datei endpage.pstpl schließen. Die Dateien startpage.pstpl und endpage.pstpl umschließen jede mögliche von LimeSurvey verwendete Seite.
  • survey.pstpl: Diese Vorlage ist die zweite, die auf den meisten Seiten verwendet wird und bietet Platz für den Namen der Umfrage und Beschreibung. Für diese Vorlage gibt es keine entsprechende „schließende“ Vorlage, und anschließend sollten Sie alle in dieser Vorlagendatei geöffneten Tags schließen (d. h.: Lassen Sie hier keine Tabelle offen, da es sonst keinen Ort zum Schließen gibt).
  • ' welcome.pstpl: Diese Vorlage wird nur im Begrüßungsbildschirm verwendet (der sich auch auf der Hauptseite für „All-in-one“-Umfragen befindet). Hiermit können Sie den Begrüßungstext und weitere Informationen, die in der Einleitung enthalten sein sollten, ausdrucken. Wie bei der Datei „survey.pstpl“ gibt es keine entsprechende „schließende“ Vorlage, daher sollten alle in dieser Vorlagendatei geöffneten Tags ebenfalls geschlossen werden.
  • startgroup.pstpl: Diese Vorlage kann Folgendes bereitstellen eine „Zusammenfassung“ für Fragen innerhalb einer Gruppe. Es verfügt über eine passende Vorlage „endgroup.pstpl“, mit der alle geöffneten Tags in dieser Datei geschlossen werden können, sodass Sie darin eine Tabelle öffnen können.
  • groupdescription.pstpl: Diese Vorlagendatei ist Wird verwendet, um eine Beschreibung einer Gruppe anzuzeigen. Bitte beachten Sie, dass Sie in den Umfrageeinstellungen (Zugriff auf die „Präsentations- und Navigationseinstellungen“, indem Sie auf die Registerkarte „Präsentation“ klicken) festlegen können, ob die Gruppenbeschreibung angezeigt werden soll oder nicht. Wenn nicht, ist diese Datei überhaupt nicht enthalten.
  • question.pstpl: Diese Datei enthält die Frage-, Antwort- und Hilfetextabschnitte Ihrer Umfrage. In den Umfragen „Gruppe für Gruppe“ und „All in One“ wird diese Vorlage bei jeder Frage wiederholt. Hierfür gibt es keine entsprechende Abschlussdatei und alle Tags sollten geschlossen werden.
  • question_start.pstpl: Diese Datei enthält die einzelnen Elemente, die am Anfang einer Frage gefunden werden. Es ist über das Schlüsselwort {QUESTION} in „question.pstpl“ eingebunden. Es soll Vorlagendesignern mehr Kontrolle über das Layout einer Frage ermöglichen. Diese Vorlage befindet sich außerhalb des normalen Vorlagensystems und wurde ersetzt (ab LimeSurvey 1.87). Alle Schlüsselwörter aus dieser Vorlage sind jetzt direkt in questions.pstpl verfügbar.
  • completed.pstpl:'' Diese Seite wird als letzte Seite angezeigt, wenn die Umfrageantworten gespeichert wurden und die Umfrage beendet ist. Es kann verwendet werden, um einen „Weiterleitungslink“ anzuzeigen, wie er im Umfrage-Setup festgelegt wurde.
  • endgroup.pstpl: Diese Datei schließt die Gruppe und kann zum Schließen aller in der geöffneten Tags verwendet werden startgroup.pstpl-Datei
  • navigator.pstpl: Diese Datei enthält die Schaltflächen, mit denen Sie durch die Umfrage navigieren: „Weiter“, „Zurück“, „Zuletzt“, „Senden“, „Bisher speichern“. und der Link „Alles löschen“. Es wird auf allen Seiten außer der abgeschlossenen Seite verwendet.
  • printanswers.pstpl: Diese Datei enthält den HTML-Wrapper, der für die Druckversion der Umfrage erforderlich ist.
  • print_group.pstpl : Diese Datei ist dieselbe wie startgroup.pstpl und endgroup.pstpl, jedoch für die Druckversion der Umfrage.
  • print_question.pstpl: Diese Datei ist dieselbe wie questions.pstpl , aber für die Druckversion der Umfrage.
  • print_survey.pstpl: Diese Datei ist die gleiche wie Survey.pstpl, aber für die Druckversion der Umfrage.

CSS und Javascript

Zwei Dateien, die immer in einer Vorlage verwendet werden, sind template.css (für CSS) und template.js (für Javascript).

  • {TEMPLATECSS}: Zeilen für Standard-CSS hinzufügen, template.css, und template-rtl.css für die RTL-Sprache.
  • {TEMPLATEJS}: Fügen Sie Zeilen für Standard-Javascript-Dateien, template.js und alle für LimeSurvey benötigten JS-Dateien hinzu.

Bootstrap verwenden

LimeSurvey hat Bootstrap 3 eingebettet, sodass Sie alle Ihre Vorlagen mit den gut dokumentierten Bootstrap-Klassen gestalten können. Weitere Informationen finden Sie im Bootstrap Dokumentation.

Das Plugin Awesome-Bootstrap-Checkbox ist ebenfalls enthalten. Damit können Sie die typischen Bootstrap-Farbklassen (Info, Warnung, Gefahr usw.) auch mit dem Suffix „-checkbox“ oder „-radio“ verwenden, Checkboxen und Radios jedoch nach Ihren Wünschen gestalten.

Standard-CSS oder Javascript ersetzen

Einige Fragen verwenden bestimmte Dateien für Javascript oder CSS. Wenn Sie eine Funktion ersetzen müssen, verwenden Sie ein Kaskadensystem. Bei Javascript-Funktionen ist die zuletzt gelesene Funktion die verwendete Funktion.

Andere Vorlagendateien

Die Dateien „privacy.pstpl“, „invitationemail.pstpl“, „reminderemail.pstpl“ und „confirmationemail.pstpl“ werden von LimeSurvey nicht mehr verwendet, sondern standardmäßig stattdessen in den entsprechenden Sprachdateien festgelegt. Die E-Mail-Nachrichten können jetzt für jede Umfrage einzeln bearbeitet werden.

Standardseiten

Es gibt zehn Standardseiten, die ein Umfrageteilnehmer sehen kann, wenn er an der LimeSurvey-Anwendung teilnimmt oder darauf zugreift. Jede wird aus einer Reihe gemeinsamer „Template“-Dateien aus der „Template“ erstellt, die in den Einstellungen der Umfrage angegeben wurde. Die folgende Tabelle zeigt, welche Vorlagendateien beim Erstellen jeder dieser Seiten verwendet werden.

'Umfrageseiten/
Vorlagendateien		 Umfrage
Liste		 Willkommen Frage Abgeschlossen Alles löschen Registrieren Laden Speichern Drucken
Antworten		 Drucken
Umfrage
SurveyList Datei:check.gif
Willkommen Datei:check.gif
Datenschutz Datei:check.gif
Navigator Datei:check.gif Datei:check.gif
Umfrage Datei:check.gif Datei:check.gif
StartGruppe Datei:check.gif
Gruppenbeschreibung Datei:check.gif
Frage * Datei:check.gif
EndGroup Datei:check.gif
Bewertung Datei:check.gif
Abgeschlossen Datei:check.gif
ClearAll Datei:check.gif
Registrieren Datei:check.gif
Last Datei:check.gif
Speichern Datei:check.gif
Antworten drucken Datei:check.gif
Umfrage drucken Datei:check.gif
Druckgruppe Datei:check.gif
Frage drucken Datei:check.gif
StartPage
EndPage
Template.css		 Datei:check.gif Datei:check.gif Datei:check.gif Datei:check.gif Datei:check.gif Datei:check.gif Datei:check.gif Datei:check.gif Datei:check.gif

* HINWEIS: In Version 1.90+ ersetzt dies Frage.pstpl UND Frage_start.pstpl. Wenn Sie eine alte benutzerdefinierte Vorlage verwenden, müssen Sie die folgende Zeile am Anfang von questions.pstpl hinzufügen: 

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

Und fügen Sie dann das entsprechende schließende Tag am Ende von questions.pstpl hinzu:

</div>

* HINWEIS: In Version 1.91 und früher sind LimeSurvey-JS-Dateien nicht in der Vorlage enthalten. In Version 2 müssen Sie {TEMPLATEJS} in einer Ihrer Vorlagendateien verwenden, um den Link zur js-Datei hinzuzufügen. Sie können es in startpage.pstpl oder in endpage.pstpl hinzufügen. Sie können die Zeile {TEMPLATEURL}/template.js entfernen und müssen sie durch {TEMPLATEJS} ersetzen, um eine persönliche Vorlage zu aktualisieren.

Der Dateikontrollabschnitt

Im Fenster „Dateisteuerung“ auf der linken Seite können Sie auf eine der Vorlagendateien klicken, die zum Kompilieren der Seite verwendet werden. Sie können den „Bildschirmteil“, die JavaScript- und CSS-Dateien sehen. Der HTML-Code für diese Datei wird dann im Fenster „Aktuelle Bearbeitung“ in der Mitte angezeigt. Wenn die Vorlage bearbeitbar ist (abhängig von den Verzeichnisberechtigungen), können Sie beliebige Änderungen vornehmen und diese speichern.


Das Fenster „Andere Dateien“ zeigt eine Liste aller anderen Dateien aus dem Vorlagenverzeichnis. Auf der rechten Seite können Sie „Bilddateien (Ihre Bilder, Logos usw.) oder andere Dateien, die zum Erstellen Ihrer Vorlage benötigt werden, hochladen und auswählen“.


Anstatt für jedes Bild einen Link zu verwenden, verwenden Sie die Feldzeichenfolge {TEMPLATEURL}. Also statt: 

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

Sie können (New in 2.50 ):

verwenden.

 img src='{TEMPLATEURL}files/mypicture.jpg'

In LimeSurvey-Versionen vor 2.50 verwenden Sie: 

 img src='{TEMPLATEURL}mypicture.jpg'

Unten auf dem Bildschirm wird ein „Beispiel“ der von Ihnen bearbeiteten Vorlagenseite angezeigt. Es gibt keine Möglichkeit, eine Vorlage aus dem Vorlageneditor zu löschen. Dies muss durch Zugriff auf das zugrunde liegende Verzeichnis und manuelles Löschen der Dateien von dort erfolgen. Sie haben auch die Möglichkeit, verschiedene Bildschirmauflösungen auszuwählen, um die Haptik und Optik der Vorlage besser beurteilen zu können.

'Hinweis: Die ausgelieferten Vorlagen können nicht mit dem Vorlageneditor bearbeitet werden. Wenn Sie sie ändern möchten, erstellen Sie zunächst eine Kopie und bearbeiten Sie die Kopie.

Speicherort der Vorlagendateien

LimeSurvey speichert jede der „Standard“-Vorlagen in einem eigenen Unterverzeichnis innerhalb des Verzeichnisses „/templates“, das zusammen mit den anderen öffentlichen Dateien von LimeSurvey im öffentlichen Verzeichnis aufbewahrt wird. Benutzerdefinierte Benutzervorlagen werden im Verzeichnis „/upload/templates“ gespeichert.

Es sollte IMMER ein „Standard“-Verzeichnis im Vorlagenverzeichnis geben. Diese Vorlage wird standardmäßig und als Ersatz verwendet, wenn kein Vorlagenordner vorhanden ist oder nicht gefunden werden kann. Es wird standardmäßig installiert.

Sie können alle Bilddateien verwenden, die Sie mit Hilfe dieser Syntax in den Vorlagenverwaltungsbereich hochladen: 

{TEMPLATEURL}Dateiname.xyz

Fragen mit CSS gestalten

Das Gestalten von Fragen in CSS ist viel einfacher geworden. Jeder Fragetyp hat jetzt eine eindeutige Klasse. Die Pflichtfragen haben eine zusätzliche Pflichtklasse. Zum Beispiel für eine nicht obligatorische Frage: 

<div id="question5" class="gender">
...
</div>

und wenn die Frage obligatorisch ist: 

<div id="question5" class="gender mandatory">
...
</div>

und wenn die Frage obligatorisch ist, der Benutzer sie aber nicht beantwortet hat oder wenn es eine Bestätigung für eine Frage gibt: 

<div id="question5" class="gender mandatory">
...
</div>

und wenn auf die Frage eine Validierung angewendet wurde, der Benutzer jedoch nicht richtig geantwortet hat: 

<div id="question5" class="gender mandatory">
...
</div>

Globale Klassen für Fragenteil

Diese Klassen werden für jeden Fragetyp verwendet. Einige Fragetypen verwenden nur eine oder zwei Klassen, während andere möglicherweise viel mehr verwenden.

Globale Klassen
Klassenname Teil Fragetyp Beispiele Hinweis
.question (Obsolete since 3.0) Alle Fragenblock Alle Fragetypen

,

    ,
    .ls-answers (New in 3.0 ) Alle Fragenblock Alle Fragetypen
    ,
      ,
      .subquestions-list Liste der Unterfragen Multi-Choice-Frage, Array-Fragetyp
        ,
        .questions-list wird auch verwendet
        .answers-list Liste der Antworten Single-Choice-Frage, Array-Fragetyp, Textfrage mit mehreren Eingaben
          ,
          .answer-item Der Antwortteil: eine Antwort Single-Choice-Frage, Array-Fragetyp, Textfrage mit mehreren Eingaben
        • ,
          • .noanswer-item Der Antwortteil für keine Antwort Single-Choice-Frage, Array-Fragetyp
        • ,
          		• Keine Antwort ist auch eine Antwort, dann haben Sie die Doppelklasse noanswer-item und answer-item
          .question-item Der Frageteil: eine Frage Mehrtextfrage, Array-Fragetyp
        • ,
          • Manche Antworten sind auch Fragen. Dann haben wir eine Menge class="question-item answer-item"
          .button-list Eine Liste von button Ja, nein und Geschlechtsfrage
          .button-item Der Antwortteil mit einem Button Ja, nein und Geschlechtsfrage
          • .checkbox-list Eine Liste mit Kontrollkästchen Multi-Choice-Frage, Fragetyp Array-Nummer (Kontrollkästchen)
            ,
          Einige Fragetypen verwenden Multi-List-Klassen, z. B. Kontrollkästchen mit Kommentar: class="checkbox-list text-list"
          .checkbox-array (New in 3.0 ) Ein Array von Kontrollkästchen Array (Zahlen) mit Checkbox-Option
          .checkbox-item Der Antwortteil mit einem Kontrollkästchen Multi-Choice-Frage, Fragetyp Array-Nummer (Kontrollkästchen)
        • ,
          • .radio-list Eine Liste der Radioelemente Single-Choice-Frage, Array-Fragetyp (jede Zeile)
            ,
          .radio-array (New in 3.0 ) Ein Array von Radioelementen Array-Fragetyp
          .radio-item Der Antwortteil mit einem Radio Single-Choice-Frage, Array-Fragetyp
        • ,
          		•
          .text-list Eine Liste mit Texteingaben Fragetyp mit mehreren Texten, Textarray
            ,
          .text-item Der Antwortteil einer Texteingabe Fragetyp mit mehreren Texten, Textarray
        • ,
          		•
          .numeric-list Eine Liste von Texteingaben mit nur numerischer Antwort Multinumerischer Fragetyp, Zahlenarray
            ,
          .Nummernliste Eine Liste von Texteingaben mit rein numerischer Antwort (jede Zeile) Multinumerischer Fragetyp, Zahlenarray
            ,
          .Zahlenarray (New in 3.0 ) Der Antwortteil einer numerischen Eingabe Array von Zahlen
          .select-list (Obsolete since 2.50) Eine Liste von select Array-Nummern, Dual-Scale-Array (auswählen)
          .dropdown-list (New in 2.50 ) Eine Liste von select Array-Nummern, Dual-Scale-Array (auswählen) (jede Zeile)
          .dropdown-array (New in 3.0 ) Ein Array von Dropdown Array-Nummern, Dual-Scale-Array (auswählen)
          .select-item (Obsolete since 2.50) Der Antwortteil eines select Array-Nummern, Dual-Scale-Array (Auswahl), Einzelauswahl mit Select

          ,

          .dropdown-item (New in 2.50 ) Der Antwortteil eines select Array-Nummern, Dual-Scale-Array (Auswahl), Einzelauswahl mit Select

          ,

          .hide (Obsolete since 3.0) Wird zur Barrierefreiheit verwendet: Mit CSS versteckt, aber vom Screenreader gelesen, seit 2.50: Sie können sr-only von Bootstrap aus verwenden Kurze Textfrage <label class="hide"> Kann für andere Zwecke verwendet werden
          .ls-js-hidden (New in 3.0 ) Wird verwendet, damit ein Teil ausgeblendet wird, wenn Javascript aktiviert ist Schaltfläche zum Beispiel
          		Der LimeSurvey-Kern hat es verwendet, aber Sie können es auch in Ihrer Vorlage verwenden
          .ls-js-hidden-sr (New in 3.0 ) Wird zur Barrierefreiheit verwendet: Ausblenden, wenn js aktiviert ist, aber immer anzeigen, wenn der Benutzer einen Screenreader verwendet Schaltfläche zum Beispiel <a class="ls-js-hidden-sr"> Knopf
          .ls-no-js-hidden (New in 3.0 ) Wird verwendet, um einen Teil auszublenden, wenn Javascript nicht aktiviert ist Link <a class="ls-no-js-hidden"> Der LimeSurvey-Kern verwendet es für inaktive Links, wenn Javascript nicht aktiviert ist
          .ls-label-xs-visibility (New in 3.0 ) Die Beschriftung soll auf dem großen Bildschirm ausgeblendet, aber auf dem kleinen Bildschirm (ohne weitere Tabelle) und für den Screenreader angezeigt werden label <label class="ls-no-js-hidden"> Wird für die Beschriftung innerhalb der Tabellenzelle des Array-Fragetyps
          .ls-input-group-extra (New in 3.0 ) Gleiche Verwendung von Boostrap Input-Group-Addon, jedoch ohne Rahmen und Hintergrund. richtiges Suffix
          		Wird für das rechte und linke Suffix verwendet (global)
          .checkbox (Obsolete since 3.0) Eingabe[Typ=Kontrollkästchen] Frage mit Checkbox <input type="checkbox" class="checkbox"> Mit modernem Browser: nicht erforderlich, aber einige alte Browser benötigen dies
          .radio (Obsolete since 3.0) Eingabe[Typ=Radio] Frage mit Radio <input type="radio" class="radio"> Mit modernem Browser: nicht erforderlich, aber einige alte Browser benötigen dies
          .text Eingabe[Typ=Text] Frage mit Eingabetext oder Textbereich <textarea class="text">
          .answertext Array-Fragetyp Beantworten Sie einen Teil des Array-Fragetyps
          .col-answers Array-Fragetyp Spalte mit Antworten <col class="col-answers">
          .odd .even (Obsolete since 2.50) Array-Fragetyp Alternative für Spalte <col class="odd">
          .array1 .array2 (Obsolete since 3.0) Array-Fragetyp Alternative für Zeile
          .ls-odd .ls-even (New in 3.0 ) Array-Fragetyp Wechsel für Unterfrage und Y-Achse

          Einige Beispiele für Fragenteile mit Klassen

          Text-Kurzfragetyp:'
          <p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
</p>
          'Mehrere Kurztexte
          <ul class="subquestions-list questions-list text-list">
  <li class="question-item answer-item text-item" id="javatbdSGQA">
    <label for="answerSGQA">Some example subquestion</label>
     <span><input type="text" value="" id="answerSGQA" name="SGQA" size="20" class="text empty"></span>
  </li>
</ul>
          Array-Fragentyp'
          <table class="question subquestion-list questions-list ">
	<caption class="hide read">Some explanation for accessibility.</caption>
	<colgroup class="col-responses">
		<col width="50%" class="col-answers">
		<col width="25%" class="odd">
		<col width="13.3%" class="col-no-answer even">
	</colgroup>
	<thead>
		<tr class="array1 dontread">
			<td>&nbsp;</td>
			<th>1</th>
			<th>No answer</th>
		</tr>
	</thead>
	<tbody>
		<tr class="array2 answers-list radio-list" id="javatbdSGQ">
			<th width="20%" class="answertext">Some example subquestion
			</th>
			<td class="answer_cell_001 answer-item radio-item">
				<label for="answerSGQA" class="hide read">1</label>
				<input type="radio" value="1" id="answerSGQA" name="SGQA" class="radio">
			</td>
			<td class="answer-item radio-item noanswer-item">
				<label for="answerSGQA" class="hide read">No answer</label>
				<input type="radio" value="" id="answerSGQA" name="SGQA" class="radio">
			</td>
		</tr>
	</tbody>
</table>

          Die vollständige Liste der Fragenklassen

          Fragetyp Frageklasse Frage-ID
          5-Punkte-Auswahl .choice -5-pt-radio 5
          Array (10 Punkte Auswahl) .array-10-pt B
          Array (5 Punkte Auswahl) .array-5-pt A
          Array (Flexible Labels) Dual-Skala .array-flexible-duel-scale 1
          Array (Erhöhen, Gleich, Verringern) .array-increase-same-decrease E
          Array (Multi Flexi) (Zahlen) .array-multi-flexi - Array (Multi flexibel) (Text) .array-multi-flexi-text ;
          Array (Ja/Nein/Unsicher) .array- ja-unsicher-nein C
          Array (flexible Beschriftungen) .array-flexible-row F
          |.array-flexible-column H
          Boilerplate-Frage .boilerplate X
          Datum .date D
          Equation .equation *
          Gender .gender G
          Huge free text .text-huge U
          Sprachumschaltung .Sprache I
          Liste (Dropdown) .list-dropdown !
          Liste (radio) .list-radio L
          Liste mit Kommentar .list-with-comment O
          Langer Freitext . text-long T
          Mehrfache numerische Eingabe .numeric-multi K
          Mehrere Optionen .multiple-opt M
          Mehrere Optionen mit Kommentaren .multiple-opt-comments P
          Mehrere Kurztexte .multiple-short-txt Q
          Ranking .ranking R
          Kurzer Freitext .text-short S
          Ja/Nein .ja-nein Y

          Die vollständige Liste der Validierungsklassen

          Hinweis: Vor 1.92 waren nur die Klassen .mandatory und .input-error verfügbar.

          Diese gelten für die Hilfe- und/oder Validierungstippmeldungen, sodass jeder Typ individuell gestaltet werden kann.

          Die Optionen .hide-tip und .input-error interagieren standardmäßig, sodass Sie Validierungstipps ausblenden können. Sie erscheinen jedoch bei Validierungsfehlern und verschwinden wieder, wenn diese Fehler behoben werden.

          All dies ist darauf ausgelegt, Popup-Warnmeldungen überflüssig zu machen. Stattdessen können Tipps nach Bedarf angezeigt bzw. ausgeblendet werden und sind farblich gekennzeichnet, um anzuzeigen, ob die Antworten die Validierungskriterien erfüllen.

          Darüber hinaus können Sie beim ersten Besuch einer Seite mit nicht erfüllten Validierungskriterien die Tipps in einer ansprechenden Farbe kennzeichnen, um anzuzeigen, welche Validierungskriterien noch nicht erfüllt wurden. Zeigen Sie die Seite dann erneut mit einer kräftigeren Farbe an, wenn die Person die Seite mit verbleibenden Validierungsfehlern übermittelt.

          Zweck CSS-Klasse Beschreibung
          Mandatory .mandatory die Frage ist obligatorisch
          Benutzereingabefehler .input-error der Frage wurde mindestens ein Validierungsfehler hinzugefügt
          Hide Tip .hide-tip hinzugefügt Wenn Sie die Option hide_tip verwenden
          Betrugstyp .em_default für den Standard-Tippsatz (numerischer Wert usw. …)
          Anzahl der Antworten .em_num_answers für für min_answers und max_answers
          Wertebereich .em_value_range für min/max_num_value_n und multiflexible_min/max
          Summenbereich .em_sum_range für min/ max/equals_num_value
          Regex-Validierung .em_regex_validation für die reguläre Ausdrucksvalidierung der Frage
          Validierungsfunktion auf Fragenebene .em_q_fn_validation für die em_validation_q option
          Validierungsfunktion auf Unterfrageebene .em_sq_fn_validation für die em_validation_sq-Option
          Anderer Kommentar obligatorisch .em_other_comment_mandatory für other_comment_mandatory-Option – zeigt wann „Sonstiges“ ist ausgewählt, aber der zugehörige Kommentar fehlt.

          Stile in ihre benutzerdefinierte Vorlage importieren

          Die benutzerdefinierten Fragestile befinden sich am Ende der CSS-Datei jeder Vorlage und beginnen mit:
           /* ------------- START: Fragestile ----------------- ------------- */

          Wenn Sie Ihre eigene benutzerdefinierte Vorlage gestalten, sollten Sie in der Lage sein, alles nach der obigen Vorlage aus „templates/default/template.css“ (für tabellenbasierte Layouts) oder „/templates/limespired/template“ zu kopieren. css (für CSS-basierte Layouts) in Ihr eigenes Stylesheet ohne Auswirkungen auf Ihre anderen Stile.

          Bedingte Stylesheets für Internet Explorer

          Aufgrund der deutlichen Diskrepanzen bei der Darstellung zwischen IE6 und IE7 und den anderen Browsern sind für jede Vorlage spezielle IE-Conditional-Stylesheets enthalten. 

           <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]--> 
 <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]--> 
 <!--[if IE 8]>
		<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->

          Sie sollten den obigen Code in Ihre „startpage.pstpl“ und Kopien beider IE-Stylesheets aus entweder „/templates/default/“ oder „/templates/limespired“ für das Tabellen-Basislayout und einbinden CSS-basiertes Layout bzw.

          'Hinweis: Wenn Sie die Stile in Ihr eigenes Stylesheet kopieren, müssen Sie sie mit ziemlicher Sicherheit anpassen.

          Alternative Lösung für Internet Explorer

          Sie können eine bedingte Klasse für den Text in startpage.pstpl einfügen und diese Klasse in Ihrer template.css verwenden. Diese Methode wird in der Citronade-Vorlage (Obsolete since 2.06) verwendet. Hinzufügen einer js-/no-js-Klasse, um ein Javascript-/kein Javascript-System zu haben. 

          <!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
 <!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]--> 
 <script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script>

          Und in template.css verwenden Sie: 

          .ie6{/*spezifisch für Internet Explorer 6*/}
.ielt8{/*spezifisch für Internet Explorer 6 und 7*/}
.ie{/*spezifisch für alle Internet Explorer */}

          Rechts-nach-Links-Sprachen (RTL) und justify

          Der Texteditor in LimeSurvey ist in der Lage, RTL-Text zu formatieren. Allerdings zeigt der Editor selbst die RTL-Sprache im Blocksatz von links nach rechts an. Dies ist lediglich ein Problem mit der Editor-Anzeige. Die RTL und die begründete Frage oder der Text werden in Ihrer Umfrage oder in der Vorschau von rechts nach links korrekt angezeigt, auch wenn sie ausgerichtet sind.

          Schlüsselwörter

          Template:Veraltet

          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 >>" und "<< Zurück" Buttons
          {SUBMITBUTTON} Dem "Absenden" Button
          {COMPLETED} Dem Text "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} Die "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.

          Eingabe/Schaltflächen

          Jedem „Eingabe“-Typ in einer Umfrage wurde ein eigener Klassenname zugewiesen, sodass Sie Ihrer Datei „startpage.pstpl“ CSS hinzufügen und eine gewisse Kontrolle über das Erscheinungsbild von Formularschaltflächen und Eingaben haben können. Diese Klassennamen lauten wie folgt:

          • submit (Senden-Schaltflächen)
          • text (Texteingaben – für kurzen Freitext, Datum und numerischen Typ)!N !*answertext (Text der Antworten)
          • radio (Optionsschaltflächen)
          • checkbox (Kontrollkästchen)
          • 'select' (Auswahl-/Listenfelder)
          • textarea (Große Texteingaben – für langen Freitext)
          • clearall (Die „Beenden- und Löschen-Umfrage " link)
          • rank (Die Frage zum Rangstil. Legt nicht die Farbe des Auswahlfelds oder der Textfelder fest, ermöglicht aber das Ändern der Hintergrundfarbe, Textfarbe, Größe usw ., für den Rest der Rangfolgefrage)
          • graph (Die Diagrammtabelle „Prozentsatz abgeschlossen“)
          • innergraph' (Die Tabelle innerhalb der Diagrammtabelle – this enthält den 0%- und 100%-Text. Verwenden Sie dies, um die Größe dieses Textes zu ändern.)
          • Frage (Allgemeine Einstellungen für jede Frage, die in einer Tabelle angezeigt wird. Im Allgemeinen sollten Sie dies verwenden, um Stellen Sie sicher, dass die Schriftgröße und -farbe mit denen übereinstimmen, die Sie an anderer Stelle als Standard verwendet haben.)
          • mandatory (Pflichtfragen)
          • input-error (Benutzer Eingabefehler – wenn ein Benutzer bei einer Pflichtfrage oder einer Frage mit Validierung einen Fehler gemacht hat)
          • Array1 und Array2 (Diese beiden Stile werden bei der Darstellung des Bereichs abwechselnd verwendet Antworten auf eine Frage vom Typ Array. Dadurch können Sie für diese Fragetypen eine wechselnde Hintergrundfarbe festlegen. Array1 wird auch für die Spaltenüberschriften in diesen Fragetypen verwendet)
          • errormandatory (Legt die Farbe und den Stil der Fehlermeldung „Diese Frage ist obligatorisch“ fest)
          *warningjs (Legt die Farbe und den Stil der Warnmeldung fest, die angezeigt wird, wenn im Browser des Teilnehmers Javascript deaktiviert ist)

          Es gibt auch einige Elemente, auf die über die ID des Elements („#ID“ in CSS) zugegriffen werden kann:

          • surveycontact (Die auf der Startseite angezeigte Kontaktnachricht)! N!*tokenmessage (wird für Nachrichten innerhalb der Umfrage verwendet, z. B. die Fehlermeldung „Sitzung abgelaufen“)

          Da Sie alle HTML-Aspekte bearbeiten können, gibt es keinen Grund, Ihre Vorlagen mit einem

          zu umgeben.
          <div class='new_name'></div>

          und definieren Sie dann ein CSS für diese neue_Name-Klasse.

          Den Fortschrittsbalken gestalten

          Das Erscheinungsbild des Fortschrittsbalkens kann mit CSS geändert werden.

          Um die Hintergrundfarbe der Leiste zu ändern, fügen Sie am Ende Ihrer custom.css-Datei etwas wie das Folgende hinzu (Beispiel für ein fruchtiges Design): 

          .fruity .progress-bar {
 Hintergrundfarbe: #3300FF;
}

          Um die Rahmenfarbe der Leiste zu ändern, fügen Sie am Ende Ihrer custom.css-Datei etwas wie das Folgende hinzu (Beispiel für ein fruchtiges Design): 

          .fruity .progress-bar {
 Rand: 1 Pixel durchgehend #FF0000;
}

          Erweiterte Funktionen für Entwickler verfügbar

          LimeSurvey hat einige benutzerdefinierte Patches integriert, die einige spezielle Änderungen ermöglichen. Diese sehr erweiterten Funktionen erfordern (im Allgemeinen) Änderungen an der zugrunde liegenden Codebasis von LimeSurvey und sollten sorgfältig durchgeführt werden, um keine Sicherheitslücken zu schaffen.

          Unterstützung für Ihre eigenen Javascript-Funktionen

          Einige Benutzer müssen möglicherweise Javascript auf den Umfrageseiten ausführen, aber der Aufruf von „checkconditions()“ im BODY-Element machte dies unmöglich. Dieser Aufruf wurde durch eine kleine JavaScript-Funktion im HEAD ersetzt, die vor dem Aufruf nach der Existenz von „checkconditions()“ und „template_onload()“ sucht. Auf diese Weise kann ein Vorlagenautor seine eigene Funktion „template_onload()“ im HEAD erstellen, die die Standardfunktion ersetzt.

          • Deaktivieren Sie den XSS-Filter – setzen Sie unter „Globale Einstellungen -> Sicherheit“ „HTML für XSS filtern“ auf „Nein“.
          • Geben Sie Ihr Skript in die Quelle einer Frage oder Gruppenbeschreibung ein.

          Template:Hinweis


          Tipps & Tricks

          Sprachspezifisches Element

          Wenn Sie in einer Umfrage einen sprachspezifischen Satz haben möchten, beispielsweise eine Hilfe am Ende jeder Seite, können Sie einem Satz eine .pstl-Datei hinzufügen und ihn für die andere Sprache ausblenden. Wenn wir es in der template.css verstecken, können wir den Pseudo-Selektor :lang verwenden, aber wir verwenden eine Klasse für eine bessere Kompatibilität.

          Nachfolgend finden Sie zwei Hilfesätze in Französisch und Englisch. Fügen Sie dies in endpage.pstpl ein: 

          <div class="fr" lang="fr">Bitte wenden Sie sich direkt an 000000</div> 
<div class="en" lang="en"> Für Hilfe rufen Sie bitte 000000 an</div>

          und in template.css: 

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

          Ändern Sie das Layout der Umfrageseite

          Nach dem Bearbeiten und Speichern einer Vorlage gilt diese nur dann für eine Umfragelistenseite, wenn sie in den Einstellungen der Umfrage ausgewählt wird. Um es zur Standardvorlage zu machen, gehen Sie zur Registerkarte „Allgemein“ in den „Globalen Einstellungen“ Ihrer LimeSurvey-Installation und wählen Sie die gewünschte Vorlage aus. Ab diesem Zeitpunkt verwenden alle Vorlagen, die die Option „Standard“ als Vorlage verwenden, sowie diejenigen, die neu erstellt werden, die neu ausgewählte Standardvorlage.

          Um Ihre aktuelle Vorlage für diese Seite zu verwenden, müssen Sie die entsprechende Einstellung unter „Globale Einstellungen“ ändern. In älteren Versionen kann diese Änderung durch Bearbeiten der Einstellung $defaulttemplate in der Konfigurationsdatei vorgenommen werden: Kopieren Sie diese Einstellung von config-defaults.php nach config.php, wodurch config-defaults.php überschrieben wird, und bearbeiten Sie diese Einstellung in $defaulttemplate = 'yourtemplatename'; .

          Import/Export von Vorlagen: Mac-Benutzer

          Mac-Benutzer beachten bitte, dass das standardmäßige Archivierungsdienstprogramm von Mac OSX möglicherweise Probleme mit ZIP-Ordnern hat, die „on the fly“ generiert werden.

          Eine Problemumgehung besteht darin, Unix-Dateien über die Befehlszeile zu entpacken:

          $ unzip template.zip -d template

          Archiv: template.zip

          aufblasen: Vorlage/Startseite

          Aufblasen: ...

          Eine weitere Problemumgehung besteht darin, Skripte in ihren auf dem Mac kompilierten Gegenstücken zu verwenden.

          Verwenden Sie dieselbe Vorlage mit unterschiedlichen Logos

          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: 

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

          Benutzerdefiniertes Favicon anzeigen

          Ein Favicon ist das kleine Symbol, das Sie in Ihrer Browser-Adresszeile, Ihrem Lesezeichen oder auf dem Tab fü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 </head> Tag hinzu.
          <link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">

          Unterschiedliches Erscheinungsbild für Umfrage-/Fragenseiten

          Wenn Sie möchten, dass LimeSurvey das Erscheinungsbild jeder zweiten Seite (d.h., gerader und ungerader Umfrageseiten) ändert, können Sie die Klasse „.page-odd“ in Ihrer CSS-Datei verwenden, um das Erscheinungsbild ungerader Seiten zu ändern.

          Ein Beispiel aus der Standardvorlage von LimeSurvey 1.91+: 

          .page-odd table.question-group {
 Hintergrundfarbe: #D2F2D3;
}

          Wenn Sie gerade und ungerade Seiten nicht unterscheiden möchten, suchen Sie alle Instanzen von „.page-odd“ in template.css und entfernen Sie diese Stile.

          Erstellen Sie einen vertikalen Trennrahmen für ein Dual-Scale-Array

          Um einen vertikalen Trennrahmen für ein Dual-Scale-Array zu erstellen, können Sie die folgenden Zeilen zu Ihrer 'template.css-Datei hinzufügen. 

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

          Mit „header_separator“ wird das Trennzeichen für den Header „td“ angesprochen. Der „dual_scale_separator“ wird verwendet, um die Trennspalte im Dual-Scale-Array anzusprechen.

          Hinzufügen Ihres eigenen Logos zur Umfrageliste

          1. Bitte öffnen Sie zunächst den Theme-Editor für das Theme, das Sie verwenden möchten.
          2. Wir empfehlen die Verwendung von Fruity, es ist derzeit unser bestes Theme.
          3. Erweitern Sie dann das Thema und geben Sie ihm einen Namen, den Sie wiedererkennen.
          4. In der folgenden Ansicht können Sie das Logo hochladen, das Sie verwenden möchten.
          5. Wählen Sie im Dropdown-Menü „Bildschirm“ in der oberen rechten Ecke den Editor-Bildschirm „Umfrageliste“ aus.
          6. Wählen Sie dann „layout_survey_list.twig“ im Menü auf der linken Seite.
          7. Scrollen Sie im Editor zu Zeile 126 und ändern Sie den markierten Teil in den Dateinamen des Bildes, das Sie zuvor in das Theme hochgeladen haben.
          8. Speichern Sie Ihre Datei.
          9. Ändern Sie das Standardthema in Ihr erweitertes Thema. Datei:ChangeDefaultTheme.jpg

          Logo in der Mitte der Umfrageseite ausrichten

          Dieses Beispiel gilt für die Vorlage „extends_fruity“. Für andere Vorlagen kann das erforderliche CSS unterschiedlich sein.

          1. Melden Sie sich im Admin-Bereich von LimeSurvey an
          2. Navigieren Sie zum Theme-Editor: Konfiguration > Themes
          3. Suchen Sie in der Liste nach „LimeSurvey Fruity Theme“ und klicken Sie auf „ Schaltfläche „Theme-Editor“
          4. Klicken Sie in der Dateiliste links unten auf der Seite auf „custom.css“
          5. Kopieren Sie das folgende CSS in diese Datei und klicken Sie auf „Änderungen speichern“.
          .navbar-fixed-top > div.navbar-header {
 Breite: 100 % !important;
}

.navbar-fixed-top > div.navbar-header > div {
 Breite: 100 % !important;
}

.navbar-fixed-top > div.navbar-header > div > img {
 margin: 0 auto 0 auto !important;
}


          Benutzerdefinierte Fragenansichten (New in 3.0 )

          'Hinweis: Dies ist eine vorübergehende Funktion, die in Zukunft durch das Frageobjekt ersetzt werden soll (es wird sehr einfach sein, benutzerdefinierte Ansichten in das Frageobjekt zu verschieben). Es ist standardmäßig deaktiviert.

          Ab Version 2.5 können Sie vorlagenspezifische benutzerdefinierte Ansichten für Fragen und einige der darin enthaltenen Elemente erstellen. Dies ist nützlich, wenn Sie das HTML-Layout eines bestimmten Fragetyps für eine oder mehrere Umfragen ändern möchten.

          • In application/config/config.php suchen Sie nach „config“=>array und fügen diese Zeile zum Array hinzu: „allow_templates_to_overwrite_views“=>1
          • In /{your_template}/config.xml setzen Sie „overwrite_question_views“ auf true
          • Kopieren Sie application/views/survey/* nach template/{your_view_directory}/survey/
          • Beachten Sie, dass Sie nur die Dateien kopieren müssen, die Sie ändern möchten, die Dateistruktur jedoch dieselbe bleiben muss wie in Bewerbung/Ansichten/Umfrage/

          ==Fügen Sie benutzerdefinierte CSS- oder JavaScript-Dateien für template== ein

          Ab Version 2.50 können Sie die Datei config.xml verwenden, um Plugin-Dateien automatisch zu laden.

          • Laden Sie Ihre Dateien in den Vorlagenordner /css oder /scripts hoch
          • Fügen Sie in /{your_template}/config.xml die Dateipfade hinzu<css> oder<js> Blöcke, etwa so:
            <css> 
<filename> css/jquery-ui-custom.css</filename> 
<filename> css/bootstrap-slider.css</filename>

	<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename> 
<filename> css/flat_and_modern.css</filename>

	<filename>css/template.css</filename>

	<filename>css/myCustomPlugin.css</filename> 
</css> 
<js> 
<filename> scripts/template.js</filename> 
<filename> scripts/bootstrap-slider.js</filename>

	<filename>scripts/myCustomPlugin.js</filename> 
</js>

          Klassendefinitionen (für Entwickler)

          Antwortliste

          Frage' Fragetyp' Elemente
          arrays/5point Ein tr
          arrays/10point B tr
          arrays/array F tr
          Arrays/Spalte H tr und col
          arrays/dualscale 1 tr
          arrays/increasesamedecrease E tr
          arrays/yesnouncertain C tr
          Geschlecht G div und ul
          list_with_comment O div
          ranking R ul und div
          yesno Y ul und div
          ranking_advanced R ul und div
          listradio L div
          5pointchoice 5 ul
          multiplechoice M div


          radio-list

          Frage' Fragetyp' Elemente
          janein Y ul
          Geschlecht G ul
          arrays/yesnouncertain C tr
          arrays/increasesamedecrease E tr
          arrays/dualscale 1 tr
          arrays/5point Ein Tabelle und tr
          arrays/10point B tr
          arrays/array F tr
          Arrays/Spalte H col
          listradio L div
          list_with_comment O div gefolgt von ul

          radio-item

          Frage' Fragetyp' Elemente
          arrays/yesnouncertain C td
          5pointchoice 5 li
          arrays/10point B td
          arrays/5point Ein td
          arrays/array F td
          Arrays/Spalte H td
          arrays/dualscale 1 td
          arrays/increasesamedecrease E td
          Geschlecht G li
          listradio L li
          janein Y li
          listradio L li und div
          image_select-listradio L li und div
          list_with_comment 0 li

          list-group

          Frage' Fragetyp' Elemente
          janein Y ul
          5pointchoice 5 ul
          Geschlecht G ul
          ranking R ul
          ranking_advanced R ul und div
          question_index_group_buttons div
          question_index_questions_buttons div

          list-group-horizontal

          Frage Fragetyp - janein Y ul
          5pointchoice 5 ul
          Geschlecht G ul

          list-unstyled

          Frage' Fragetyp' Elemente
          list_with_comment 0 ul
          listradio L ul
          multiplechoice M ul
          multiplechoice_with_comments P ul
          multiplenumeric K ul
          multipleshorttext Q ul
          ranking R ul
          ranking_advanced R ul
          bootstrap_buttons_multi M ul
          image_select-multiplechoice M ul
          inputondemand/multipleshorttext Q ul
          register_error ul
          register_message ul
          layout_survey_list ul
          load ul
          save ul
          captcha ul

          select-list

          Frage' Fragetyp' Elemente
          Rangliste R ul
          ranking_advanced R ul

          checkbox-item

          Frage' Fragetyp' Elemente
          multiflexi (Array-Nummern) : td
          multiplechoice M li
          multiplechoice_with_comments P div
          image_select-listradio L li
          image_select-multiplechoice M li und div
          navigator span

          checkbox-text-item

          Frage Fragetyp - multiplechoice_with_comments P li
          multiplechoice M li
          image_select-multiplechoice M li
Retrieved from "http://manual.limesurvey.org/index.php?title=Theme_editor/de&oldid=186745"