Zusammenfassung

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

Details

Seiteneigenschaften

Inhalt

...	...	@@ -6,25 +6,6 @@
6	6
7	7	Für das Einfügen einer Grafik im Headerbereichg des Formulars sollen im Forlgenden 3 verschiedene Möglichkeiten vorgestellt werden.
8	8
9		-=== Einfügen als Base64-String ===
10		-
11		-Ein als Base64-String kodiertes Bild kann einfach im CSS eingefügt werden:
12		-
13		-{{code language="css"}}
14		-.modern .XHeader {
15		- background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=);
16		- background-repeat: no-repeat;
17		- background-position-x: 10px;
18		- background-position-y: 10px;
19		- background-size: auto 40px;
20		- height: 60px;
21		-}
22		-{{/code}}
23		-
24		-Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
25		-
26		-Zu beachten ist hierbei, dass bei der Einbindung des Bildes als base64-String bei jedem Aufruf des Formulars das Bild erneut mitübertragen wird, da die Cachingmechanismen der Webbrowser für Dateien hier nicht greifen.
27		-
28	28	=== Verwenden eines extern gehosteten Bildes ===
29	29
30	30	{{code language="css"}}
...	...	@@ -45,9 +45,28 @@
45	45	}
46	46	{{/code}}
47	47
	29	+=== Einfügen als Base64-String ===
	30	+
	31	+Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
	32	+
	33	+{{code language="css"}}
	34	+.modern .XHeader {
	35	+ background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=);
	36	+ background-repeat: no-repeat;
	37	+ background-position-x: 10px;
	38	+ background-position-y: 10px;
	39	+ background-size: auto 40px;
	40	+ height: 60px;
	41	+}
	42	+{{/code}}
	43	+
	44	+Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
	45	+
	46	+Zu beachten ist hierbei, dass bei der Einbindung des Bildes als base64-String bei jedem Aufruf des Formulars das Bild erneut mitübertragen wird, da die Cachingmechanismen der Webbrowser für Dateien hier nicht greifen.
	47	+
48	48	== Anpassungen des Schriftbildes ==
49	49
50		-Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart
	50	+Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart festzulegen, kann folgender CSS-Code als Grundlage genommen werden:
51	51
52	52	{{code language="css"}}
53	53	FORM.xm-form { /* Selektiert das gesamte Formular */
...	...	@@ -57,7 +57,7 @@
57	57	}
58	58	{{/code}}
59	59
60		-Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden.
	60	+Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. Dies kann für die entsprechenden
61	61
62	62	{{code language="css"}}
63	63	TODO
...	...	@@ -64,6 +64,8 @@
64	64	{{/code}}
65	65
66	66	{{velocity}}
	67	+##Hierbei ist insbesondere darauf zu achten, dass die CSS-Regeln mindestens so spezifisch sind, wie es das grundlegende Formular-Theme vorgibt.
	68	+##
67	67	##Print-PDF-Plugin: Spezialfall
68	68	##https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
69	69	{{/velocity}}