Zum Inhalt springen
Version 433.2 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.[[image:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg||alt="Schaltfläche Administration"]]
17
18 {{icon name="far fa-arrow-right"/}}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 |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}}"
32 )))|[data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; }
33 |data-panel-identifier|Wert ist die technische Bezeichnung des Panels
34 |
35 |data-component-identifier| |
36
37 |= |= |=
38 | |
39 | |
40 | |
41 |Elternknoten für das Attribut "{{code language="none"}}data-component-identifer{{/code}}"|[data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; }
42 | |
43 |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; }
44
45 === Reiter "CSS-Generator" ===
46
47 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.
48
49 **Nutzung des CSS-Generators:**
50
51 1. Hintergrundfarbe und/oder Schriftfarbe mithilfe der Farbwähler festlegen
52 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
53 1. Schaltfläche **Generieren** anklicken
54
55 {{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
56
57 == JavaScript-Einstellungen ==
58
59 Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
60
61 Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
62
63 Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].