Änderungen von Dokument Beispiele für Anpassungen bei Erscheinungsbild / CSS
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
-
Objekte (0 geändert, 1 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -1,6 +1,24 @@ 1 - WIP1 +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 +TBD 15 +{{/code}} 16 + 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. 18 + 19 +=== Verwenden eines extern gehosteten Bildes === 20 + 21 +{{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,55 @@ 7 7 font-family: Arial; /* Setzt die Default-Schriftart. */ 8 8 } 9 9 {{/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 + 39 +== Anpassungen des Schriftbildes == 40 + 41 +Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart 42 + 43 +{{code language="css"}} 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}} 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 + 58 + 59 + 60 + 61 +Print-PDF-Plugin: Spezialfall 62 +https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten 63 + 64 + 65 +== Anpassen des Favicons == 66 + 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 +
- 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