Zum Inhalt springen
Version 433.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.[[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}}"|[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; }
36
37 === Reiter "CSS-Generator" ===
38
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
41 **Nutzung des CSS-Generators:**
42
43 1. Hintergrundfarbe und/oder Schriftfarbe mithilfe der Farbwähler festlegen
44 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
45 1. Schaltfläche **Generieren** anklicken
46
47 {{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
48
49 == JavaScript-Einstellungen ==
50
51 Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
52
53 Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
54
55 Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].