Wiki-Quellcode von Stilanpassungen an Formularen
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen per CSS dargestellt. | ||
| 2 | |||
| 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"}} | ||
| 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 | |||
| 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 | === Icon Anpassung === | ||
| 66 |