Wiki source code of Stilanpassungen an Formularen
Hide last authors
author | 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"}} |
14 | TBD | ||
15 | {{/code}} | ||
![]() |
4.2 | 16 | |
![]() |
4.3 | 17 | Zu beachten ist hierbei, dass dadurch das Bild bei jedem Aufruf des Formulars der gesamte Inhalt übertragen wird, da die Cachingmechanismen der Webbrowser für Dateien hier nicht greifen. |
![]() |
4.2 | 18 | |
![]() |
4.3 | 19 | === Verwenden eines extern gehosteten Bildes === |
![]() |
4.2 | 20 | |
21 | {{code language="css"}} | ||
22 | FORM.xm-form { /* Selektiert das gesamte Formular */ | ||
23 | font-size: 16px; /* Setzt die Basisschriftgröße. */ | ||
24 | color: #111; /* Setzt die Default-Schriftfarbe. */ | ||
25 | font-family: Arial; /* Setzt die Default-Schriftart. */ | ||
26 | } | ||
27 | {{/code}} | ||
28 | |||
29 | === Verwenden einer Mandant- oder Formularressource === | ||
30 | |||
31 | {{code language="css"}} | ||
32 | FORM.xm-form { /* Selektiert das gesamte Formular */ | ||
33 | font-size: 16px; /* Setzt die Basisschriftgröße. */ | ||
34 | color: #111; /* Setzt die Default-Schriftfarbe. */ | ||
35 | font-family: Arial; /* Setzt die Default-Schriftart. */ | ||
36 | } | ||
37 | {{/code}} | ||
38 | |||
![]() |
4.1 | 39 | == Anpassungen des Schriftbildes == |
40 | |||
41 | Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart | ||
42 | |||
![]() |
3.1 | 43 | {{code language="css"}} |
![]() |
1.1 | 44 | FORM.xm-form { /* Selektiert das gesamte Formular */ |
45 | font-size: 16px; /* Setzt die Basisschriftgröße. */ | ||
46 | color: #111; /* Setzt die Default-Schriftfarbe. */ | ||
47 | font-family: Arial; /* Setzt die Default-Schriftart. */ | ||
48 | } | ||
49 | {{/code}} | ||
![]() |
4.1 | 50 | |
51 | Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. | ||
52 | |||
53 | {{code language="css"}} | ||
54 | TODO | ||
55 | {{/code}} | ||
56 | |||
57 | |||
![]() |
4.3 | 58 | |
59 | |||
60 | |||
![]() |
4.1 | 61 | Print-PDF-Plugin: Spezialfall |
62 | https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten | ||
![]() |
4.3 | 63 | |
64 | |||
![]() |
5.1 | 65 | == Anpassen des Favicons == |
![]() |
4.3 | 66 | |
![]() |
5.1 | 67 | Um in einem Formular das Favicon anzuzeigen, können |
68 | |||
69 | Im Meta-Bereich muss dafür folgendes eingefügt werden: | ||
70 | |||
71 | {{code language="html"}} | ||
72 | <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=="> | ||
73 | {{/code}} | ||
74 | |||
75 | |||
76 | |||
77 | |||
78 | |||
79 |