Actions

Theme editor/de: Difference between revisions

From LimeSurvey Manual

(Created page with "*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...")
No edit summary
 
(58 intermediate revisions by the same user not shown)
Line 45: Line 45:
=Der LimeSurvey-Designeditor=
=Der LimeSurvey-Designeditor=


<div class="mw-translate-fuzzy">
'''Theme-Editor''': '''Konfiguration''' > '''Themes'''> '''Theme-Editor'''
Um das Verständnis und die schnelle Aktualisierung eines Templates zu erleichtern, bietet LimeSurvey einen''' Template Editor'' in der Hauptsymbolleiste der Anwendung an.  Dieser Vorlageneditor steht nur Benutzern zur Verfügung, die das Zugriffsrecht in den Benutzersicherheitseinstellungen haben und für Superadministratoren. Eine Vorlage wirkt sich auf alle Umfragen aus, und kann eine Umfrage unbrauchbar machen, wenn sie nicht korrekt aufgebaut ist.
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>




Line 81: Line 80:
===Eine Vorlage importieren/exportieren/kopieren===
===Eine Vorlage importieren/exportieren/kopieren===


<div class="mw-translate-fuzzy">
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.  
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]].
</div>


Am besten verwenden Sie jedoch die Import-/Export-/Kopierfunktionen für LimeSurvey-Vorlagen im Vorlageneditor.
Am besten verwenden Sie jedoch die Import-/Export-/Kopierfunktionen für LimeSurvey-Vorlagen im Vorlageneditor.
Line 826: Line 823:
*Geben Sie Ihr Skript in die Quelle einer Frage oder Gruppenbeschreibung ein.
*Geben Sie Ihr Skript in die Quelle einer Frage oder Gruppenbeschreibung ein.


{{Note|For further details, see the [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey|workaround section]].}}
{{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]].}}




==Tips & tricks==
==Tipps & Tricks==


===Language specific element===
===Sprachspezifisches Element===


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


Below, there are two help sentences, in French and English. Put this on endpage.pstpl:
Nachfolgend finden Sie zwei Hilfesätze in Französisch und Englisch. Fügen Sie dies in endpage.pstpl ein:


<syntaxhighlight lang="php"><div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<syntaxhighlight lang="php"><div class="fr" lang="fr">Bitte wenden Sie sich direkt an 000000</div>  
<div class="en" lang="en">For some help, please call 000000</div></syntaxhighlight>
<div class="en" lang="en"> Für Hilfe rufen Sie bitte 000000 an</div></syntaxhighlight>


and in template.css:
und in template.css:


<syntaxhighlight lang="php">.lang-fr .en{display:none}
<syntaxhighlight lang="php">.lang-fr .en{display:none}
.lang-en .fr{display:none}</syntaxhighlight>
.lang-en .fr{display:none}</syntaxhighlight>


===Change the layout of the survey page===
===Ändern Sie das Layout der Umfrageseite===


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.
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 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 <code lang="html">$defaulttemplate = 'yourtemplatename';</code>.
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===


<u>Mac users</u>, please note that the 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 workaround 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: ...


Another workaround is to use scripts in their mac-compiled counterparts.
Eine weitere Problemumgehung besteht darin, Skripte in ihren auf dem Mac kompilierten Gegenstücken zu verwenden.


<div class="mw-translate-fuzzy">
===Verwenden Sie dieselbe Vorlage mit unterschiedlichen Logos===
==Dasselbe Template mit verschiedenen Logos benutzen==
</div>


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


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php"><img src="{TEMPLATEURL}files/logoImage-{SID}.png"></syntaxhighlight>
<syntaxhighlight lang="php" enclose="div"><img src="{TEMPLATEURL}files/logoDatei-{SID}.png"></syntaxhighlight>
</div>


<div class="mw-translate-fuzzy">
=== Benutzerdefiniertes Favicon anzeigen===
== Eigenes Favicon zeigen ==
</div>


<div class="mw-translate-fuzzy">
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:
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.
#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.
#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.
#Fügen Sie den folgenden Code zu Ihrer "startpage.pstpl" for dem </head> Tag hinzu.
</div>


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="html4strict"><link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">  
<syntaxhighlight lang="html4strict" enclose="div"><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>
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"></syntaxhighlight>
</div>


=== Different appearance for survey-/question-pages===
=== Unterschiedliches Erscheinungsbild für Umfrage-/Fragenseiten===


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


An example from default template of LimeSurvey 1.91+:
Ein Beispiel aus der Standardvorlage von LimeSurvey 1.91+:


<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
.page-odd table.question-group {
.page-odd table.question-group {
 background-color: #D2F2D3;
Hintergrundfarbe: #D2F2D3;
}</syntaxhighlight>
}</syntaxhighlight>


If you do '''not''' want differentiate even and odd pages, find all instances of ''.page-odd'' in template.css and remove those styles.
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.


===Create a vertical separator border for dual scale array===
===Erstellen Sie einen vertikalen Trennrahmen für ein Dual-Scale-Array===


To create a vertical separator border for a dual scale array, you can add the following lines to your '''template.css'''-file.
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.


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


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


===Adding your own logo to the survey list===  
===Hinzufügen Ihres eigenen Logos zur Umfrageliste===  


# First please open the theme editor for the theme you like to use. [[File:OpenThemeEditor.jpg]]
# Bitte öffnen Sie zunächst den Theme-Editor für das Theme, das Sie verwenden möchten. [[File:OpenThemeEditor.jpg]]
# We recommend to use fruity, it is our best theme currently.  
# Wir empfehlen die Verwendung von Fruity, es ist derzeit unser bestes Theme.  
# Then extend the theme and give it a name you will recognize. [[File:ExtendTheme.jpg]]
# Erweitern Sie dann das Thema und geben Sie ihm einen Namen, den Sie wiedererkennen. [[File:ExtendTheme.jpg]]
# In the following view you may upload the logo you want to use. [[File:UploadFileTheme.jpg]]
# In der folgenden Ansicht können Sie das Logo hochladen, das Sie verwenden möchten. [[File:UploadFileTheme.jpg]]
# Select the editor screen `Survey List´ in the Screen dropdown in the top right corner. [[File:OpenScreenSurveyList.jpg]]
# Wählen Sie im Dropdown-Menü „Bildschirm“ in der oberen rechten Ecke den Editor-Bildschirm „Umfrageliste“ aus. [[File:OpenScreenSurveyList.jpg]]
# Then select `layout_survey_list.twig´ in the left side menu. [[File:EditLayoutSurveyListTwig.jpg]]
# Wählen Sie dann „layout_survey_list.twig“ im Menü auf der linken Seite. [[File:EditLayoutSurveyListTwig.jpg]]
# In the editor scroll to line 126 and change the marked part to the filename of the image you uploaded to the theme before. [[File:ChangeSurveyListHeaderImageEditor.jpg]]
# 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]]
# Save your file. [[File:ThemeEditorSaveChanges.jpg]]
# Speichern Sie Ihre Datei. [[File:ThemeEditorSaveChanges.jpg]]
# Change default theme to your extended theme. [[File:ChangeDefaultTheme.jpg]]
# Ändern Sie das Standardthema in Ihr erweitertes Thema. [[Datei:ChangeDefaultTheme.jpg]]


=== Align logo to the centre of the survey page===
=== Logo in der Mitte der Umfrageseite ausrichten===
This example is for the "extends_fruity" template. For other templates the required CSS may be different.
Dieses Beispiel gilt für die Vorlage „extends_fruity“. Für andere Vorlagen kann das erforderliche CSS unterschiedlich sein.
# Login to the LimeSurvey admin area
# Melden Sie sich im Admin-Bereich von LimeSurvey an
# Browse to the theme editor: Configuration > Themes
# Navigieren Sie zum Theme-Editor: Konfiguration > Themes
# Find "LimeSurvey Fruity Theme" in the list and click the "Theme Editor" button
# Suchen Sie in der Liste nach „LimeSurvey Fruity Theme“ und klicken Sie auf „ Schaltfläche „Theme-Editor“
# Click "custom.css" in the files list on the left at near the bottom of the page
# Klicken Sie in der Dateiliste links unten auf der Seite auf „custom.css“
# Copy the following CSS into that file and press "Save Changes"
# Kopieren Sie das folgende CSS in diese Datei und klicken Sie auf „Änderungen speichern“.


<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
.navbar-fixed-top > div.navbar-header {
.navbar-fixed-top > div.navbar-header {
    width: 100% !important;
Breite: 100 % !important;
}
}


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


.navbar-fixed-top > div.navbar-header > div > img {
.navbar-fixed-top > div.navbar-header > div > img {
    margin: 0 auto 0 auto !important;
margin: 0 auto 0 auto !important;
}
}
</syntaxhighlight>
</syntaxhighlight>
Line 956: Line 943:




==Custom question views {{NewIn|3.0}}==  
==Benutzerdefinierte Fragenansichten {{NewIn|3.0}}==  


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


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.
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, find 'config'=>array and add this line to the array : 'allow_templates_to_overwrite_views'=>1
*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, set "overwrite_question_views" to true
*In /{your_template}/config.xml setzen Sie „overwrite_question_views“ auf true
*Copy application/views/survey/* to template/{your_view_directory}/survey/
*Kopieren Sie application/views/survey/* nach 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/
*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/


==Insert custom CSS or JavaScript files for template==  
==Fügen Sie benutzerdefinierte CSS- oder JavaScript-Dateien für template== ein


As of version 2.50, you can use the config.xml File to Automatically Load Plugin Files.
Ab Version 2.50 können Sie die Datei config.xml verwenden, um Plugin-Dateien automatisch zu laden.


*Upload your files to the template /css or /scripts folder
*Laden Sie Ihre Dateien in den Vorlagenordner /css oder /scripts hoch
*In /{your_template}/config.xml, add the file paths to the <css> or <js> blocks, something like this:<syntaxhighlight lang="xml"><css>
*Fügen Sie in /{your_template}/config.xml die Dateipfade hinzu<css> oder<js> Blöcke, etwa so:<syntaxhighlight lang="xml"><css>  
<filename>css/jquery-ui-custom.css</filename>
<filename> css/jquery-ui-custom.css</filename>  
<filename>css/bootstrap-slider.css</filename>
<filename> css/bootstrap-slider.css</filename>


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


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


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


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


==Class definitions (for Developers)==
==Klassendefinitionen (für Entwickler)==


===answer-list===
===Antwortliste===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
|-
|arrays/5point || A || tr
|arrays/5point || Ein || tr
|-
|-
|arrays/10point|| B|| tr
|arrays/10point|| B|| tr
Line 1,003: Line 990:
|arrays/array || F || tr
|arrays/array || F || tr
|-
|-
|arrays/column || H || tr and col
|Arrays/Spalte || H || tr und col
|-
|-
|arrays/dualscale || 1 || tr
|arrays/dualscale || 1 || tr
Line 1,011: Line 998:
|arrays/yesnouncertain || C || tr
|arrays/yesnouncertain || C || tr
|-
|-
|gender || G || div and ul
|Geschlecht || G || div und ul
|-
|-
|list_with_comment || O || div
|list_with_comment || O || div
|-
|-
|ranking || R || ul and div
|ranking || R || ul und div
|-
|-
|yesno || Y || ul and div
|yesno || Y || ul und div
|-
|-
|ranking_advanced || R || ul and div
|ranking_advanced || R || ul und div
|-
|-
|listradio || L || div
|listradio || L || div
Line 1,032: Line 1,019:
===radio-list===
===radio-list===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
| janein || Y || ul
|-
|-
| yesno || Y || ul
|Geschlecht || G || ul
|-
|gender || G || ul
|-
|-
|arrays/yesnouncertain || C || tr
|arrays/yesnouncertain || C || tr
Line 1,044: Line 1,031:
|arrays/dualscale || 1 || tr
|arrays/dualscale || 1 || tr
|-
|-
|arrays/5point || A || table and tr
|arrays/5point || Ein || Tabelle und tr
|-
|-
|arrays/10point || B || tr
|arrays/10point || B || tr
Line 1,050: Line 1,037:
|arrays/array || F || tr
|arrays/array || F || tr
|-
|-
|arrays/column || H || col
|Arrays/Spalte || H || col
|-
|-
|listradio || L || div
|listradio || L || div
|-
|-
|list_with_comment || O || div followed by ul
|list_with_comment || O || div gefolgt von ul
|-
|-
|}
|}
Line 1,060: Line 1,047:
===radio-item===
===radio-item===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
|-
|arrays/yesnouncertain || C || td
|arrays/yesnouncertain || C || td
|-
|-
Line 1,068: Line 1,055:
|arrays/10point || B || td
|arrays/10point || B || td
|-
|-
|arrays/5point || A || td
|arrays/5point || Ein || td
|-
|-
|arrays/array || F || td
|arrays/array || F || td
|-
|-
|arrays/column || H || td
|Arrays/Spalte || H || td
|-
|-
|arrays/dualscale || 1 || td
|arrays/dualscale || 1 || td
Line 1,078: Line 1,065:
|arrays/increasesamedecrease || E || td
|arrays/increasesamedecrease || E || td
|-
|-
|gender || G || li
|Geschlecht || G || li
|-
|-
|listradio || L || li
|listradio || L || li
|-
|-
|yesno || Y || li
|janein || Y || li
|-
|-
|listradio || L || li and div
|listradio || L || li und div
|-
|-
|image_select-listradio || L || li and div
|image_select-listradio || L || li und div
|-
|-
|list_with_comment || 0 || li
|list_with_comment || 0 || li
Line 1,094: Line 1,081:
===list-group===
===list-group===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
|-
|yesno || Y || ul
|janein || Y || ul
|-
|-
|5pointchoice || 5 || ul
|5pointchoice || 5 || ul
|-
|-
|gender || G || ul
|Geschlecht || G || ul
|-
|-
|ranking || R || ul
|ranking || R || ul
|-
|-
|ranking_advanced || R || ul and div
|ranking_advanced || R || ul und div
|-
|-
|question_index_group_buttons || || div
|question_index_group_buttons || || div
|-
|-
|question_index_questions_buttons || || div
|question_index_questions_buttons || || div
|-
|-
|}
|}
Line 1,114: Line 1,101:
===list-group-horizontal===
===list-group-horizontal===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!'''Frage'''!!'''Fragetyp'''!!'''Elemente''' ! N!|-
|-
|janein || Y || ul
|yesno || Y || ul
|-
|-
|5pointchoice || 5 || ul
|5pointchoice || 5 || ul
|-
|-
|gender || G || ul
|Geschlecht || G || ul
|-
|-
|}
|}
Line 1,126: Line 1,112:
===list-unstyled===
===list-unstyled===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
|-
|list_with_comment || 0 || ul
|list_with_comment || 0 || ul
|-
|-
Line 1,150: Line 1,136:
|inputondemand/multipleshorttext || Q || ul
|inputondemand/multipleshorttext || Q || ul
|-
|-
|register_error|| || ul
|register_error|| || ul
|-
|-
|register_message|| || ul
|register_message|| || ul
|-
|-
|layout_survey_list || || ul
|layout_survey_list || || ul
|-
|-
|load|| || ul
|load|| || ul
|-
|-
|save|| || ul
|save|| || ul
|-
|-
|captcha|| || ul
|captcha|| || ul
|-
|-
|}
|}
Line 1,166: Line 1,152:
===select-list===
===select-list===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
|-
|ranking|| R || ul
|Rangliste|| R || ul
|-
|-
|ranking_advanced|| R || ul
|ranking_advanced|| R || ul
Line 1,176: Line 1,162:
===checkbox-item===
===checkbox-item===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!''Frage'''!!''Fragetyp'''!!'''Elemente'''  
|-
|-
|multiflexi (Array numbers)|| : || td
|multiflexi (Array-Nummern)|| : || td
|-
|-
|multiplechoice|| M || li
|multiplechoice|| M || li
Line 1,186: Line 1,172:
|image_select-listradio|| L || li
|image_select-listradio|| L || li
|-
|-
|image_select-multiplechoice|| M || li and div
|image_select-multiplechoice|| M || li und div
|-
|-
|navigator|| || span
|navigator|| || span
|-
|-
|}
|}
Line 1,194: Line 1,180:
===checkbox-text-item===
===checkbox-text-item===
{|class=wikitable  
{|class=wikitable  
!'''Question'''!!'''Question Type'''!!'''elements'''  
!'''Frage'''!!'''Fragetyp'''!!'''Elemente''' ! N!|-
|-
|multiplechoice_with_comments|| P || li
|multiplechoice_with_comments|| P || li
|-
|-

Latest revision as of 07:17, 31 July 2023

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)