Änderungen von Dokument CSS-Einstellungen für Assistenten / JavaScript

Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Syntax

...	...	@@ -1,1 +1,1 @@
1		-XWiki 2.1
	1	+Markdown 1.2

Inhalt

...	...	@@ -2,50 +2,43 @@
2	2
3	3	{{toc start="2"/}}
4	4
5		-== CSS-Einstellungen für Assistenten ==
	5	+## CSS-Einstellungen für Assistenten
6	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//.
	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	9
10		-(% class="box warningmessage" %)
11		-(((
12	12	Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
13		-)))
14	14
	12	+### Organisations-Konfiguration aufrufen
15	15
16		-=== Organisations-Konfiguration aufrufen ===
17		-
18	18	**Voraussetzung:** Benutzerrecht **Layout verwalten**
19	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"]]
	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]]
21	21
22		-{{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich.
	18	+{{icon name="far fa-arrow-right"}}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich.
23	23
	20	+### Reiter "CSS"
24	24
25		-=== Reiter "CSS" ===
26		-
27	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	28
29		-Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
	24	+Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
30	30	Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden.
31	31
32	32	Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden.
33	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; }
	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; } |
44	44
	38	+
45	45
	40	+### Reiter "CSS-Generator"
46	46
47		-=== Reiter "CSS-Generator" ===
48		-
49	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	50
51	51	**Nutzung des CSS-Generators:**
...	...	@@ -54,16 +54,12 @@
54	54	1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
55	55	1. Schaltfläche **Generieren** anklicken
56	56
57		-{{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
	50	+{{icon name="far fa-arrow-right"}}{{/icon}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
58	58
	52	+## JavaScript-Einstellungen
59	59
60		-== JavaScript-Einstellungen ==
61		-
62		-(% class="box warningmessage" %)
63		-(((
64	64	Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
65		-)))
66	66
67	67	Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
68	68
69		-Weitere Informationen zu JavaScript in MACH formsolutions: [[Artikel JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]]
	58	+Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration|Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].