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 #}{{eineFrage.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.
Um das Verständnis und die schnelle Aktualisierung eines Templates zu erleichtern, bietet LimeSurvey einen' Template Editor in der Hauptsymbolleiste der Anwendung an. Dieser Vorlageneditor steht nur Benutzern zur Verfügung, die das Zugriffsrecht in den Benutzersicherheitseinstellungen haben und für Superadministratoren. Eine Vorlage wirkt sich auf alle Umfragen aus, und kann eine Umfrage unbrauchbar machen, wenn sie nicht korrekt aufgebaut ist.
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.
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, ...). 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 Verzeichnis dort]].
Am besten verwenden Sie jedoch die Import-/Export-/Kopierfunktionen für LimeSurvey-Vorlagen im Vorlageneditor.
“ „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.
* 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:
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:
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:
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"
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
Note: Prior to 1.92, only .mandatory and .input-error classes were available.
These apply to the help and/or validation tip messages so that each type can be individually styled.
The .hide-tip option and .input-error options interact by default so that you can have validation tips hidden. However, they do appear when there are validation errors and disappear again when those errors are rectified.
All of these are designed to eliminate the need for pop-up alert messages. Instead, tips can appear/disappear as needed and are color-coded to indicate whether the answers pass the validation criteria.
Furthermore, when you first visit a page that has unmet validation criteria, you can color-code the tips in a pleasing color to show which validation criteria have not been met yet; then re-display the page using a harsher color if the person submits the page with lingering validation errors.
Purpose
CSS Class
Description
Mandatory
.mandatory
the question is mandatory
User input error
.input-error
the question had at least one validation error
Hide Tip
.hide-tip
added if you use the hide_tip option
defrault type
.em_default
for default tip set ( numeric value etc …)
Num answers
.em_num_answers
for for min_answers and max_answers
Value range
.em_value_range
for min/max_num_value_n and multiflexible_min/max
Sum range
.em_sum_range
for min/max/equals_num_value
Regex validation
.em_regex_validation
for regular-expression validation of the question
Question-level validation function
.em_q_fn_validation
for the em_validation_q option
Subquestion-level validation function
.em_sq_fn_validation
for the em_validation_sq option
Other comment mandatory
.em_other_comment_mandatory
for other_comment_mandatory option - shows when "other" is selected but associated comment is missing.
Importing styles into your custom template
The custom question styles are near the bottom of each template's CSS file and start with:
If you're styling your own custom template, you should be able to copy everything after the above one from templates/default/template.css (for table-based layouts) or /templates/limespired/template.css (for CSS-based layouts) into your own style sheet without any impact on your other styles.
Internet Explorer Conditional Style Sheets
Because of the marked discrepancies in rendering between IE6 & IE7 and the other browsers, there are special IE conditional style sheets included for each template.
You should include the above code within your startpage.pstpl and copies of both the IE style sheets from either /templates/default/ or /templates/limespired for Tables base layout and CSS based layout respectively.
Note: If you copy the styles into your own style sheet you will almost certainly need to tweak them.
Alternative solution for internet explorer
You can put a conditional class for body in startpage.pstpl and use this class in your template.css. This method is used in the citronade template (Obsolete since 2.06). Adding a js / no-js class to have javascript / no javascript system.
.ie6{/*specific for internet explorer 6*/}.ielt8{/*specific for internet explorer 6 and 7*/}.ie{/*specific for all internet explorer */}
Right-to-Left (RTL) languages and justify
The text editor within LimeSurvey is able to format RTL text. However, the editor itself shows the RTL language in a left to right format when justified. This is just an editor display issue. The RTL and justified question or text will display correctly from right to left, even when justified, in your survey or on preview.
Schlüsselwörter
Deprecated : This features is deprecated in version 3.0.
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.
Input/Buttons
Each "input" type in a survey has been given its own class name, so that you can add CSS to your "startpage.pstpl" file and have some control over the appearance of form buttons and inputs. These class names are as follows:
submit (Submit Buttons)
text (Text Inputs - for short free text, date, and numerical type)
answertext (Text of answers)
radio (Radio Buttons)
checkbox (Check Boxes)
select (Select / List Boxes)
textarea (Large text inputs - for long free text)
clearall (The "Exit and Clear Survey" link)
rank (The rank style question. Doesn't set the colour of the select box or the text boxes, but it does allow the changing of background colour, text colour, size etc., for the rest of the ranking question)
graph (The "percentage completed" graph table)
innergraph (The table inside the graph table - this contains the 0% and 100% text. Use this for changing the size of this text)
question (General settings for any question that is displayed within a table. Generally, you should use this to make sure that their font size and color is the same as you have used elsewhere as a default)
mandatory (Mandatory questions)
input-error (User input error - for if a user has made a mistake with a mandatory question or question with validation)
array1 and array2 (These two styles are cycled when presenting the range of answers for an array type question. This allows you to set an alternating background color for these question types. Array1 is also used for the column headings in these question types)
errormandatory (Sets the color and style of the "This question is mandatory" error message)
warningjs (Sets the color and style of the warning message displayed if the participant's browser has javascript disabled)
There are also some elements that can be accessed using the ID of the element (#ID in CSS):
surveycontact (The contact message shown on the start page)
tokenmessage (used for messages inside the survey, e.g. the session expired error message)
Because you can edit all the HTML aspects, there's no reason to surround your templates with a
<divclass='new_name'></div>
and then define a css for that new_name class.
Styling the progress bar
The progress bar appearance can be modified with CSS.
To change the background color of the bar, add something like the following to the end of your custom.css file (example for fruity theme):
.fruity.progress-bar{background-color:#3300FF;}
To change the border color of the bar, add something like the following to the end of your custom.css file (example for fruity theme):
.fruity.progress-bar{border:1pxsolid#FF0000;}
Advanced features available to developers
LimeSurvey has integrated some user-made patches that permits some special changes. These very advanced features (generally) require changes to the underlying code base of LimeSurvey and should be done carefully in order not to introduce security holes.
Support for your own Javascript functions
Some users may need to run Javascript on the survey pages, but calling checkconditions() in the BODY element made it impossible to do so. This call has been replaced with a small JavaScript function in the HEAD that sniffs for the existence of checkconditions() and template_onload() before calling them. In this way, a template author can create his or her own template_onload() function in the HEAD that replaces the default one.
Disable XSS filter - in Global settings -> Security, set "Filter HTML for XSS" to No.
Enter your script in the source of a question or group description.
If you want to have a language specific sentence in a survey, for example help at the end of each page, you can add a .pstl file a sentence and hide it for the other language. If we hide it in the template.css, we can use the pseudo selector :lang, but we use some class for better compatibility.
Below, there are two help sentences, in French and English. Put this on endpage.pstpl:
After editing and saving a template, it applies to a survey list page only if it is selected from the settings of the survey. To make it the default template, go under the General tab located in the Global settings of your LimeSurvey installation and choose the desired template. From this point on, all the templates that use the "default" option as template, plus the ones that are going to be newly created, will use the newly selected default template.
To use your current template for this page, you must change the appropriate setting from Global settings. In older versions, this change can be done by editing the $defaulttemplate setting from the config file: copy this setting from config-defaults.php to config.php which overrides config-defaults.php and edit this setting to $defaulttemplate = 'yourtemplatename';.
Import/Export of templates: Mac users
Mac users, please note that the Mac OSX default archive utility may have problems with zip folders "generated on the fly".
A workaround is to unix'es unzip from the command line:
$ unzip template.zip -d template
Archive: template.zip
inflating: template/startpage
inflating: ...
Another workaround is to use scripts in their mac-compiled counterparts.
Dasselbe Template mit verschiedenen Logos benutzen
Wenn Sie dasselbe Template für all Ihre Umfrage nutzen und nur das Logo für jede Umfrage ändern möchten, dann können Sie den {SID}-Platzhalter in Ihrer .pstpl Vorlagendatei benutzen und auf diesem Weg auf verschiedene Bilder verweisen:
<imgsrc="{TEMPLATEURL}files/logoDatei-{SID}.png">
Eigenes Favicon zeigen
Ein Favicon ist das kklein Symbol, das Sie in ihrer Browser-Adresszeile, Ihren Lesezeichen oder auf dem Tabfür ihre LimeSurvey-Umfrage sehen. Sie können Ihr eigenes Icon auf folgende Weise anzeigen:
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.
If you want LimeSurvey to change the appearance of every second page (i.e., even and odd survey pages), you can use .page-odd class in your CSS file to change the appearance of odd pages.
An example from default template of LimeSurvey 1.91+:
header_separator is used to adress the separator for the header "td". The "dual_scale_separator" is used to address the separator column in the dual scale array.
Adding your own logo to the survey list
First please open the theme editor for the theme you like to use.
We recommend to use fruity, it is our best theme currently.
Then extend the theme and give it a name you will recognize.
In the following view you may upload the logo you want to use.
Select the editor screen `Survey List´ in the Screen dropdown in the top right corner.
Then select `layout_survey_list.twig´ in the left side menu.
In the editor scroll to line 126 and change the marked part to the filename of the image you uploaded to the theme before.
Save your file.
Change default theme to your extended theme.
Align logo to the centre of the survey page
This example is for the "extends_fruity" template. For other templates the required CSS may be different.
Login to the LimeSurvey admin area
Browse to the theme editor: Configuration > Themes
Find "LimeSurvey Fruity Theme" in the list and click the "Theme Editor" button
Click "custom.css" in the files list on the left at near the bottom of the page
Copy the following CSS into that file and press "Save Changes"
Note: This is a temporary feature to be replaced in the future by question object (it will be very easy to move custom views to question object). It is disabled by default.
As of version 2.5, you can create template-specific custom views for questions and some of their incorporated elements. This is useful if you want to modify the HTML layout of a particular question type for one or more surveys.
In application/config/config.php, find 'config'=>array and add this line to the array : 'allow_templates_to_overwrite_views'=>1
In /{your_template}/config.xml, set "overwrite_question_views" to true
Copy application/views/survey/* to template/{your_view_directory}/survey/
Note that you only need to copy the files that you intend to modify but the file structure must remain the same as in application/views/survey/
Insert custom CSS or JavaScript files for template
As of version 2.50, you can use the config.xml File to Automatically Load Plugin Files.
Upload your files to the template /css or /scripts folder
In /{your_template}/config.xml, add the file paths to the <css> or <js> blocks, something like this: