| ... |
... |
@@ -1,19
+1,5 @@ |
| 1 |
|
-Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen per CSS dargestellt. |
|
1 |
+WIP |
| 2 |
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 |
|
-=== Verwenden eines extern gehosteten Bildes === |
| 14 |
|
- |
| 15 |
|
- |
| 16 |
|
- |
| 17 |
17 |
{{code language="css"}} |
| 18 |
18 |
FORM.xm-form { /* Selektiert das gesamte Formular */ |
| 19 |
19 |
font-size: 16px; /* Setzt die Basisschriftgröße. */ |
| ... |
... |
@@ -21,36
+21,3 @@ |
| 21 |
21 |
font-family: Arial; /* Setzt die Default-Schriftart. */ |
| 22 |
22 |
} |
| 23 |
23 |
{{/code}} |
| 24 |
|
- |
| 25 |
|
- |
| 26 |
|
-=== Verwenden einer Mandant- oder Formularressource === |
| 27 |
|
- |
| 28 |
|
-{{code language="css"}} |
| 29 |
|
-FORM.xm-form { /* Selektiert das gesamte Formular */ |
| 30 |
|
- font-size: 16px; /* Setzt die Basisschriftgröße. */ |
| 31 |
|
- color: #111; /* Setzt die Default-Schriftfarbe. */ |
| 32 |
|
- font-family: Arial; /* Setzt die Default-Schriftart. */ |
| 33 |
|
-} |
| 34 |
|
-{{/code}} |
| 35 |
|
- |
| 36 |
|
-== Anpassungen des Schriftbildes == |
| 37 |
|
- |
| 38 |
|
-Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart |
| 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 |
|
-Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. |
| 49 |
|
- |
| 50 |
|
-{{code language="css"}} |
| 51 |
|
-TODO |
| 52 |
|
-{{/code}} |
| 53 |
|
- |
| 54 |
|
- |
| 55 |
|
-Print-PDF-Plugin: Spezialfall |
| 56 |
|
-https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten |