Zeige letzte Bearbeiter
1 Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen dargestellt.
2
3 (% class="box xm-toc-box" data-content-hide="Verbergen" data-content-show="Anzeigen" style="width:auto;" %)
4 (((
5 Inhalt (% class="xm-toc-toggle" %)[ [[Verbergen>>path:javascript:void||class="xm-toc-togglelink"]] ]
6
7 (% class="xm-toc numbered-true" %)
8 (((
9 * [[Einfügen einer Grafik im Formularheader>>path:#HEinfFCgeneinerGrafikimFormularheader]]
10 ** [[Verwenden eines extern gehosteten Bildes>>path:#HVerwendeneinesexterngehostetenBildes]]
11 ** [[Verwenden einer Mandant- oder Formularressource>>path:#HVerwendeneinerMandant-oderFormularressource]]
12 ** [[Einfügen als Base64-String>>path:#HEinfFCgenalsBase64-String]]
13 * [[Anpassungen des Schriftbildes>>path:#HAnpassungendesSchriftbildes]]
14 * [[Anpassen des Favicons>>path:#HAnpassendesFavicons]]
15 * [[Anpassung Abstand Fieldset nach oben>>path:#HAnpassungAbstandFieldsetnachoben]]
16 * [[Anpassung Hintergrundfarbe Fieldset>>path:#HAnpassungHintergrundfarbeFieldset]]
17 * [[Anpassung Seitenabstand>>path:#HAnpassungSeitenabstand]]
18 )))
19 )))
20
21 == Einfügen einer Grafik im Formularheader ==
22
23 Für das Einfügen einer Grafik im auf allen Formularseiten sichtbaren Headerbereich des Formulars sollen im folgenden 3 verschiedene Möglichkeiten vorgestellt werden. Die hier gezeigten Beispiele müssen im [[CSS-Bereich>>path:/xwiki/bin/view/Formcycle/Designer/Form/CodingPanel/CSSTab/]] des Designers, in einem [[Design>>path:/xwiki/bin/create/Formcycle/UserInterface/FilesAndTemplates/Design/WebHome?parent=Examples.FormStylingAdjustments]] oder in einer //.css//-Datei im Formular oder Mandanten eingefügt werden.
24
25 === Verwenden eines extern gehosteten Bildes ===
26
27 Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:
28
29 (% class="box" %)
30 (((
31 (% class="code" %)
32 (((
33 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
34 (% style="font-weight: bold; color: #008000;" %)background-image(%%): (% style="color: #008000;" %)url(%%)((% style="color: #BA2121;" %)'https:~/~/beispiel.de/pfad/zum/bild/logo.png'(%%)); (% style="font-style: italic; color: #408080;" %)/* Auswählen des Bildes per URL */(%%)
35 (% style="font-style: italic; color: #408080;" %)/* Positionierung des Bildes: */(%%)
36 (% style="font-weight: bold; color: #008000;" %)background-size(%%): (% style="font-weight: bold; color: #008000;" %)auto(%%) (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Das Bild hat 25 Pixel Höhe und die Breite wird automatisch passend zum Seitenverhältnis des Bildes ermittelt */(%%)
37 (% style="font-weight: bold; color: #008000;" %)height(%%): (% style="color: #666666;" %)60(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Die Höhe des Headers wird auf 60 Pixel festgelegt */(%%)
38 (% style="font-weight: bold; color: #008000;" %)background-repeat(%%): (% style="font-weight: bold; color: #008000;" %)no-repeat(%%); (% style="font-style: italic; color: #408080;" %)/* Das Bild wird nur einmal angezeigt */(%%)
39 background-position-x: (% style="color: #008000;" %)calc(%%)((% style="color: #666666;" %)100(% style="color: #B00040;" %)%(%%) (% style="color: #666666;" %)-(%%) (% style="color: #666666;" %)30(% style="color: #B00040;" %)px(%%)); (% style="font-style: italic; color: #408080;" %)/* Das Bild wird 30 Pixel vom rechten Rand positioniert */(%%)
40 background-position-y: (% style="color: #666666;" %)20(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Das Bild wird 20 Pixel vom oberen Rand positioniert */(%%)
41 }
42 )))
43 )))
44
45 === Verwenden einer Mandant- oder Formularressource ===
46
47 Für das Anzeigen eines als Formularressource hochgeladenen Bilddatei (% class="box code" %)headerbild.png(%%) mit dem Namen über die gesamte Headergröße eines Formulars mit der ID (% class="box code" %)1234(%%) kann folgender Code verwendet werden:
48
49 (% class="box" %)
50 (((
51 (% class="code" %)
52 (((
53 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
54 (% style="font-weight: bold; color: #008000;" %)background-image(%%): (% style="color: #008000;" %)url(%%)((% style="color: #BA2121;" %)'../includes/ressource?pid=1234&name=headerbild.png'(%%)); (% style="font-style: italic; color: #408080;" %)/* Auswählen des Bildes per relativer URL zur Formularressource */(%%)
55 (% style="font-style: italic; color: #408080;" %)/* Positionierung des Bildes: */(%%)
56 (% style="font-weight: bold; color: #008000;" %)background-size(%%): (% style="color: #666666;" %)100(% style="color: #B00040;" %)%(%%) (% style="color: #666666;" %)100(% style="color: #B00040;" %)%(%%); (% style="font-style: italic; color: #408080;" %)/* Bild über die gesamte Headergröße zeichnen */(%%)
57 }
58 )))
59 )))
60
61 === Einfügen als Base64-String ===
62
63 Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
64
65 (% class="box" %)
66 (((
67 (% class="code" %)
68 (((
69 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
70 (% style="font-weight: bold; color: #008000;" %)background-image(%%): (% style="color: #008000;" %)url(%%)((% style="color: #008000;" %)data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=(%%)); (% style="font-style: italic; color: #408080;" %)/* Auswahl eines Bildes per Base64-String*/(%%)
71 (% style="font-style: italic; color: #408080;" %)/* Positionierung des Bildes: */(%%)
72 (% style="font-weight: bold; color: #008000;" %)background-repeat(%%): (% style="font-weight: bold; color: #008000;" %)no-repeat(%%); (% style="font-style: italic; color: #408080;" %)/* Das Bild wird nur einmal angezeigt */(%%)
73 background-position-x: (% style="color: #666666;" %)10(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Positionierung in horizontaler Richtung */(%%)
74 background-position-y: (% style="color: #666666;" %)10(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Positionierung in vertikaler Richtung */(%%)
75 (% style="font-weight: bold; color: #008000;" %)background-size(%%): (% style="font-weight: bold; color: #008000;" %)auto(%%) (% style="color: #666666;" %)40(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt */(%%)
76 (% style="font-weight: bold; color: #008000;" %)height(%%): (% style="color: #666666;" %)60(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Gesamthöhe des Formularheaders */(%%)
77 }
78 )))
79 )))
80
81 Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
82
83 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.
84
85 == Anpassungen des Schriftbildes ==
86
87 Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart festzulegen, kann bei Verwendung des //Modern Themes// folgender CSS-Code als Grundlage genommen werden:
88
89 (% class="box" %)
90 (((
91 (% class="code" %)
92 (((
93 .(% style="font-weight: bold; color: #0000FF;" %)xm-form(%%).(% style="font-weight: bold; color: #0000FF;" %)modern(%%) (% style="color: #666666;" %)*,(%%) .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)XPage(%%) (% style="color: #666666;" %)*(%%) { (% style="font-style: italic; color: #408080;" %)/* Selektiert das gesamte Formular und alle Formularseiten*/(%%)
94 (% style="font-weight: bold; color: #008000;" %)font-family(%%): Verdana; (% style="font-style: italic; color: #408080;" %)/* Setzt die Default-Schriftart. */(%%)
95 }
96 )))
97 )))
98
99 Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. Dies kann beispielsweise wie folgt erreicht werden:
100
101 (% class="box" %)
102 (((
103 (% class="code" %)
104 (((
105 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)xm-item-div(%%) (% style="font-weight: bold; color: #008000;" %)LABEL(%%) {
106 (% style="font-weight: bold; color: #008000;" %)font-size(%%): (% style="color: #666666;" %)14(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Setzt die Schriftgröße. */(%%)
107 (% style="font-weight: bold; color: #008000;" %)color(%%): (% style="color: #666666;" %)#111(%%); (% style="font-style: italic; color: #408080;" %)/* Setzt die Schriftfarbe. */(%%)
108 }
109 )))
110 )))
111
112 == Anpassen des Favicons ==
113
114
115 (% class="xm-figure xm-float-right xm-clear-h2" data-alt="Im im Metabereich kann der Link auf ein anderes Favicon definiert werden." %)
116 (((
117 (% class="xm-figure-inner" style="width:310px" %)
118 (((
119 [[[[image:/xwiki/bin/download/Examples/FormStylingAdjustments/designer_favicon_meta_de.png?rev=1.1||width="300"]]>>path:/xwiki/bin/download/Examples/FormStylingAdjustments/designer_favicon_meta_de.png?rev=1.1||rel="lightbox[$group]" title="Im im Metabereich kann der Link auf ein anderes Favicon definiert werden."]]
120
121 (% class="xm-figure-caption" %)
122 (((
123 Im (% class="xm-smallcaps" %)Xima® Formcycle-Designer(%%) im Metabereich kann der Link auf ein anderes Favicon definiert werden.
124 )))
125 )))
126 )))
127
128 Um in einem Formular das Favicon zu verändern, kann im (% class="xm-smallcaps" %)Xima® Formcycle-Designer(%%) im [[Meta-Bereich>>path:/xwiki/bin/create/Formcycle/FormDesigner/CodingPanel/MetaTab/WebHome?parent=Examples.FormStylingAdjustments]] die Position des zu verwendenen Bildes angegeben werden. Dies erfolgt nach folgendem Muster:
129
130 (% class="box" %)
131 (((
132 (% class="code" %)
133 (((
134 <(% style="font-weight: bold; color: #008000;" %)link(%%) (% style="color: #7D9029;" %)rel(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"shortcut icon"(%%) (% style="color: #7D9029;" %)type(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"image/png"(%%) (% style="color: #7D9029;" %)href(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"https:~/~/beispiel.de/pfad/zum/bild/favicon.png"(%%) />
135 )))
136 )))
137
138 Für ein Base64-Codiertes Bild erfolgt eine Einbindung analog:
139
140 (% class="box" %)
141 (((
142 (% class="code" %)
143 (((
144 <(% style="font-weight: bold; color: #008000;" %)link(%%) (% style="color: #7D9029;" %)rel(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"shortcut icon"(%%) (% style="color: #7D9029;" %)type(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"image/png"(%%) (% style="color: #7D9029;" %)href(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII="(%%) />
145 )))
146 )))
147
148 Wenn das mehrere Favicons mit unterschiedlichen Größen als Formularressource unter Dateien hochgeladen wurde, könnte der entsprechende Code für ein Formular mit der ID (% class="box code" %)1234(%%) und einer Größe von 16 mal 16 und 32 mal 32 Pixeln wie folgt aussehen:
149
150 (% class="box" %)
151 (((
152 (% class="code" %)
153 (((
154 <(% style="font-weight: bold; color: #008000;" %)link(%%) (% style="color: #7D9029;" %)rel(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"shortcut icon"(%%) (% style="color: #7D9029;" %)type(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"image/png"(%%) (% style="color: #7D9029;" %)sizes(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"16x16"(%%) (% style="color: #7D9029;" %)href(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"../includes/ressource?pid=1234&name=favicon16.png"(%%) />
155 <(% style="font-weight: bold; color: #008000;" %)link(%%) (% style="color: #7D9029;" %)rel(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"shortcut icon"(%%) (% style="color: #7D9029;" %)type(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"image/png"(%%) (% style="color: #7D9029;" %)sizes(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"32x32"(%%) (% style="color: #7D9029;" %)href(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"../includes/ressource?pid=1234&name=favicon32.png"(%%) />
156 )))
157 )))
158
159 == Anpassung Abstand Fieldset nach oben ==
160
161 Beim //Modern Theme// sind standardmäßig die Abstände zu den oberen Elementen recht groß. Dies kann durch folgenen CSS-Code angepasst werden:
162
163 (% class="box" %)
164 (((
165 (% class="code" %)
166 (((
167 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)CXFieldSet(%%) .(% style="font-weight: bold; color: #0000FF;" %)XFieldSetWrapper(%%) {
168 (% style="font-weight: bold; color: #008000;" %)margin-top(%%): (% style="color: #666666;" %)5(% style="color: #B00040;" %)px(%%);
169 }
170 )))
171 )))
172
173 == Anpassung Hintergrundfarbe Fieldset ==
174
175 Um den Hintergrund eines Fieldsets komplett einzufärben, muss beachtet werden auch das legend-Element zu berücksichtigen.
176
177 (% class="box" %)
178 (((
179 (% class="code" %)
180 (((
181 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)CXFieldSet(%%) .(% style="font-weight: bold; color: #0000FF;" %)XFieldSetWrapper(% style="color: #666666;" %),(%%) .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)XFieldSet(%%) (% style="font-weight: bold; color: #008000;" %)legend(%%) {
182 (% style="font-weight: bold; color: #008000;" %)background-color(%%): (% style="font-weight: bold; color: #008000;" %)lightsteelblue(%%);
183 (% style="font-weight: bold; color: #008000;" %)width(%%): (% style="color: #666666;" %)100(% style="color: #B00040;" %)%(%%);
184 }
185 )))
186 )))
187
188 == Anpassung Seitenabstand ==
189
190 Die CSS-Klasse //XPage// legt die Abstände einer Seite fest. Dabei bestimmt der erste Wert den Abstand für oben/unten, der zweite Wert den Abstand für rechts/links:
191
192 (% class="box" %)
193 (((
194 (% class="code" %)
195 (((
196 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)XPage(%%) {
197 (% style="font-weight: bold; color: #008000;" %)padding(%%): (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%) (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%);
198 }
199 )))
200 )))