Zuletzt geändert von MACH formsolutions am 15.10.2025

Von Version 433.1
bearbeitet von MACH formsolutions
am 15.10.2025
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 432.1
bearbeitet von MACH formsolutions
am 15.10.2025
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Syntax
... ... @@ -1,1 +1,1 @@
1 -XWiki 2.1
1 +Markdown 1.2
Inhalt
... ... @@ -2,40 +2,43 @@
2 2  
3 3  {{toc start="2"/}}
4 4  
5 -== CSS-Einstellungen für Assistenten ==
5 +## CSS-Einstellungen für Assistenten
6 6  
7 -Mit **CSS**-Anweisungen (Cascading Style Sheets) können Sie die visuelle Gestaltung Ihrer veröffentlichten Assistenten verändern. Damit gleichen Sie die Assistenten optisch nahtlos an Ihre Website und Ihre gewohnte Corporate Identity an.
8 -Die Anpassungen werden zentral verwaltet und sind für alle Assistenten gültig, sowie im Bereich //Payment// und //eID//.
7 +Mit **CSS**-Anweisungen (Cascading Style Sheets) können Sie die visuelle Gestaltung Ihrer veröffentlichten Assistenten verändern. Damit gleichen Sie die Assistenten optisch nahtlos an Ihre Website und Ihre gewohnte Corporate Identity an.
8 +Die Anpassungen werden zentral verwaltet und sind für alle Assistenten gültig, sowie im Bereich _Payment_ und _eID_.
9 9  
10 10  Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
11 11  
12 -=== Organisations-Konfiguration aufrufen ===
12 +### Organisations-Konfiguration aufrufen
13 13  
14 14  **Voraussetzung:** Benutzerrecht **Layout verwalten**
15 15  
16 -Klicken Sie im Formulareditor in der [[Hauptwerkzeugleiste>>doc:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome]] die Schaltfläche Administration an.[[image:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg||alt="Schaltfläche Administration"]]
16 +Klicken Sie im Formulareditor in der [[Hauptwerkzeugleiste|doc:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome]] die Schaltfläche Administration an.![[Schaltfläche Administration|Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg]]
17 17  
18 -{{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich.
18 +{{icon name="far fa-arrow-right"}}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich.
19 19  
20 -=== Reiter "CSS" ===
20 +### Reiter "CSS"
21 21  
22 22  Verweisen Sie auf eine externe Quelle, aus der die CSS-Anweisungen geladen werden (**externes CSS**), oder tragen Sie Anweisungen/Code direkt in der Konfiguration ein (**internes CSS**).
23 23  
24 -Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
24 +Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
25 25  Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden.
26 26  
27 27  Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden.
28 28  
29 -|=Attribut|=Beschreibung|=Beispiel
30 -|data-assistant-identifier|Wert ist die Artikelnummer
31 -|Elternknoten für die Attribute "{{code language="none"}}data-panel-identifier{{/code}}" und "{{code language="none"}}data-component-identifier{{/code}}"|[data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; }
32 -|data-panel-identifier|Wert ist die technische Bezeichnung des Panels
33 -|Elternknoten für das Attribut "{{code language="none"}}data-component-identifer{{/code}}"|[data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; }
34 -|data-component-identifier|Wert ist die technische Bezeichnung der Komponente
35 -|Unterhalb des Attributs "{{code language="none"}}data-panel-identifier{{/code}}" können mehrere Attribute "{{code language="none"}}data-component-identifier{{/code}}" vorkommen. Verschachtelte Komponenten werden mit Punkten zwischen den technischen Bezeichnungen getrennt als Wert dargestellt. Beispiel: //Objektgruppenname.Komponentenname//|[data-component-identifier="Textfeld (einzeilig)"] input{ border-color: orange !important; }
29 +| Attribut | Beschreibung | Beispiel |
30 +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
31 +| data-assistant-identifier | Wert ist die Artikelnummer
32 +Elternknoten für die Attribute "`data-panel-identifier`" und "`data-component-identifier`" | [data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; } |
33 +| data-panel-identifier | Wert ist die technische Bezeichnung des Panels
34 +Elternknoten für das Attribut "`data-component-identifer`" | [data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } |
35 +| data-component-identifier | Wert ist die technische Bezeichnung der Komponente
36 +Unterhalb des Attributs "`data-panel-identifier`" können mehrere Attribute "`data-component-identifier`" vorkommen. Verschachtelte Komponenten werden mit Punkten zwischen den technischen Bezeichnungen getrennt als Wert dargestellt. Beispiel: _Objektgruppenname.Komponentenname_ | [data-component-identifier="Textfeld (einzeilig)"] input{ border-color: orange !important; } |
36 36  
37 -=== Reiter "CSS-Generator" ===
38 +
38 38  
40 +### Reiter "CSS-Generator"
41 +
39 39  Mithilfe grafischer Werkzeuge können Sie hier grundlegende Einstellungen für die Assistentensicht festlegen. Der generierte Code kann anschließend manuell bearbeitet und weiter angepasst werden.
40 40  
41 41  **Nutzung des CSS-Generators:**
... ... @@ -44,12 +44,12 @@
44 44  1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
45 45  1. Schaltfläche **Generieren** anklicken
46 46  
47 -{{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
50 +{{icon name="far fa-arrow-right"}}{{/icon}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
48 48  
49 -== JavaScript-Einstellungen ==
52 +## JavaScript-Einstellungen
50 50  
51 51  Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
52 52  
53 53  Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
54 54  
55 -Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].
58 +Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration|Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].