Vorlagen-Editor

Einführung

Ein Umfrage-Designvorlage steuert, wie Ihre Umfrage für die Teilnehmenden aussieht: Seitenlayout, Farben, Schriftarten, Logos und die Gestaltung jeder einzelnen Frage. Designvorlagen werden mit Twig-Vorlagen (https://twig.symfony.com), CSS und JavaScript erstellt und nutzen Bootstrap 5 (https://getbootstrap.com) als CSS-Framework.

Viele gängige Änderungen erfordern keinerlei Programmierung. Logo, Farben, Schriftarten und diverse Anzeigeeinstellungen lassen sich über die Theme-Optionen ändern. Für weitergehende Anpassungen – wie das Hinzufügen von eigenem CSS oder JavaScript, das Ändern des HTML-Codes einer Seite oder das Hochladen von Bildern und anderen Dateien für Ihre Designvorlage – verwenden Sie den auf dieser Seite beschriebenen Designvorlage-Editor.

LimeSurvey enthält folgende Standard-Designvorlagen: Fruity TwentyThree ( fruity_twentythree ): Das Standardthema. Bootstrap Vanilla ( vanilla ): Ein einfaches Basisthema für Entwickler, die ihr eigene Bootstrap-basierte Designvorlage erstellen möchten. Fruity und bootswatch fruity : Beide erweitern Bootstrap Vanilla.

Das Erscheinungsbild einzelner Fragetypen wird durch Fragedesignvorlagen und nicht durch das Umfragedesignvorlage gesteuert. Um den HTML-Code eines Fragetyps zu ändern, erstellen Sie ein Fragedesignvorlage.

Bevor Sie beginnen

Um den Designvorlage-Editor zu verwenden, benötigen Sie die globale Berechtigung Designvorlagen (siehe globale Berechtigungen) oder müssen Superadministrator sein. Zum Erweitern einer Designvorlage benötigen Sie das Recht Erstellen, zum Speichern von Änderungen das Recht Aktualisierung und zum Löschen einer Designvorlage oder zum Zurücksetzen einer Datei das Recht Löschen.

  Eine fehlerhafte Designvorlage kann alle Umfragen unbrauchbar machen, die sie verwenden. Testen Sie Ihre Änderungen mit einer Umfragevorschau, bevor Sie die Designvorlage in einer aktiven Umfrage verwenden.

Kerndesignvorlagen können nicht bearbeitet werden: Erweitern Sie sie

Kerndesignvorlagen werden zusammen mit LimeSurvey aktualisiert, daher können Sie sie nicht direkt ändern. Um eine Kerndesignvorlage anzupassen, erweitern Sie sie. Beim Erweitern wird eine neue Benutzer-Designvorlage erstellt, die alles von ihrer übergeordneten Designvorlage erbt. Ihre Designvorlage enthält nur die Dateien, die Sie ändern; alles andere wird von der übergeordneten Designvorlage übernommen. So erhält Ihre Designvorlage auch weiterhin die Fehlerbehebungen und Verbesserungen, wenn LimeSurvey die übergeordnete Designvorlage aktualisiert.

Um eine Designvorlage zu erweitern, gehen Sie wie folgt vor:

• Gehen Sie zu Konfiguration > Designvorlagen, öffnen Sie das Aktionsmenü (⋯) am Ende der Zeile der Designvorlage und klicken Sie auf Erweitern, oder
• Öffnen Sie die Designvorlage im Designvorlage-Editor und klicken Sie in der Symbolleiste auf Erweitern.

Geben Sie einen Namen für die neue Designvorlage ein. Der Designvorlage-Editor öffnet dann Ihre neue Designvorlage.

Speicherort der Designvorlagen

• Kerndesignvorlagen: themes/survey/ in Ihrer LimeSurvey-Installation.
• Benutzer-Designvorlagen (erweiterte, hochgeladene oder importierte Designvorlagen): upload/themes/survey/.

Sie können die Dateien einer Benutzer-Designvorlage auch direkt auf dem Server mit Ihrem eigenen Editor bearbeiten. Stellen Sie anschließend sicher, dass der Webserver die Dateien weiterhin lesen und schreiben kann, damit Sie auch den Designvorlage-Editor weiter verwenden können.

Der Designvorlage-Editor

Um den Designvorlage-Editor zu öffnen, gehen Sie zu Konfiguration > Designvorlagen, öffnen Sie das Aktionsmenü (⋯) am Ende der Zeile der Designvorlage und klicken Sie auf Designvorlage-Editor.

Wenn Sie eine Kerndesignvorlage öffnen, weist ein Hinweis darauf hin, dass es sich um eine Standard-Designvorlage handelt, und bietet einen Link zum Erweitern an. Sie können sich die Dateien und die Vorschau ansehen, aber keine Änderungen speichern.

Symbolleiste

• Export: Lädt die Designvorlage als ZIP-Datei herunter.
• Erweitern: Erstellt eine neue Designvorlage, die von dieser erbt (siehe oben).
• Umbenennen: Benennt die Designvorlage um. Nur für Benutzer-Designvorlagen verfügbar.
• Löschen: Löscht die Designvorlage. Die Designvorlage, die als Standard festgelegt ist, kann nicht gelöscht werden.
• Designvorlage: Schaltet den Designvorlage-Editor auf eine andere Designvorlage um.
• Vorlagen in Vorschau: Wählt aus, welche Umfrageseite in der Vorschau angezeigt wird und welche Dateien zur Bearbeitung aufgelistet werden. Die Bildschirme sind: Frage, Umfragenliste, Willkommen, Abgeschlossen, Bewertungen, Fehler, Alles löschen, Laden, Speichern, Registrierung, Antworten drucken, Öffentliche Statistiken, PDF, Quoten überschritten, Navigation und Teilnehmer.

Dateien bearbeiten

Die Bereiche auf der rechten Seite listen die Dateien auf, die vom ausgewählten Bildschirm verwendet werden:

• Bildschirmteildateien: Die Twig-Vorlagen, die die Seite aufbauen.
• JavaScript-Dateien
• CSS-Dateien
• Andere Dateien: Bilder, Schriftarten und alle anderen Dateien der Designvorlage.

Klicken Sie auf einen Dateinamen, um die Datei im Editor zu öffnen. Mit Geerbt markierte Dateien stammen von der übergeordneten Designvorlage. Sie können eine geerbte Datei trotzdem bearbeiten: Die Schaltfläche unter dem Editor lautet dann In lokale Vorlage kopieren und Änderungen speichern, und beim Speichern wird die Datei mit Ihren Änderungen in Ihre Designvorlage kopiert. Ab dann wird Ihre Kopie anstelle der Datei der übergeordneten Designvorlage verwendet.

Dateien, die zu Ihrer Designvorlage gehören, haben eine Schaltfläche Zurücksetzen. Das Zurücksetzen löscht Ihre Kopie, sodass wieder die Datei der übergeordneten Designvorlage verwendet wird.

Dateien hochladen

Verwenden Sie das Upload-Feld am unteren Rand des Bereichs Andere Dateien, um Bilder, Schriftarten oder andere Dateien zu Ihrer Designvorlage hinzuzufügen. Hochgeladene Dateien werden im Ordner files/ der Designvorlage gespeichert. Standardmäßig können Sie Bilder (gif, ico, jpg, jpeg, png) und diese Dateitypen hochladen: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq und lsg. Ihr Administrator kann diese Listen mit den Einstellungen allowedthemeimageformats und allowedthemeuploads in config.php ändern.

Um ein hochgeladenes Bild in einer Twig-Datei anzuzeigen, verwenden Sie die Funktion image():

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

Verweisen Sie in CSS-Dateien auf hochgeladene Dateien mit einem Pfad relativ zum Ordner css, zum Beispiel url('../files/background.jpg').

Vorschau

Unterhalb des Editors zeigt eine Vorschau den ausgewählten Bildschirm mit Beispielinhalten. Mit den Schaltflächen Mobiltelefon, 640x480, 800x600, 1024x768 und Vollständig können Sie die Seite in verschiedenen Bildschirmgrößen prüfen.

Die Vorschau verwendet Beispieldaten und zeigt möglicherweise nicht jeden Stil genau so an wie eine echte Umfrage. Prüfen Sie Ihre Änderungen daher immer auch in einer echten Umfragevorschau.

Designvorlagen importieren und exportieren

• Um eine Designvorlage in eine andere LimeSurvey-Installation zu übertragen, klicken Sie in der Symbolleiste des Designvorlage-Editors auf Export. Dadurch wird die Designvorlage als ZIP-Datei heruntergeladen.
• Um eine Designvorlage aus einer ZIP-Datei zu installieren, gehen Sie zu Konfiguration > Designvorlagen und klicken Sie auf Hochladen & installieren.

Aufbau einer Designvorlage

Ordner der Designvorlage

Ein Designvorlagen-Ordner enthält:

• config.xml: Das Manifest der Designvorlage: Name, übergeordnete Designvorlage, CSS- und JavaScript-Dateien, Designvorlage-Optionen und die im Designvorlage-Editor angezeigten Bildschirme.
• views/: Die Twig-Vorlagen. layout_global.twig ist das Hauptlayout für die meisten Umfrageseiten. Andere Layouts werden für spezielle Seiten verwendet, zum Beispiel layout_survey_list.twig für die öffentliche Umfragenliste und layout_errors.twig für Fehlerseiten. Der Ordner views/subviews/ enthält die kleineren Vorlagen, die von den Layouts eingebunden werden.
• css/ und scripts/: Die CSS- und JavaScript-Dateien der Designvorlage.
• files/: Bilder und andere Dateien, die von der Designvorlage verwendet werden.
• options/: Die Seite für die Designvorlage-Optionen.

Twig-Templates

Die Templates erhalten die Umfragedaten in der Variablen aSurveyInfo. Um den gesamten Inhalt anzuzeigen, aktivieren Sie den Debug-Modus in application/config/config.php und fügen Sie diese Zeile am Ende des body-Elements in layout_global.twig ein:

{{ dump(aSurveyInfo) }}

Die Funktionen, die Sie in Templates verwenden können, finden Sie unter Verfügbare Twig-Funktionen. Aus Sicherheitsgründen werden Templates in einer Sandbox ausgeführt, daher stehen nur diese Funktionen zur Verfügung.

config.xml

Der Abschnitt <files> listet die CSS- und JavaScript-Dateien auf, die auf Umfrageseiten geladen werden:

• <add> fügt eine Datei hinzu. Wenn die übergeordnete Designvorlage bereits eine Datei mit demselben Namen enthält, ersetzt Ihre Datei diese.
• <remove> verhindert, dass eine Datei der übergeordneten Designvorlage geladen wird.

Sie müssen Dateien der übergeordneten Designvorlage nicht erneut auflisten: Sie werden trotzdem geladen.

LimeSurvey liest die config.xml beim Installieren einer Designvorlage und speichert die Einstellungen in der Datenbank. Nachdem Sie die config.xml einer installierten Designvorlage geändert haben, gehen Sie zu Konfiguration > Designvorlagen, öffnen Sie das Aktionsmenü (⋯) der Designvorlage und klicken Sie auf Zurücksetzen, um die Datei neu zu laden.

Eigenes CSS und JavaScript hinzufügen

Jede Kerndesignvorlage enthält zwei Dateien, die für Ihren eigenen Code reserviert sind:

• css/custom.css: Wird nach allen anderen CSS-Dateien geladen, sodass ihre Regeln die Stile der Designvorlage überschreiben.
• scripts/custom.js: Wird nach dem eigenen JavaScript der Designvorlage geladen.

Wenn Sie eine Designvorlage erweitern, sind dies die Dateien, die Sie ändern sollten. Fügen Sie Ihr CSS in die custom.css ein, statt die Haupt-CSS-Dateien der Designvorlage zu bearbeiten, damit Ihre Designvorlage weiterhin Aktualisierungen der übergeordneten Designvorlage erhält.

Um weitere Dateien hinzuzufügen, laden Sie sie hoch und listen Sie sie im Abschnitt <files> der config.xml Ihrer Designvorlage auf. Verwenden Sie einen Dateinamen, der in der übergeordneten Designvorlage nicht existiert, da Ihre Datei sonst die Datei der übergeordneten Designvorlage ersetzt:

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

Umfrageseiten werden standardmäßig per Ajax geladen, sodass der Browser die Seite nicht komplett neu lädt, wenn ein Teilnehmer zur nächsten Seite wechselt. Führen Sie Ihr JavaScript sowohl beim ersten Laden der Seite als auch bei jedem Ajax-Seitenaufruf aus:

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

Fragen mit CSS gestalten

Alle Beispiele in diesem Abschnitt gehören in die Datei custom.css Ihrer Designvorlage.

Seitenklassen

Die Elemente <html> und <body> tragen Klassen, mit denen Sie ganze Seiten gestalten können:

• html: Der Sprachcode (zum Beispiel en) und die Textrichtung (dir-ltr oder dir-rtl).
• body: Der Name der Designvorlage und jeder übergeordneten Designvorlage (zum Beispiel fruity_twentythree), die Schriftart (zum Beispiel font-ibm-sans), die Sprache (zum Beispiel lang-en) und brand-logo, wenn das Logo angezeigt wird.

Klassen des Fragen-Containers

Jede Frage ist von einem Element mit der Klasse question-container umgeben. Es trägt außerdem:

• Die Klasse des Fragetyps (siehe die Tabelle unten).
• mandatory: Die Frage ist eine Pflichtfrage oder eine weiche Pflichtfrage.
• input-error: Die Antwort hat die Validierung nicht bestanden oder eine Pflichtfrage wurde nicht beantwortet.
• missing: Die Frage hat noch unbeantwortete Teile und der Teilnehmer ist bereits an ihr vorbeigegangen.
• ls-hidden und ls-irrelevant: Die Frage ist aufgrund ihrer Bedingung ausgeblendet.
• ls-hidden-attribute: Die Frage ist durch die Einstellung „Diese Frage immer verstecken“ ausgeblendet.
• Alle Klassen, die in der Einstellung CSS-Klasse(n) der Frage (unter Anzeige) eingetragen sind. Damit können Sie einzelne Fragen gestalten.

Zum Beispiel eine Pflichtfrage vom Typ Liste (Optionsfelder), die nicht beantwortet wurde:

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

Klassen der Fragetypen

Fragetyp	Klasse	Typcode
5 Punkte Auswahl	.choice-5-pt-radio	5
Matrix	.array-flexible-row	F
Matrix (5 Punkte Auswahl)	.array-5-pt	A
Matrix (10 Punkte Auswahl)	.array-10-pt	B
Matrix (Zunahme/Gleich/Abnahme)	.array-increase-same-decrease	E
Matrix (Zahlen)	.array-multi-flexi	:
Matrix (Texte)	.array-multi-flexi-text	;
Matrix (Ja/Unsicher/Nein)	.array-yes-uncertain-no	C
Matrix nach Spalte	.array-flexible-column	H
Dual Matrix	.array-flexible-dual-scale	1
Datum/Zeit	.date	D
Gleichung	.equation	*
Datei-Upload	.upload-files	|
Geschlecht	.gender	G
Ausführlicher Freitext	.text-huge	U
Sprachwechsel	.language	I
Liste (Klappbox)	.list-dropdown	!
Liste (Optionsfelder)	.list-radio	L
Liste mit Kommentar	.list-with-comment	O
Langer freier Text	.text-long	T
Mehrfachauswahl	.multiple-opt	M
Mehrfachauswahl mit Kommentar	.multiple-opt-comments	P
Mehrfache numerische Eingabe	.numeric-multi	K
Mehrfache kurze Texte	.multiple-short-txt	Q
Zahleneingabe	.numeric	N
Rangfolge	.ranking	R
Kurzer freier Text	.text-short	S
Textanzeige	.boilerplate	X
Ja/Nein	.yes-no	Y

Klassen für die Teile einer Frage

Innerhalb des Fragen-Containers verwendet der Antwortbereich diese Klassen. Einige hängen von den Anzeigeeinstellungen der Frage ab: Zum Beispiel verwendet Matrix (Zahlen) andere Klassen, wenn Ankreuzfelder statt Klappboxen angezeigt werden.

Klasse	Verwendet für	Verwendet von (Beispiele)
.ls-answers	Das Element, das alle Antwortoptionen enthält	Alle Fragetypen
.answers-list	Eine Liste oder Zeile mit Antwortoptionen	Liste (Optionsfelder), Mehrfachauswahl, Rangfolge, Zeilen der meisten Matrizen
.subquestion-list, .questions-list	Eine Liste oder Tabelle mit Teilfragen	Matrizen, Mehrfache kurze Texte, Mehrfache numerische Eingabe
.answer-item	Eine Antwortoption oder ein Eingabefeld	Fast alle Fragetypen
.noanswer-item	Die Option „Keine Antwort“	Matrizen, 5 Punkte Auswahl, Liste mit Kommentar
.question-item	Eine Teilfrage, die zugleich eine Antwort ist	Mehrfachauswahl, Mehrfache kurze Texte, Mehrfache numerische Eingabe
.radio-list	Eine Liste oder Zeile mit Optionsfeldern	Liste (Optionsfelder), 5 Punkte Auswahl, Liste mit Kommentar, Zeilen von Matrizen mit Optionsfeldern
.radio-array	Eine Tabelle mit Optionsfeldern	Matrix, Matrix (5 Punkte Auswahl), Matrix (10 Punkte Auswahl), Matrix (Zunahme/Gleich/Abnahme), Matrix (Ja/Unsicher/Nein)
.radio-item	Ein Optionsfeld mit seiner Beschriftung	Liste (Optionsfelder), 5 Punkte Auswahl, Liste mit Kommentar, Matrizen mit Optionsfeldern
.checkbox-list	Eine Liste mit Ankreuzfeldern	Mehrfachauswahl, Mehrfachauswahl mit Kommentar
.checkbox-array	Eine Tabelle mit Ankreuzfeldern	Matrix (Zahlen) mit Anzeige als Ankreuzfelder
.checkbox-item	Ein Ankreuzfeld mit seiner Beschriftung	Mehrfachauswahl, Mehrfachauswahl mit Kommentar, Matrix (Zahlen) mit Anzeige als Ankreuzfelder
.checkbox-text-item	Ein Ankreuzfeld mit einem Textfeld	Mehrfachauswahl mit Kommentar
.comment-item	Das Kommentarfeld neben einem Ankreuzfeld	Mehrfachauswahl mit Kommentar
.text-list	Eine Liste mit Texteingabefeldern	Mehrfache kurze Texte, Mehrfache numerische Eingabe
.text-item	Ein Texteingabefeld	Kurzer, langer und ausführlicher Freitext, Mehrfache kurze Texte, Matrix (Texte)
.number-list, .numeric-item	Numerische Eingabefelder	Mehrfache numerische Eingabe, Zahleneingabe
.number-array	Eine Tabelle mit numerischen Eingabefeldern	Matrix (Zahlen), Matrix (Texte)
.text-array	Eine Tabelle mit Texteingabefeldern	Matrix (Texte), Matrix (Zahlen)
.dropdown-array, .dropdown-list, .dropdown-item	Tabellen, Zeilen und Zellen mit Klappboxen	Matrix (Zahlen), Dual Matrix mit Klappboxen
.date-item	Das Datumseingabefeld	Datum/Zeit
.upload-item	Der Bereich für den Datei-Upload	Datei-Upload
.answertext	Der Teilfragentext in einer Matrixzeile	Matrizen
.col-answers	Die Spalte mit den Teilfragentexten	Matrizen
.ls-heading	Die Kopfzeile mit den Antwortoptionen	Matrizen
.ls-odd, .ls-even	Abwechselnde Zeilen	Matrizen
.ls-label-xs-visibility	Eine Beschriftung, die nur auf kleinen Bildschirmen und für Screenreader sichtbar ist	Zellen von Matrizen
.ls-input-group-extra	Das Präfix oder Suffix eines Eingabefelds	Kurzer freier Text, Zahleneingabe, Mehrfache kurze Texte, Mehrfache numerische Eingabe
.ls-js-hidden	Ausgeblendet, wenn JavaScript aktiv ist	Dual Matrix, Liste (Optionsfelder)
.ls-no-js-hidden	Ausgeblendet, wenn JavaScript nicht aktiv ist	Rangfolge
.ls-js-hidden-sr	Ausgeblendet, wenn JavaScript aktiv ist, wird aber weiterhin von Screenreadern vorgelesen	Rangfolge

In Liste (Optionsfelder) hat die Option „Keine Antwort“ die Klasse no-anwser-item (mit dieser Schreibweise) statt noanswer-item.

Dies ist zum Beispiel das HTML der Antworten einer Frage vom Typ Liste (Optionsfelder):

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

Validierungs- und Hinweisklassen

Validierungshinweise (wie „Bitte wählen Sie eine der folgenden Antworten“ oder „Bitte geben Sie eine Zahl zwischen 1 und 10 ein“) haben immer die Klasse ls-em-tip. Während der Teilnehmer antwortet, fügt LimeSurvey ls-em-success hinzu, wenn die Regel des Hinweises erfüllt ist, und ls-em-error, wenn sie nicht erfüllt ist. So können Sie die beiden Zustände unterschiedlich gestalten. Hinweise, die mit der Einstellung Hinweis verstecken der Frage ausgeblendet werden, erhalten die Klasse hide-tip.

Jeder Hinweis hat außerdem eine Klasse für seinen Typ:

Klasse	Hinweis
.em_default	Der Standardhinweis des Fragetyps (zum Beispiel „Bitte wählen Sie eine der folgenden Antworten“)
.em_num_answers	Minimale oder maximale Anzahl von Antworten
.em_value_range	Minimaler oder maximaler Wert
.em_sum_range	Minimale oder maximale Summe der Werte
.em_sum_equals	Die Werte müssen sich zu einer vorgegebenen Summe addieren
.em_value_integer	Nur ganze Zahlen sind erlaubt
.em_numbers_only	Nur Zahlen sind erlaubt
.em_other_numbers_only	Im Feld „Sonstiges“ sind nur Zahlen erlaubt
.em_other_comment_mandatory	Die Option „Sonstiges“ ist ausgewählt, aber das zugehörige Textfeld ist leer
.em_regex_validation	Die Antwort muss dem Validierungsmuster entsprechen
.em_q_fn_validation	Die Frage-Validierungsgleichung
.em_sq_fn_validation	Die Teilfragen-Validierungsgleichung

Rechts-nach-links-Sprachen (RTL)

Für Sprachen mit Schreibrichtung von rechts nach links hat das Element <html> die Klasse dir-rtl, und die Kerndesignvorlagen laden eine RTL-Version ihrer Haupt-CSS-Datei. Verwenden Sie .dir-rtl in Ihrem CSS für Regeln, die nur für Sprachen mit Schreibrichtung von rechts nach links gelten.

Tipps & Tricks

Diese Rezepte kommen in die Datei custom.css (oder, wo angegeben, in eine Twig-Datei) einer Designvorlage, die Sie von einer Kerndesignvorlage abgeleitet haben. Ersetzen Sie in den Beispielen #c0392b durch Ihre eigene Farbe.

Farbe von Radiobuttons und Kontrollkästchen ändern

Um eine der mit Fruity TwentyThree mitgelieferten Farben zu verwenden, wählen Sie in den Designvorlage-Optionen eine Designvorlagefarbe aus. In den Designvorlage-Optionen können Sie außerdem ein anderes Markierungssymbol wählen.

Für jede andere Farbe fügen Sie CSS in die Datei custom.css ein. Die Kerndesignvorlagen zeichnen ihre eigenen Radiobuttons und Kontrollkästchen, anstatt die Standardelemente des Browsers zu verwenden. Um die Farbe zu ändern, müssen Sie daher diese gezeichneten Elemente anpassen.

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity und Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

Achten Sie auf einen ausreichenden Kontrast zwischen der Farbe und dem Hintergrund, damit auch Teilnehmende mit eingeschränktem Sehvermögen erkennen können, welche Antworten ausgewählt sind.

Radiobuttons und Kontrollkästchen vergrößern

Größere Radiobuttons und Kontrollkästchen lassen sich auf Smartphones und Tablets leichter antippen. Dies funktioniert in allen Kerndesignvorlagen:

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Fügen Sie in Fruity TwentyThree zusätzlich etwas Abstand zwischen den Radiobuttons und dem Antworttext hinzu:

.radio-item label {
    padding-left: 14px;
}

Werte bis etwa 1,4 funktionieren ohne weitere Änderungen. Bei größeren Werten überlappen die Steuerelemente auf kleinen Bildschirmen den Antworttext und die Ränder der Matrixzeilen. Dann müssen Sie zusätzlich mehr Platz um sie herum schaffen.

Farbe des Fortschrittsbalkens ändern

.progress-bar {
    background-color: #c0392b;
}

Inhalte nur in einer Sprache anzeigen

Das Element <body> hat eine Klasse mit der aktuellen Sprache, zum Beispiel lang-en oder lang-fr. Damit können Sie je nach Sprache unterschiedliche Inhalte anzeigen, zum Beispiel eine Hilfezeile in der Fußzeile. Fügen Sie den Text für jede Sprache in eine Twig-Datei Ihrer Designvorlage ein, etwa subviews/footer/footer.twig:

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

Blenden Sie anschließend in custom.css die Texte der anderen Sprachen aus:

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

Pro Umfrage ein anderes Logo verwenden

Sie benötigen nicht für jedes Logo eine eigene Designvorlage. Die Designvorlage-Optionen können für eine einzelne Umfrage festgelegt werden: Öffnen Sie die Umfrage, klicken Sie im Menü Umfrage-Einstellungen auf Designvorlage-Optionen und wählen Sie eine andere Logo-Datei aus. Siehe Designvorlage-Optionen.

Ein benutzerdefiniertes Favicon anzeigen

Ein Favicon ist das kleine Symbol, das im Browser-Tab und in Lesezeichen angezeigt wird. Die Kerndesignvorlagen zeigen die Datei files/favicon.ico der Designvorlage an. Um Ihr eigenes Symbol zu verwenden, nennen Sie es favicon.ico und laden Sie es im Bereich Andere Dateien Ihrer erweiterten Designvorlage hoch. Es ersetzt das Symbol der übergeordneten Designvorlage.

Logo in Fruity TwentyThree zentrieren

Aktivieren Sie in den Designvorlage-Optionen das Logo und fügen Sie dann Folgendes in custom.css ein:

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Eigenes Logo zur öffentlichen Umfragenliste hinzufügen

Die öffentliche Umfragenliste zeigt standardmäßig das LimeSurvey-Logo an. So zeigen Sie Ihr eigenes Logo an:

1. Erweitern Sie Fruity TwentyThree und öffnen Sie Ihre Designvorlage im Designvorlage-Editor.
2. Laden Sie Ihr Logo im Bereich Andere Dateien hoch.
3. Wählen Sie den Bildschirm Umfragenliste aus und öffnen Sie layout_survey_list.twig.
4. Suchen Sie das <div>, das {{ include('./ls_logo_svg.twig') }} enthält. Ersetzen Sie dieses gesamte <div> einschließlich der include-Zeile durch den Code, der unterhalb dieser Schritte angezeigt wird.
5. Klicken Sie auf In lokale Vorlage kopieren und Änderungen speichern.
6. Gehen Sie zu Konfiguration > Globale Einstellungen > Generell und wählen Sie Ihre Designvorlage als Designvorlage für öffentliche Umfragelisten und Fehlerseiten aus.

Verwenden Sie den Namen Ihrer hochgeladenen Datei und den Namen Ihrer Organisation als Alternativtext:

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

Eine Trennlinie in Dual-Matrix-Fragen hinzufügen

So zeichnen Sie eine vertikale Linie zwischen den beiden Skalen einer Frage vom Typ Dual Matrix:

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

JavaScript in Fragen

Um JavaScript auf allen Seiten Ihrer Umfragen auszuführen, fügen Sie es in die Datei custom.js Ihrer Designvorlage ein (siehe oben).

Sie können auch ein Skript in den Text einer einzelnen Frage oder Gruppe einfügen. LimeSurvey entfernt Skripte aus diesen Texten, es sei denn, der XSS-Filter ist für Ihren Benutzer deaktiviert. Der Filter gilt nie für Superadministratoren. Für andere Benutzer muss Filtere HMTL auf XSS unter Konfiguration > Globale Einstellungen > Sicherheit ausgeschaltet sein. Tun Sie dies nur, wenn Sie allen vertrauen, die Umfragen bearbeiten können. Details und Beispiele finden Sie unter Workarounds: Manipulating a survey at runtime using Javascript.