Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
• Objekte (0 geändert, 1 hinzugefügt, 0 gelöscht)
  • XWiki.XWikiRights[0]

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,6 +1,33 @@
1		-WIP
	1	+Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen per CSS dargestellt.
2	2
3		-{{code language="none"}}
	3	+{{content/}}
	4	+
	5	+== Einfügen einer Grafik im Formularheader ==
	6	+
	7	+Für das Einfügen einer Grafik im Headerbereichg des Formulars sollen im Forlgenden 3 verschiedene Möglichkeiten vorgestellt werden.
	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	+=== Verwenden eines extern gehosteten Bildes ===
	29	+
	30	+{{code language="css"}}
4	4	FORM.xm-form { /* Selektiert das gesamte Formular */
5	5	font-size: 16px; /* Setzt die Basisschriftgröße. */
6	6	color: #111; /* Setzt die Default-Schriftfarbe. */
...	...	@@ -7,3 +7,57 @@
7	7	font-family: Arial; /* Setzt die Default-Schriftart. */
8	8	}
9	9	{{/code}}
	37	+
	38	+=== Verwenden einer Mandant- oder Formularressource ===
	39	+
	40	+{{code language="css"}}
	41	+FORM.xm-form { /* Selektiert das gesamte Formular */
	42	+ font-size: 16px; /* Setzt die Basisschriftgröße. */
	43	+ color: #111; /* Setzt die Default-Schriftfarbe. */
	44	+ font-family: Arial; /* Setzt die Default-Schriftart. */
	45	+}
	46	+{{/code}}
	47	+
	48	+== Anpassungen des Schriftbildes ==
	49	+
	50	+Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart
	51	+
	52	+{{code language="css"}}
	53	+FORM.xm-form { /* Selektiert das gesamte Formular */
	54	+ font-size: 16px; /* Setzt die Basisschriftgröße. */
	55	+ color: #111; /* Setzt die Default-Schriftfarbe. */
	56	+ font-family: Arial; /* Setzt die Default-Schriftart. */
	57	+}
	58	+{{/code}}
	59	+
	60	+Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden.
	61	+
	62	+{{code language="css"}}
	63	+TODO
	64	+{{/code}}
	65	+
	66	+
	67	+
	68	+
	69	+
	70	+Print-PDF-Plugin: Spezialfall
	71	+https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
	72	+
	73	+
	74	+== Anpassen des Favicons ==
	75	+
	76	+Um in einem Formular das Favicon anzuzeigen, können
	77	+
	78	+Im Meta-Bereich muss dafür folgendes eingefügt werden:
	79	+
	80	+{{code language="html"}}
	81	+<link rel="shortcut icon" href="https://beispiel.de/pfad/zum/bild.png">
	82	+{{/code}}
	83	+
	84	+{{velocity}}
	85	+##Anstelle des Links kann wahlweise auch direkt eine base64-Repräsentation des Bildes verwendet werden:
	86	+##
	87	+##{{code language="html"}}
	88	+##<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAOvr6wDr6+sD6+vrN+vr65Lr6+vS6+vr7Ovr6+vr6+vP6+vrjevr6zPr6+sC6+vrAAAAAAAAAAAA6+vrAPX19gD29vcP8PDwfe3t7eXr6+v/6+vr/+3t7f/t7e3/6+vr/+vr6/7r6+vi6+vrduvr6w3r6+sAAAAAAOvr6wD29vYP2NjXnMTEwvzNzcv/6urq/+Pj4v/ExML/ysvJ/+np6f/r6+v/6+vr/+vr6/vr6+uU6+vrDOvr6wDr6+sB7e3te9jZ1/xtb2b/X2JY/8vLyf/Oz83/W11T/3N2bf/j4+P/6+vs/+vr6//r6+v/6+vr+uvr63Lr6+sA6+vrNOvr6+Lt7e3/qqum/05RRv+GiIH/x8fF/1ZZT/9vcmn/4+Pi/+zs7P/r6+v/6+vr/+vr6//r6+vc6+vrLevr64zr6+v/7Ozs/+Hh4P92eHD/VVdN/5qblf9YW1D/cHJp/+Pj4//s7Oz/6+vr/+vr6//r6+v/6+vr/uvr64Dr6+vM6+vr/+vr6//t7e3/vb26/1VYTv9sbmX/VllP/25xaP/d3dz/5ubl/+Xl5f/m5ub/6urq/+vr6//r6+vA6+vr5+vr6//r6+v/6+vr/+jo6P+GiIH/Zmhf/1daUP9WWU//cnRr/3R2bf9ydWz/hYeA/9/f3//s7Oz/6+vr3evr6+br6+v/6+vr/+vr6//o6Oj/hoiB/2RnXf9XWk//VVhN/2xvZv9ucGf/bW9m/4CCev/f397/7Ozs/+vr69zr6+vJ6+vr/+vr6//t7e3/vb67/1VYTv9pbGP/VllO/25waP/b29r/4+Pj/+Pj4v/k5OT/6urq/+vr6//r6+u+6+vrh+vr6/7s7Oz/4eHh/3d5cf9VWE3/m52X/1hbUf9vcWn/4ODf/+np6P/o6Oj/6Ojo/+rq6v/r6+v96+vre+vr6zDr6+ve7Ozs/6mqpv9NUEX/hoiB/8fHxf9WWU//VllP/3h6cv96fHT/enx0/3p8dP/Bwr//7e3t2Ovr6yjr6+sA7Ozsc+Li4vqPkIr/eXtz/8zMyv/T09L/cnVs/2psY/9oa2H/aGth/2hrYf9pa2L/ubq2+PDw8Wrr6+sA6+vrAO3t7Qzp6emS5eXl+ubm5v/r6+v/6enp/+Dg3//f4N//3+Df/9/g3//f4N//39/f+ePj4orx8fEJ6+vrAAAAAADs7OwA7OzsDOzs7HHr6+ve6+vr/uvr6//s7Oz/7Ozs/+zs7P/s7Oz97Ozs2+3t7Wvy8vIJ8PDwAAAAAAAAAAAAAAAAAOvr6wDr6+sC6+vrLevr64Pr6+vE6+vr4Ovr6+Dr6+vC6+vrf+vr6ynr6+sB6+vrAAAAAAAAAAAA4AcAAMADAACAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAIABAADAAwAA4AcAAA==">
	89	+##{{/code}}
	90	+{{/velocity}}

XWiki.XWikiRights[0]

Erlauben/Verbieten

...	...	@@ -1,0 +1,1 @@
	1	+Zulassen

Gruppen

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.XWikiAdminGroup,

Ebenen

...	...	@@ -1,0 +1,1 @@
	1	+login,view,edit,delete,creator,register,comment,script,admin,createwiki,programming,Like