Zum Inhalt springen
Zuletzt geändert 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 (% class="box warningmessage" %)
11 (((
12 Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
13 )))
14
15
16 === Organisations-Konfiguration aufrufen ===
17
18 **Voraussetzung:** Benutzerrecht **Layout verwalten**
19
20 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"]]
21
22 {{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich.
23
24
25 === Reiter "CSS" ===
26
27 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**).
28
29 Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
30 Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden.
31
32 Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden.
33
34 |=Attribut|=Beschreibung|=Beispiel
35 |data-assistant-identifier|Wert ist die Artikelnummer(((
36 Elternknoten für die Attribute "{{code language="none"}}data-panel-identifier{{/code}}" und "{{code language="none"}}data-component-identifier{{/code}}"
37 )))|[data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; }
38 |data-panel-identifier|Wert ist die technische Bezeichnung des Panels(((
39 Elternknoten für das Attribut "{{code language="none"}}data-component-identifer{{/code}}"
40 )))|[data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; }
41 |data-component-identifier|Wert ist die technische Bezeichnung der Komponente(((
42 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//
43 )))|[data-component-identifier="Textfeld (einzeilig)"] input{ border-color: orange !important; }
44
45
46
47 === Reiter "CSS-Generator" ===
48
49 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.
50
51 **Nutzung des CSS-Generators:**
52
53 1. Hintergrundfarbe und/oder Schriftfarbe mithilfe der Farbwähler festlegen
54 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
55 1. Schaltfläche **Generieren** anklicken
56
57 {{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
58
59
60 == JavaScript-Einstellungen ==
61
62 (% class="box warningmessage" %)
63 (((
64 Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
65 )))
66
67 Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
68
69 Weitere Informationen zu JavaScript in MACH formsolutions: [[Artikel JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]]