Zum Inhalt springen
Version 432.1 von MACH formsolutions am 15.10.2025
Zeige letzte Bearbeiter
1 **Inhaltsverzeichnis:**
2
3 {{toc start="2"/}}
4
5 ## CSS-Einstellungen für Assistenten
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_.
9
10 Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
11
12 ### Organisations-Konfiguration aufrufen
13
14 **Voraussetzung:** Benutzerrecht **Layout verwalten**
15
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
18 {{icon name="far fa-arrow-right"}}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich.
19
20 ### Reiter "CSS"
21
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
24 Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
25 Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden.
26
27 Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden.
28
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; } |
37
38
39
40 ### Reiter "CSS-Generator"
41
42 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.
43
44 **Nutzung des CSS-Generators:**
45
46 1. Hintergrundfarbe und/oder Schriftfarbe mithilfe der Farbwähler festlegen
47 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
48 1. Schaltfläche **Generieren** anklicken
49
50 {{icon name="far fa-arrow-right"}}{{/icon}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
51
52 ## JavaScript-Einstellungen
53
54 Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
55
56 Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
57
58 Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration|Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].