Zusammenfassung

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

Details

Seiteneigenschaften

Inhalt

...	...	@@ -6,6 +6,25 @@
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	+
9	9	=== Verwenden eines extern gehosteten Bildes ===
10	10
11	11	{{code language="css"}}
...	...	@@ -26,25 +26,6 @@
26	26	}
27	27	{{/code}}
28	28
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	50	Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart
...	...	@@ -63,17 +63,20 @@
63	63	TODO
64	64	{{/code}}
65	65
66		-{{velocity}}
67		-##Print-PDF-Plugin: Spezialfall
68		-##https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
69		-{{/velocity}}
70	70
	67	+
	68	+
	69	+
	70	+Print-PDF-Plugin: Spezialfall
	71	+https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
	72	+
	73	+
71	71	== Anpassen des Favicons ==
72	72
73	73	Um in einem Formular das Favicon zu verändern, kann im Meta-Bereich die Position der zu verwendenen Bildes angegeben werden. Dies erfolgt nach folgendem Muster:
74	74
75	75	{{code language="html"}}
76		-<link rel="shortcut icon" type="image/png" href="https://beispiel.de/pfad/zum/bild.png" />
	79	+<link rel="shortcut icon" type="image/png" href="https://beispiel.de/pfad/zum/bild.png">
77	77	{{/code}}
78	78
79	79	Wenn das Favicon als Formularressource unter Dateien hochgeladen wurde, könnte der entsprechende Code für ein Formular mit der ID {{code language="none"}}1234{{/code}} und einer Größe von 32 mal 32 Pixeln wie folgt aussehen: