Wiki-Quellcode von Stilanpassungen an Formularen

Verstecke letzte Bearbeiter

version	line-number	content
4.1	1	Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen per CSS dargestellt.
1.1	2
4.1	3	{{content/}}
	4
4.2	5	== Einfügen einer Grafik im Formularheader ==
4.1	6
4.2	7	Für das Einfügen einer Grafik im Headerbereichg des Formulars sollen im Forlgenden 3 verschiedene Möglichkeiten vorgestellt werden.
4.1	8
4.2	9	=== Einfügen als Base64-String ===
	10
	11	Ein als Base64-String kodiertes Bild kann einfach im CSS eingefügt werden:
	12
4.3	13	{{code language="css"}}
6.2	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	}
4.3	22	{{/code}}
4.2	23
6.2	24	Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
4.2	25
6.2	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
4.3	28	=== Verwenden eines extern gehosteten Bildes ===
4.2	29
	30	{{code language="css"}}
	31	FORM.xm-form { /* Selektiert das gesamte Formular */
	32	font-size: 16px; /* Setzt die Basisschriftgröße. */
	33	color: #111; /* Setzt die Default-Schriftfarbe. */
	34	font-family: Arial; /* Setzt die Default-Schriftart. */
	35	}
	36	{{/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
4.1	48	== Anpassungen des Schriftbildes ==
	49
	50	Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart
	51
3.1	52	{{code language="css"}}
1.1	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}}
4.1	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
4.3	67
	68
	69
4.1	70	Print-PDF-Plugin: Spezialfall
	71	https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
4.3	72
	73
5.1	74	== Anpassen des Favicons ==
4.3	75
5.1	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"}}
6.1	81	<link rel="shortcut icon" href="https://beispiel.de/pfad/zum/bild.png">
5.1	82	{{/code}}
	83
6.1	84	Anstelle des Links kann wahlweise auch direkt eine base64-Repräsentation des Bildes verwendet werden:
5.1	85
6.1	86	<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==">
	87	{{/code}}
5.1	88
	89
	90

Wiki-Quellcode von Stilanpassungen an Formularen

Navigation