| ... |
... |
@@ -10,12
+10,13 @@ |
| 10 |
10 |
|
| 11 |
11 |
Die Bedienung des Theme-Konfigurators gliedert sich in zwei Abschnitte, die sich jeweils an unterschiedliche Nutzergruppen richten: |
| 12 |
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/||rel="noopener noreferrer" target="_blank"]] 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 |
|
- |
| 16 |
16 |
; Erstellen von konkreten Layouts |
| 17 |
17 |
: 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. |
| 18 |
18 |
|
|
16 |
+; Erstellen von Layout-Vorlagen |
|
17 |
+: 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/||rel="noopener noreferrer" target="_blank"]] 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. |
|
18 |
+; |
|
19 |
+ |
| 19 |
19 |
Wird das Plugin installiert, wird automatisch eine erste Layout-Vorlage im System angelegt. Diese enthält das mit {{formcycle/}} ausgelieferte //Modern-Theme//. |
| 20 |
20 |
|
| 21 |
21 |
Technisch werden durch Layout-Vorlagen {{smallcaps}}Scss{{/smallcaps}}-Dateien mit Variablen definiert. Durch Layouts wird diesen Variablen jeweils ein Wert zugewiesen. |
| ... |
... |
@@ -127,7
+127,7 @@ |
| 127 |
127 |
|
| 128 |
128 |
== Erstellen einer Layout-Vorlage == |
| 129 |
129 |
|
| 130 |
|
-Eine Layout-Vorlage besteht aus zwei Teilen. Zum einen muss eine {{smallcaps}}Scss{{/smallcaps}}-Datei erstellt werden, in der die entsprechenden Layout-Regeln enthalten sind. {{smallcaps}}Scss{{/smallcaps}} kann Variablen enthalten, deren Werte später durch den Nutzer festgelegt werden, wenn dieser ein neues Layout erstellt. Zum anderen muss festgelegt werden, welche Variablen editierbar sein sollen und mit welchem Editoren die einzelnen Variablen bearbeitet werden sollen (etwa Texteditor, Pixel-Editor, Farbenwähler, Dateiwähler etc.). Optional können auch noch einige Einstellungen zur Transpilation des {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} vorgenommen werden. |
|
131 |
+Eine Layout-Vorlage besteht aus zwei Teilen. Zum Einen muss eine {{smallcaps}}Scss{{/smallcaps}}-Datei erstellt werden, in der die entsprechenden Layout-Regeln enthalten sind. {{smallcaps}}Scss{{/smallcaps}} kann Variablen enthalten, deren Werte später durch den Nutzer festgelegt werden, wenn dieser ein neues Layout erstellt. Zum Zweiten muss festgelegt werden, welche Variablen editierbar sein sollen und mit welchem Editoren die einzelnen Variablen bearbeitet werden sollen (etwa Texteditor, Pixel-Editor, Farbenwähler, Dateiwähler etc.). Optional können auch noch einige Einstellungen zur Transpilation des {{smallcaps}}Scss{{/smallcaps}} in {{smallcaps}}Css{{/smallcaps}} vorgenommen werden. |
| 131 |
131 |
|
| 132 |
132 |
{{figure image="plugin_theme_config_new_template_de.png"}} |
| 133 |
133 |
Durch Klick auf das Plussymbol in der Aktionsleiste link oben kann eine neue Layout-Vorlage erstellt werden. Es muss ein Name vergeben werden, der in der Regel der gleiche Name wie der Name der {{smallcaps}}Scss{{/smallcaps}}-Datei sein sollte. |
| ... |
... |
@@ -223,7
+223,7 @@ |
| 223 |
223 |
|
| 224 |
224 |
Die Konfiguration funktioniert ähnlich zum {{designer/}}: |
| 225 |
225 |
|
| 226 |
|
-* Standardmäßig werden alle Editoren untereinander angeordnet. Über die entsprechende Einstellung (siehe unten um Abschnitt //Einstellungen zur Ansicht//) ist es möglich, Editoren auch nebeneinander anzuordnen. Diese Option sollte mit Bedacht genutz werden, um den Nutzer nicht mit zu vielen Information auf einmal zu überlasten. |
|
227 |
+* Standardmäßig werden alle Editoren untereinander angeordnet. Über die entsprechende Einstellung (siehe unten um Abschnitt //Einstellungen zur Ansicht//) ist es möglich, Editoren auch nebeneinander anzuordnen. Diese Option sollte mit Bedacht genutz werden, um den Nutzre nicht mit zu vielen Information auf einmal zu überlasten. |
| 227 |
227 |
* Alle Editoren werden in Fieldsets gruppiert. Dies sorgt für eine klarere Gliederung und erhöht die Lesbarkeit. |
| 228 |
228 |
|
| 229 |
229 |
Editoren werden wie folgt hinzugefügt: |