Actions

Theme options/de: Difference between revisions

From LimeSurvey Manual

(Created page with "{{Box|Diese Einstellungen stehen erst ab LimeSurvey Version 3 zur Verfügung}}")
No edit summary
 
(44 intermediate revisions by 3 users not shown)
Line 3: Line 3:
__TOC__
__TOC__


<div class="simplebox">[[File:help.png]] Seit LimeSurvey 3 besteht ein völlig neues System zum bearbeiten von Designvorlagen, welches auf [https://twig.symfony.com/ Twig 1.29] und [https://getbootstrap.com/ Bootstrap] basiert. </div>
<div class="simplebox">[[File:help.png]] '''LimeSurvey 3'' führt ein neues Template-Engine-System ein, basierend auf [https://twig.symfony.com/ Twig 1.29] und [https://getbootstrap.com/ Bootstrap], das die Vererbung von Vorlagen und verschiedene Vorlagenoptionen ermöglicht.</div>




Line 9: Line 9:




=Introduction=
=Einführung=


LimeSurvey 3 contains a new feature called '''theme options''' that offers a set of various tools that allow the survey administrators to quickly and easily change the themes-related settings of their surveys.
„Themenoptionen“ bietet eine Reihe von Tools, mit denen Umfrageadministratoren schnell und einfach die themenbezogenen Einstellungen ihrer Umfragen ändern können.


= Umfrageoptionen für die Designvorlage =


=Theme options panel=
Greifen Sie über [[Umfrageeinstellungen|Umfrageeinstellungen]] auf die Funktion „Themenoptionen“ zu:
 
Access the new '''theme options''' feature from the [[Survey settings|survey settings]]:




Line 22: Line 21:




The toolbar of the panel contains two tabs: the simple and advanced options of the theme editor.
Die Symbolleiste des Panels enthält zwei Registerkarten: die Registerkarte „Einfache Optionen“ und die Registerkarte „Erweiterte Optionen“.




==Simple options==
== Einfache Optionen ==


Once accessed, the following page will be loaded:
Auf der Seite „Themenoptionen“ wird Folgendes angezeigt:




Line 33: Line 32:




{{Alert|Title=Attention|text= Please note that each theme comes with certain options that can be changed from the survey '''theme options'''. In this wiki section, the default LimeSurvey theme '''fruity''' is used to show everyone the easiness through which quick and easy, yet powerful changes can be implemented to a theme by users without any prior knowledge in HTML, php, and/or CSS.}}
{{Alert|Title=Achtung|text=Bitte beachten Sie, dass jedes Thema über bestimmte Optionen verfügt, die über die Optionen des „Umfragethemas“ geändert werden können. In diesem Wiki-Abschnitt wird das Standard-LimeSurvey-Theme „fruity“ verwendet, um zu zeigen, wie schnell und einfach, aber dennoch wirkungsvolle Änderungen an einem Theme von Benutzern ohne Vorkenntnisse in HTML, PHP und/oder CSS implementiert werden können. }}


The '''simple options tab''' is preselected. The most important survey theme settings can be changed from here:
Folgende Einstellungen können hier vorgenommen werden:


* '''Inherit everything:''' If the ''yes'' button is selected, all the theme configurations will be inherited from the global [[Themes|configuration level]]. If you click ''no'' and click on the '''Save''' button located in the upper right part of the screen, more theme configuration options will be displayed. Each of these options can be set to:
* '''Alles erben:''' Wenn die Schaltfläche ''Ja'' ausgewählt wird, werden alle Theme-Konfigurationen von der globalen [[Themes|Konfigurationsebene]] geerbt. Wenn Sie auf „Nein“ klicken und oben rechts auf dem Bildschirm auf die Schaltfläche „Speichern“ klicken, werden weitere Optionen zur Designkonfiguration angezeigt. Jede dieser Optionen kann wie folgt eingestellt werden:
** inherit the survey group theme configurations - ''inherit'' (unless unchanged, your survey theme will inherit the global theme configuration);
** die Theme-Konfigurationen der Umfragegruppe erben – „erben“ (sofern nicht geändert, erbt Ihr Umfragethema die globale Theme-Konfiguration);
** not inherit any global theme configuration - ''no'';  
** keine globalen Theme-Konfigurationen erben Theme-Konfiguration – „nein“;  
** or enable another configuration - ''yes''. The theme settings can be configured as you wish if this option is chosen. You can observe that each theme setting allows you to select the ''inherit'' value.
** oder eine andere Konfiguration aktivieren – „Ja“. Bei Auswahl dieser Option können die Theme-Einstellungen nach Ihren Wünschen konfiguriert werden. Sie können beobachten, dass Sie bei jeder Designeinstellung den Wert „erben“ auswählen können.


{{Box|The inheritance system is applied on three levels:
{{Box | Das Vererbungssystem wird auf drei Ebenen angewendet
* '''at the global level''' (accessible from the template list). The other two levels inherit the global theme settings;
* '''Auf globaler Ebene''' (Zugriff über die Vorlagenliste). Die anderen beiden Ebenen erben die globalen Designeinstellungen;
* '''at the survey group level''' (accessible from the survey setting panel). The theme settings at the survey group level inherit the global theme settings;
* '''Auf der Ebene der Umfragegruppe''' (über das Einstellungsfenster der Umfrage). Die Designeinstellungen auf der Umfragegruppenebene übernehmen die globalen Designeinstellungen.
* '''at the survey level'''. The survey theme settings inherit the survey group theme settings.}}
* '''Auf der Umfrageebene'''. Die Einstellungen für das Umfragethema übernehmen die Einstellungen für das Thema der Umfragegruppe.}}


* '''Theme fonts:''' Select the font you wish to use for your theme;
* '''Design-Schriften: '''Wählen Sie die Schriftart aus, die Sie für Ihr Design verwenden möchten;
* '''Theme variations:''' Select one of the available theme variations from the dropdown list. It changes the font and the icons colour.
* '''Theme-Variationen:''' Wählen Sie eine der verfügbaren Theme-Variationen aus der Dropdown-Liste aus. Es ändert die Schriftart und die Farbe der Symbole.




===No inheritance===
=== Keine Vererbung ===


As mentioned above, you can choose from the survey settings menu '''not to inherit''' the [[Themes|global theme configuration]]. Once you click on the '''Save''' button, more options will be displayed:
Wie oben erwähnt, können Sie im Umfrage-Einstellungsmenü auswählen, dass die [[Themes|globale Theme-Konfiguration]] nicht übernommen werden soll. Sobald Sie auf die Schaltfläche „Speichern“ klicken, werden weitere Optionen angezeigt:




Line 59: Line 58:




{{Box|To show the power of this feature, the below explanations will be based on the '''fruity''' theme. Please note that each theme comes with its own customizable options.}}
{{Box|Um die Leistungsfähigkeit dieser Funktion zu veranschaulichen, basieren die folgenden Erklärungen auf dem Thema „fruchtig“. Bitte beachten Sie, dass jedes Thema über eigene anpassbare Optionen verfügt.}}


*'''Ajax mode:''' If enabled, the survey page will be loaded faster via ajax (''recommended for the average LimeSurvey user''). If disabled, the page will be loaded via page reload, which is better for debugging purposes;
* '''Ajax-Modus:''' Wenn aktiviert, wird die Umfrageseite schneller über Ajax geladen (''empfohlen für den durchschnittlichen LimeSurvey-Benutzer''). Wenn diese Option deaktiviert ist, wird die Seite durch Neuladen der Seite geladen.
*'''Survey container:''' If ''yes'' is selected, the survey will be displayed in a container - its width is limited. This option is useful if your survey participants complete your survey from their mobile phones or tablets because the survey width is controlled. Therefore, it is more comfortable for your respondents because they will not have to scroll right anymore to read the whole question or to see all the answer options. If the survey is embedded in a blog and/or forum, you can also deactivate this option since they already use a certain width.  
* '''Umfrage-Container:''' Wenn ''Ja'' ausgewählt ist, wird die Umfrage in einem Container angezeigt - seine Breite ist begrenzt. Diese Option ist nützlich, wenn Ihre Umfrageteilnehmer Ihre Umfrage auch von ihren Mobiltelefonen oder Tablets aus abschließen. Dadurch ist es für Ihre Befragten angenehmer, da sie nicht mehr nach rechts scrollen müssen, um die gesamte Frage zu lesen oder alle Antwortmöglichkeiten zu sehen.  
*'''Question borders:''' If enabled, each question will be shown within a border. If set to ''no'', the questions will not be contained in a box (so you can use large array question types that are bigger than the screen width);
* '''Fragereahmen:''' Wenn aktiviert, wird jede Frage innerhalb einer Umrandung angezeigt. Bei der Einstellung ''nein'' werden die Fragen nicht in einer Box enthalten (Sie können also große Array-Fragetypen verwenden, die größer als die Bildschirmbreite sind)
*'''Question shadow:''' If enabled, a shadow will be displayed around the in(visible) question borders.
* '''Frageschatten:''' Wenn aktiviert, wird ein Schatten um die (sichtbaren) Fragenumrandungen angezeigt.


<hr width="50%" style="margin:auto">
-


*'''Background color:''' Select the background colour of the whole question, including the answers;
* '''Hintergrundfarbe:''' Wählen Sie die Hintergrundfarbe der gesamten Frage, einschließlich der Antworten;
*'''Font color:''' Change the font color by selecting from the popup menu the desired color.
* '''Schriftfarbe:''' Ändern Sie die Schriftfarbe, indem Sie im Popup-Menü die gewünschte Farbe auswählen.  
*'''Question background color:''' Change the question background color by selecting from the popup menu the desired color.
* '''Hintergrundfarbe der Frage:''' Ändern Sie die Hintergrundfarbe der Frage, indem Sie im Popup-Menü die gewünschte Farbe auswählen!
*'''Check icon:''' This setting allows you to select the desired check icon when multiple choice question types are employed.
* '''Markierungsssymbol:''' Mit dieser Einstellung können Sie die gewünschte Farbe auswählen. Aktivieren Sie das Symbol, wenn Multiple-Choice-Fragetypen verwendet werden.


<hr width="50%" style="margin:auto">
-


*'''Background image:''' If set to ''no'', you may select a different background image from the one used within your survey group and/or global theme settings. You may also '''upload''' a personalised survey background image by clicking on the '''upload''' button located in the bottom of the theme settings panel and selecting the desired image from your computer;
*'''Hintergrundbild:'' Wenn auf ''Nein'' gesetzt, können Sie ein anderes Hintergrundbild als das in Ihrer Umfragegruppe und/oder den globalen Designeinstellungen verwendete auswählen. Sie können auch ein personalisiertes Hintergrundbild für die Umfrage „hochladen“, indem Sie auf die Schaltfläche „Hochladen“ unten im Bedienfeld „Themeneinstellungen“ klicken und das gewünschte Bild auf Ihrem Computer auswählen;
*'''Brand logo:''' If set to ''no'', the name of the survey will be shown in the top bar, else, you can select one of the pictures inside the file directory to be used as logo picture.
*''Markenlogo:'' Wenn auf ''Nein'' gesetzt, wird der Name der Umfrage in der oberen Leiste angezeigt, oder Sie können eines der Bilder im Dateiverzeichnis auswählen, das als Logobild verwendet werden soll.


<hr width="50%" style="margin:auto">
-


*'''Animate body:''' If set to ''yes'', you can choose one of the animations to apply when the "body" of the survey is loaded;
* "HTML-Body"/"Fragen"/"Warnung"/"Kontrollkästchen"/"Optionsfelder" anmieren:
*'''Animate question:''' If set to ''yes'', you choose one of the animations to apply to your survey questions when they are loaded.
** hier können Sie etwaige Animationen festlegen bzw. ausschalten
*'''Animate alert:''' If set to ''yes'', your survey alerts (when the survey data is not recorded or the wrong token is typed in) will be animated according to the selected animation option.
*'''Animate checkbox:''' If set to ''yes'', anytime you check an answer option, the animation is triggered.
*'''Animate radio buttons:''' If set to ''yes'', anytime you select an option from a radio-type question, the animation is triggered.


{{Box|The library used for animations is [https://daneden.github.io/animate.css/ animate.css]. You can either use the default one or add your own animation library.}}
{{Box|Die für Animationen verwendete Bibliothek ist [https://daneden.github.io/animate.css/animate.css]. Sie können entweder die Standardeinstellung verwenden oder Ihre eigene Animationsbibliothek hinzufügen.}}


{{Note|Type in a number in the duration field. If you type ten (10), then the animation will last for 10 seconds.}}
{{Hinweis|Geben Sie eine Zahl in das Feld „Dauer“ ein. Wenn Sie zehn (10) eingeben, dauert die Animation 10 Sekunden.}}


<hr width="50%" style="margin:auto">
-


*'''Fruity fonts:''' Select the font you wish to use for your theme;
* '''Design-Schriften: '''Wählen Sie die Schriftart aus, die Sie für Ihr Design verwenden möchten;
*'''Fruity variations:'''Select one of the available theme variations from the dropdown list. It changes the font and the icons colour.
* '''Theme-Variationen:''' Wählen Sie eine der verfügbaren Theme-Variationen aus der Dropdown-Liste aus. Es ändert die Schriftart und die Farbe der Symbole.


<hr width="50%" style="margin:auto">
-


*'''Upload:''' Browse your computer to upload an image to be used as logo or background image for your theme. Writing permissions might be requested on the "/themes/survey/fruity/files" folder - the location where the uploaded images will be stored in your LimeSurvey installation.
* '''Ein Bild hochladen:''' Hier können Sie eigene Logos oder Hintergrundbilder auf den Server laden. Möglicherweise werden Schreibberechtigungen für den Ordner "/ themes / survey / fruity / files" angefordert.


==Advanced options==
== Erweiterte Optionen ==
{{QS:Theme editor - advanced options}}
{{QS:Theme editor - advanced options}}

Latest revision as of 14:37, 8 August 2023

'LimeSurvey 3 führt ein neues Template-Engine-System ein, basierend auf Twig 1.29 und Bootstrap, das die Vererbung von Vorlagen und verschiedene Vorlagenoptionen ermöglicht.


Diese Einstellungen stehen erst ab LimeSurvey Version 3 zur Verfügung


Einführung

„Themenoptionen“ bietet eine Reihe von Tools, mit denen Umfrageadministratoren schnell und einfach die themenbezogenen Einstellungen ihrer Umfragen ändern können.

Umfrageoptionen für die Designvorlage

Greifen Sie über Umfrageeinstellungen auf die Funktion „Themenoptionen“ zu:



Die Symbolleiste des Panels enthält zwei Registerkarten: die Registerkarte „Einfache Optionen“ und die Registerkarte „Erweiterte Optionen“.


Einfache Optionen

Auf der Seite „Themenoptionen“ wird Folgendes angezeigt:



  Bitte beachten Sie, dass jedes Thema über bestimmte Optionen verfügt, die über die Optionen des „Umfragethemas“ geändert werden können. In diesem Wiki-Abschnitt wird das Standard-LimeSurvey-Theme „fruity“ verwendet, um zu zeigen, wie schnell und einfach, aber dennoch wirkungsvolle Änderungen an einem Theme von Benutzern ohne Vorkenntnisse in HTML, PHP und/oder CSS implementiert werden können.


Folgende Einstellungen können hier vorgenommen werden:

  • Alles erben: Wenn die Schaltfläche Ja ausgewählt wird, werden alle Theme-Konfigurationen von der globalen Konfigurationsebene geerbt. Wenn Sie auf „Nein“ klicken und oben rechts auf dem Bildschirm auf die Schaltfläche „Speichern“ klicken, werden weitere Optionen zur Designkonfiguration angezeigt. Jede dieser Optionen kann wie folgt eingestellt werden:
    • die Theme-Konfigurationen der Umfragegruppe erben – „erben“ (sofern nicht geändert, erbt Ihr Umfragethema die globale Theme-Konfiguration);
    • keine globalen Theme-Konfigurationen erben Theme-Konfiguration – „nein“;
    • oder eine andere Konfiguration aktivieren – „Ja“. Bei Auswahl dieser Option können die Theme-Einstellungen nach Ihren Wünschen konfiguriert werden. Sie können beobachten, dass Sie bei jeder Designeinstellung den Wert „erben“ auswählen können.
Das Vererbungssystem wird auf drei Ebenen angewendet
  • Auf globaler Ebene (Zugriff über die Vorlagenliste). Die anderen beiden Ebenen erben die globalen Designeinstellungen;
  • Auf der Ebene der Umfragegruppe (über das Einstellungsfenster der Umfrage). Die Designeinstellungen auf der Umfragegruppenebene übernehmen die globalen Designeinstellungen.
  • Auf der Umfrageebene. Die Einstellungen für das Umfragethema übernehmen die Einstellungen für das Thema der Umfragegruppe.


  • Design-Schriften: Wählen Sie die Schriftart aus, die Sie für Ihr Design verwenden möchten;
  • Theme-Variationen: Wählen Sie eine der verfügbaren Theme-Variationen aus der Dropdown-Liste aus. Es ändert die Schriftart und die Farbe der Symbole.


Keine Vererbung

Wie oben erwähnt, können Sie im Umfrage-Einstellungsmenü auswählen, dass die globale Theme-Konfiguration nicht übernommen werden soll. Sobald Sie auf die Schaltfläche „Speichern“ klicken, werden weitere Optionen angezeigt:



Um die Leistungsfähigkeit dieser Funktion zu veranschaulichen, basieren die folgenden Erklärungen auf dem Thema „fruchtig“. Bitte beachten Sie, dass jedes Thema über eigene anpassbare Optionen verfügt.


  • Ajax-Modus: Wenn aktiviert, wird die Umfrageseite schneller über Ajax geladen (empfohlen für den durchschnittlichen LimeSurvey-Benutzer). Wenn diese Option deaktiviert ist, wird die Seite durch Neuladen der Seite geladen.
  • Umfrage-Container: Wenn Ja ausgewählt ist, wird die Umfrage in einem Container angezeigt - seine Breite ist begrenzt. Diese Option ist nützlich, wenn Ihre Umfrageteilnehmer Ihre Umfrage auch von ihren Mobiltelefonen oder Tablets aus abschließen. Dadurch ist es für Ihre Befragten angenehmer, da sie nicht mehr nach rechts scrollen müssen, um die gesamte Frage zu lesen oder alle Antwortmöglichkeiten zu sehen.
  • Fragereahmen: Wenn aktiviert, wird jede Frage innerhalb einer Umrandung angezeigt. Bei der Einstellung nein werden die Fragen nicht in einer Box enthalten (Sie können also große Array-Fragetypen verwenden, die größer als die Bildschirmbreite sind)
  • Frageschatten: Wenn aktiviert, wird ein Schatten um die (sichtbaren) Fragenumrandungen angezeigt.

-

  • Hintergrundfarbe: Wählen Sie die Hintergrundfarbe der gesamten Frage, einschließlich der Antworten;
  • Schriftfarbe: Ändern Sie die Schriftfarbe, indem Sie im Popup-Menü die gewünschte Farbe auswählen.
  • Hintergrundfarbe der Frage: Ändern Sie die Hintergrundfarbe der Frage, indem Sie im Popup-Menü die gewünschte Farbe auswählen!
  • Markierungsssymbol: Mit dieser Einstellung können Sie die gewünschte Farbe auswählen. Aktivieren Sie das Symbol, wenn Multiple-Choice-Fragetypen verwendet werden.

-

  • 'Hintergrundbild: Wenn auf Nein gesetzt, können Sie ein anderes Hintergrundbild als das in Ihrer Umfragegruppe und/oder den globalen Designeinstellungen verwendete auswählen. Sie können auch ein personalisiertes Hintergrundbild für die Umfrage „hochladen“, indem Sie auf die Schaltfläche „Hochladen“ unten im Bedienfeld „Themeneinstellungen“ klicken und das gewünschte Bild auf Ihrem Computer auswählen;
  • Markenlogo: Wenn auf Nein gesetzt, wird der Name der Umfrage in der oberen Leiste angezeigt, oder Sie können eines der Bilder im Dateiverzeichnis auswählen, das als Logobild verwendet werden soll.

-

  • "HTML-Body"/"Fragen"/"Warnung"/"Kontrollkästchen"/"Optionsfelder" anmieren:
    • hier können Sie etwaige Animationen festlegen bzw. ausschalten
Die für Animationen verwendete Bibliothek ist [1]. Sie können entweder die Standardeinstellung verwenden oder Ihre eigene Animationsbibliothek hinzufügen.


Template:Hinweis

-

  • Design-Schriften: Wählen Sie die Schriftart aus, die Sie für Ihr Design verwenden möchten;
  • Theme-Variationen: Wählen Sie eine der verfügbaren Theme-Variationen aus der Dropdown-Liste aus. Es ändert die Schriftart und die Farbe der Symbole.

-

  • Ein Bild hochladen: Hier können Sie eigene Logos oder Hintergrundbilder auf den Server laden. Möglicherweise werden Schreibberechtigungen für den Ordner "/ themes / survey / fruity / files" angefordert.

Erweiterte Optionen

<translate>

When you open the theme options tab, you can choose to edit either its simple options or its advanced options. “Advanced options” is just a naked form that gives you access to the main theme configuration fields from the database. To understand how it works, you should also read about the XML file and the creation of a theme from scratch. So, it’s rather complex and made for advanced users.

However, if you do wish to perform advanced settings editing, click on the advanced options tab



  • Files css: The CSS files that should be added to the template;
  • Files js: The JS files that should be added to the template;
  • Files Print Css: The CSS files to load when printing a template;
  • Options: This field includes the options (and their value) that should be parsed to the template view;
  • CssFramework Name: The name of the CSS framework to load. For now, only Bootstrap or nothing;
  • Cssframework Css: You can replace the core bootstrap.css in this field by a different custom version of it;
  • Cssframework Js: The field core boostrap.js can be replaced from here by a different custom version of it;
  • Packages To Load: You can load from this setting some core asset packages from LimeSurvey.

You’ll notice an upload input at the top, which gives you the possibility to upload a file into the file directory of the theme. These parameters can be used to change the entire appearance of the theme.

  Warning! : Don't touch the values unless you know what you're doing!


</translate>