Wiki-Quellcode von Theme-Konfigurator-Plugin

Zeige letzte Bearbeiter
1 {{content /}}
2
3 {{figure image="plugin_theme_config_home_de.png"}}
4 Das Menü des Theme-Konfigurators, wie es erscheint, nachdem das Plugin zum ersten Mal installiert wurde. Standardmäßig gibt es bereits eine Vorlage für das mit {{formcycle/}} ausgelieferte //Modern-Theme//.
5 {{/figure}}
6
7 Das Theme-Konfigurator-Plugin ermöglicht es, verschiedene Layout-Einstellungen eines Formulars wie Schriftgrößen, Farben und Abstände über eine grafische Oberfläche zu bearbeiten.
8
9 Das Plugin sollte als System-Plugin installiert werden, kann prinzipiell aber auch als Mandant-Plugin installiert werden. Das Plugin an sich erfordert keine Einstellung oder Konfiguration. Nach der Installation gibt es links im Hauptmenü einen neuen Menüeintrag mit dem Namen //Theme-Konfigurator//.
10
11 Die Bedienung des Theme-Konfigurators gliedert sich in zwei Abschnitte, die sich jeweils an unterschiedliche Nutzergruppen richten:
12
13 ; Erstellen von Layout-Vorlagen
14 : Dies richtet sich an technisch versierte Nutzer, die Vorlagen für Layouts erstellen möchten. In einer Vorlage wird etwa festgelegt, welche Eigenschaften (Farben, Schriftgrößen etc.) bearbeitbar sein sollen. Basierend auf einer Vorlage kann dann ein Layout erstellt werden, in dem jeder Eigenschaft entsprechende Werte zugewiesen werden (Farbe=rot, Schriftgröße=12px etc.). Hierzu sind grundlegende Kenntnisse über {{smallcaps}}Css{{/smallcaps}} und [[{{smallcaps}}Scss{{/smallcaps}}>>url:https://sass-lang.com/]] notwendig. Für Nutzer, die keine Vorlagen erstellen sollen oder dürfen, kann diese Möglichkeit über ein [[Rollenrecht>>doc:Formcycle.UserInterface.UserSettings.Roles]] entzogen werden.
15 ; Erstellen von konkreten Layouts
16 : Dies richtet sich an gestalterisch versierte Nutzer. Basierend auf einer Vorlage kann ein konkretes Layout erstellt werden. Es ist auch möglich, mehrere Layouts basierend auf einer Vorlage zu erstellen, etwa eine Variation in Rot und eine Variation in Blau. Nachdem ein Layout erstellt wurde, kann es entwender als [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]]-Vorlage für den {{designer/}} oder als {{smallcaps}}Css{{/smallcaps}}-[[Mandantdatei>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] abgespeichert werden.
17
18 Wird das Plugin installiert, wird automatisch eine erste Layout-Vorlage im System angelegt. Diese enthält das mit {{formcycle/}} ausgelieferte //Modern-Theme//.
19
20 Technisch werden durch Layout-Vorlagen {{smallcaps}}Scss{{/smallcaps}}-Dateien mit Variablen definiert. Durch Layouts wird diesen Variablen jeweils ein Wert zugewiesen.
21
22 == Allgemeine Hinweise
23
24 === Rollenrechte
25
26 Dieses Plugin fügt dem [[Rollenmenü>>doc:Formcycle.UserInterface.UserSettings.Roles]] einige neue Rollenrechte hinzu. Daher ist es möglich, dass je nach Einstellungen einigen Benutzern bestimmte Möglichkeiten des Theme-Konfigurators nicht zur Verfügung stehen. In dem Fall sollte der entsprechende zuständige Administrator kontaktiert werden.
27
28 === Vollbildmodus
29
30 Da der Theme-Konfigurator viele Möglichkeiten bietet, kann der in {{formcycle/}} vorhandene Platz auf kleineren Bildschirmen nicht ausreichen. Hierfür gibt es einen Vollbildmodus, der durch Klick auf das Erweitern-Symbol ({{icon name="compress"/}}) rechts oben aktiviert und deaktiviert werden kann.
31
32 === Dateiablage
33
34 {{figure image="plugin_theme_config_client_files_de.png"}}
35 In den Mandantdateien werden die Konfigurationsdateien gespeichert, die von diesem Plugin benötigt werden. Dabei handelt es sich um automatisch generierte Dateien, die nicht manuell bearbeitet oder editiert werden sollten.
36 {{/figure}}
37
38 Die erstellten Layout-Vorlagen und Layouts werden als [[Mandantdatei>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] gespeichert. Diese automatisch erstellten Dateien sollten nicht manuell editiert oder gelöscht werden. Es ist aber etwa möglich, durch Export der entsprechenden Mandantdateien ein Backup zu erstellen und später wieder einzuspielen.
39
40 Die von diesem Plugin erzeugten Dateien haben verschiedene Dateiendungen:
41
42 ; .scss
43 : Steht für //Sassy CSS//. Hierbei handelt es sich um die {{smallcaps}}Scss{{/smallcaps}}-Datei, welche die Implementierung einer Layout-Vorlage enthält.
44 ; .thed
45 : Steht für //theme editor (configuration)//. Eine Konfigurationsdatei im {{smallcaps}}Json{{/smallcaps}}-Format, welche die bearbeitbaren Eigenschaften (Variables) der {{smallcaps}}Scss{{/smallcaps}}-Datei sowie die zu verwendeten Editoren enthält.
46 ; .thpc
47 : Steht für //theme processing (configuration)//. Eine Konfigurationsdatei im {{smallcaps}}Json{{/smallcaps}}-Format, welche die konkret festgelegten Werte eines Layout für die einzelnen bearbeitbaren Eigenschaften der Layout-Vorlage enthält.
48 ; .css
49 : Steht für //cascading style sheet//. Eine {{smallcaps}}Css{{/smallcaps}}-Datei, die aus einem Layout generiert wurde.
50
51 === Behebung fehlender oder falscher Referenzen
52
53 {{figure image="plugin_theme_config_error_resolution_de"}}
54 Falls eine Konfigurationsdatei ungültige Werte enthält, erscheint ein entsprechender Dialog zur Fehlerbehebung. Im hier abgebildeten Fall wurde ein Layout ausgewählt, wobei es die zu der Layout-Vorlage gehörende {{smallcaps}}Scss{{/smallcaps}}-Datei nicht mehr gibt. Es kann nun entweder eine neue {{smallcaps}}Scss{{/smallcaps}}-Datei angelegt werden oder das Layout gelöscht werden. Alternativ kann die Fehlerbehebung auch abgebrochen werden. In dem Fall erscheint der Dialog erneut, wenn das Layout ausgewählt wird.
55 {{/figure}}
56
57 In den Konfigurationsdateien der Layout-Vorlagen und Layouts werden Referenzen auf andere Dateien gespeichert. Etwa wird in der Layout-Datei eine (weiche) Referenz auf die Layout-Vorlage gespeichert. Falls etwa in den Mandantdateien eine referenzierte Datei gelöscht wird, erscheint im Theme-Konfigurator ein enstprechender Dialog mit einem Hinweis darauf. Hier kann die falsche oder fehlende Referenz behoben werden, etwa indem eine neue Layout-Vorlage erstellt wird oder eine andere Vorlage genutzt wird.
58
59 == Erstellen eines Layouts
60
61 {{figure image="plugin_theme_config_layout_settings_de.png"}}
62 Wurde in der Liste links durch Klick ein Layout ausgewählt, kann dieses bearbeitet werden. Rechts werden alle Eigenschaften angezeigt, welche die Layout-Vorlage erlaubt, zu bearbeiten. Im Bereich in der Mitte wird ein Vorschauformular mit dem aktuellen Layout angezeigt.
63 {{/figure}}
64
65 === Allgemeine Aktionen
66
67 {{figure image="plugin_theme_config_new_layout_de.png"}}
68 Mittels der entsprechenden Schaltfläche in der Liste links kann ein neues Layout basierend auf einer Layout-Vorlage erstellt werden.
69 {{/figure}}
70
71 Um ein neues Layout basierend auf einer Layout-Vorlage anzulegen, kann auf die Schaltfläche //Neues Theme// mit dem Plus-Symbol ({{icon name="plus"/}}) links in der Liste der Layout-Vorlagen geklickt werden. Es öffnet sich ein Dialog, wo der Name des neuen Layout eingegeben werden kann.
72
73 Nachdem ein neues Layout erstellt wurde, ist es links in der Liste unter der entsprechenden Vorlage zu sehen. Durch Klick auf das Layout wird es geöffnet und kann bearbeitet werden.
74
75 An jedem Layout gibt es in der Liste links ein {{icon name="power-off" /}}-Symbol (beim Überfahren mit der Maus). Wird auf dieses geklickt, kann das Layout als Standard-Modern-Theme markiert werden. Ist ein Layout als Standard-Modern-Theme markiert, wird das Layout für alle Formular angewendet, bei denen im {{designer /}} die Option //Modern Theme// aktiviert ist. Die Option //Modern Theme// findet sich im Formular-Tab rechts im {{designer/}}. Es ist zu beachten, dass immer nur ein Layout als Standard-Modern-Theme markiert werden kann. Hinweis: Technisch wird dabei eine Mandantdatei mit Namen //031-extended.css// angelegt, wodurch das durch {{formcycle /}} standardmäßig ausgelieferte Modern-Theme überschrieben wird.
76
77 In der Aktionsleiste ganz unten gibt es drei Aktionsmöglichkeiten:
78
79 ; Vorschau aktualisieren
80 : Aktualisiert das Vorschauformular in der Mitte, sodass es den aktuellen Stand widerspiegelt. In der Regel wird die Vorschau automatisch aktualisiert, sobald rechts eine Eigenschaft geändert wird. Sollte dies einmal nicht der Fall sein, kann diese Schaltfläche genutzt werden.
81 ; CSS herunterladen
82 : Falls notwendig, kann hier das {{smallcaps}}Css{{/smallcaps}} heruntergeladen werden, welches aus dem aktuellen Layout mit den aktuellen Einstellungen erzeugt wurde.
83 ; Speichern
84 : Speichert die aktuelle Konfiguration des Layout. Falls in der Konfiguration des Layouts eingestellt wurde, dass es als Mandantdatei oder Designer-Vorlage abgespeichert werden soll, werden diese Dateien jetzt ebenfalls erzeugt beziehungsweise aktualisiert.
85
86 === Vorschaubereich
87
88 {{figure image="plugin_theme_config_preview_settings_de.png"}}
89 Der Vorschaubereich, der zeigt, wie das aktuelle Layout an einem Formular aussehen würde. Standardmäßig wird hier ein Demoformular angezeigt, es kann aber auch ein vorhandenes Formular ausgewählt werden.
90 {{/figure}}
91
92 Im Bereich in der Mitte findet sich die Formularvorschau. Hier wird ein Formular angezeigt, wie es mit dem ausgewählten Layout aussehen würde. Standardmäßig wird hier ein generisches Testformular angezeigt. Bei Bedarf kann durch Klick auf das blaue Zahnradsymbol rechts oben ({{icon name="gear"/}}) auch ein bestehendes Formular für die Vorschau ausgewählt werden. Als fortgeschrittene Option ist es hier auch möglich, zusätzliche URL-Parameter an den Formularlink anzufügen, der im Vorschaubereich angezeigt wird.
93
94 === Editierbereich
95
96 Im Editierbereich rechts kann das Layout bearbeitet werden. Der Editierbereich gliedert sich in zwei Abschnitte.
97
98 Im ersten Abschnitt werden einige allgemeine Einstellungen zum Layout vorgenommen:
99
100 ; Unter Design (CSS) abspeichern
101 : Ist diese Option aktiviert, wird das Layout als Vorlage für den {{designer/}} im Menü [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] abgespeichert.
102 ; Unter Dateien (Mandant) abspeichern
103 : Ist diese Option aktiviert, wird das Layout als {{smallcaps}}Css{{/smallcaps}}-Datei in den [[Mandantdateien>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] abgespeichert.
104
105 Weiterhin erschient hier ein Hinweistext, falls das Layout als Standard-Modern-Theme für Formulare verwendet wird (siehe oben).
106
107 Die folgenden Abschnitte erlauben die Konfiguration des Layouts selber, so wie es durch die Layout-Vorlage vorgegeben wird. Hier können etwa Schriftgrößen, Farben und Abstände
108 Export links, Default modern theme
109
110 == Erstellen einer Layout-Vorlage
111
112 == Changelog
Copyright 2000-2025