Wiki-Quellcode von CSS-Einstellungen für Assistenten / JavaScript
Version 433.2 von MACH formsolutions am 15.10.2025
Verstecke letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
 |
431.8 | 1 | **Inhaltsverzeichnis:** |
| |
431.7 | 2 | |
| |
431.8 | 3 | {{toc start="2"/}} |
| 4 | |||
| |
433.1 | 5 | == CSS-Einstellungen für Assistenten == |
| |
431.7 | 6 | |
| |
433.1 | 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//. | ||
| |
1.1 | 9 | |
| |
431.10 | 10 | Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. |
| |
431.9 | 11 | |
| |
433.1 | 12 | === Organisations-Konfiguration aufrufen === |
| |
431.9 | 13 | |
| |
431.10 | 14 | **Voraussetzung:** Benutzerrecht **Layout verwalten** |
| |
431.2 | 15 | |
| |
433.1 | 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"]] |
| |
1.1 | 17 | |
| |
433.1 | 18 | {{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich. |
| |
431.1 | 19 | |
| |
433.1 | 20 | === Reiter "CSS" === |
| |
1.1 | 21 | |
| |
431.10 | 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**). |
| |
1.1 | 23 | |
| |
433.1 | 24 | Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat. |
| |
431.10 | 25 | Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden. |
| |
1.1 | 26 | |
| |
431.19 | 27 | Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden. |
| |
431.11 | 28 | |
| |
433.1 | 29 | |=Attribut|=Beschreibung|=Beispiel |
| |
433.2 | 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; } | ||
| |
433.1 | 33 | |data-panel-identifier|Wert ist die technische Bezeichnung des Panels |
| |
433.2 | 34 | | |
| 35 | |data-component-identifier| | | ||
| 36 | |||
| 37 | |= |= |= | ||
| 38 | | | | ||
| 39 | | | | ||
| 40 | | | | ||
| |
433.1 | 41 | |Elternknoten für das Attribut "{{code language="none"}}data-component-identifer{{/code}}"|[data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } |
| |
433.2 | 42 | | | |
| |
433.1 | 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; } |
| |
1.1 | 44 | |
| |
433.1 | 45 | === Reiter "CSS-Generator" === |
| |
1.1 | 46 | |
| |
432.1 | 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. |
| |
431.20 | 48 | |
| |
432.1 | 49 | **Nutzung des CSS-Generators:** |
| |
431.23 | 50 | |
| |
432.1 | 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 | ||
| |
1.1 | 54 | |
| |
433.1 | 55 | {{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen. |
| |
1.1 | 56 | |
| |
433.1 | 57 | == JavaScript-Einstellungen == |
| |
315.1 | 58 | |
| |
432.1 | 59 | Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. |
| |
1.1 | 60 | |
| |
432.1 | 61 | Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird. |
| |
1.1 | 62 | |
| |
433.1 | 63 | Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]]. |