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,28 +26,9 @@
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		-Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart festzulegen, kann folgender CSS-Code als Grundlage genommen werden:
	50	+Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart
51	51
52	52	{{code language="css"}}
53	53	FORM.xm-form { /* Selektiert das gesamte Formular */
...	...	@@ -57,25 +57,26 @@
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. Dies kann für die entsprechenden
	60	+Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden.
61	61
62	62	{{code language="css"}}
63	63	TODO
64	64	{{/code}}
65	65
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		-##
69		-##Print-PDF-Plugin: Spezialfall
70		-##https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
71		-{{/velocity}}
72	72
	67	+
	68	+
	69	+
	70	+Print-PDF-Plugin: Spezialfall
	71	+https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
	72	+
	73	+
73	73	== Anpassen des Favicons ==
74	74
75	75	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:
76	76
77	77	{{code language="html"}}
78		-<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">
79	79	{{/code}}
80	80
81	81	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: