Verstecke letzte Bearbeiter
gru 1.1 1 Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen dargestellt.
2
sas 3.1 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"]] ]
gru 1.1 6
sas 3.1 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]]
rpe 8.1 14 * [[Hinzufügen einer eigenen Schriftart>>path:#HHinzufFCgeneinereigenenSchriftart]]
sas 3.1 15 * [[Anpassen des Favicons>>path:#HAnpassendesFavicons]]
16 * [[Anpassung Abstand Fieldset nach oben>>path:#HAnpassungAbstandFieldsetnachoben]]
17 * [[Anpassung Hintergrundfarbe Fieldset>>path:#HAnpassungHintergrundfarbeFieldset]]
18 * [[Anpassung Seitenabstand>>path:#HAnpassungSeitenabstand]]
19 )))
20 )))
21
gru 1.1 22 == Einfügen einer Grafik im Formularheader ==
23
sas 3.1 24 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.
gru 1.1 25
26 === Verwenden eines extern gehosteten Bildes ===
27
28 Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:
29
sas 3.1 30 (% class="box" %)
31 (((
32 (% class="code" %)
33 (((
34 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
35 (% 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 */(%%)
36 (% style="font-style: italic; color: #408080;" %)/* Positionierung des Bildes: */(%%)
37 (% 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 */(%%)
38 (% 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 */(%%)
39 (% 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 */(%%)
40 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 */(%%)
41 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 */(%%)
gru 1.1 42 }
sas 3.1 43 )))
44 )))
gru 1.1 45
46 === Verwenden einer Mandant- oder Formularressource ===
47
sas 3.1 48 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:
gru 1.1 49
sas 3.1 50 (% class="box" %)
51 (((
52 (% class="code" %)
53 (((
54 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
55 (% 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 */(%%)
56 (% style="font-style: italic; color: #408080;" %)/* Positionierung des Bildes: */(%%)
57 (% 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 */(%%)
gru 1.1 58 }
sas 3.1 59 )))
60 )))
gru 1.1 61
62 === Einfügen als Base64-String ===
63
64 Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
65
sas 3.1 66 (% class="box" %)
67 (((
68 (% class="code" %)
69 (((
70 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
71 (% 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*/(%%)
72 (% style="font-style: italic; color: #408080;" %)/* Positionierung des Bildes: */(%%)
73 (% 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 */(%%)
74 background-position-x: (% style="color: #666666;" %)10(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Positionierung in horizontaler Richtung */(%%)
75 background-position-y: (% style="color: #666666;" %)10(% style="color: #B00040;" %)px(%%); (% style="font-style: italic; color: #408080;" %)/* Positionierung in vertikaler Richtung */(%%)
76 (% 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 */(%%)
77 (% 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 */(%%)
gru 1.1 78 }
sas 3.1 79 )))
80 )))
gru 1.1 81
82 Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
83
84 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.
85
86 == Anpassungen des Schriftbildes ==
87
88 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:
89
sas 3.1 90 (% class="box" %)
91 (((
92 (% class="code" %)
93 (((
94 .(% 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*/(%%)
95 (% style="font-weight: bold; color: #008000;" %)font-family(%%): Verdana; (% style="font-style: italic; color: #408080;" %)/* Setzt die Default-Schriftart. */(%%)
gru 1.1 96 }
sas 3.1 97 )))
98 )))
gru 1.1 99
100 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:
101
sas 3.1 102 (% class="box" %)
103 (((
104 (% class="code" %)
105 (((
106 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)xm-item-div(%%) (% style="font-weight: bold; color: #008000;" %)LABEL(%%) {
107 (% 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. */(%%)
108 (% style="font-weight: bold; color: #008000;" %)color(%%): (% style="color: #666666;" %)#111(%%); (% style="font-style: italic; color: #408080;" %)/* Setzt die Schriftfarbe. */(%%)
gru 1.1 109 }
sas 3.1 110 )))
111 )))
gru 1.1 112
rpe 4.1 113 == Hinzufügen einer eigenen Schriftart ==
114
115 Um eine neue Schriftart hinzuzufügen, muss sie unter //Mehr// > //Dateien// im Format woff, woff2 und ttf hochgeladen werden.
116 Anschließend kann die Schriftart wie folgt im CSS-Code eines Formulars eingebunden und verwendet werden:
117 Bitte beachten Sie, dass die URL's zu den Schriftarten angepasst werden müssen. Diese können Sie beim Hochladen einer Schriftart in den Dateien einsehen.
118
119 (% class="box" %)
120 (((
121 (% class="code" %)
122 (((
123 @(% style="font-weight: bold; color: #0000FF;" %)font-face(%%) {
124 (% style="font-weight: bold; color: #008000;" %)font-family(%%): (% style="color: #666666;" %)'myfont'(%%);
125 (% style="font-weight: bold; color: #008000;" %)src(%%): (% style="color: #666666;" %)url('?pid=8104&name=Roboto-Regular.woff2') format('woff2')(%%);
126 (% style="color: #666666;" %)url('?pid=8104&name=Roboto-Regular.woff') format('woff')(%%);
127 (% style="color: #666666;" %)url('?pid=8104&name=Roboto-Regular.ttf') format('ttf')(%%);
128 (% style="font-weight: bold; color: #008000;" %)font-weight(%%): (% style="font-weight: bold; color: #008000;" %)normal(%%);
129 (% style="font-weight: bold; color: #008000;" %)font-style(%%): (% style="font-weight: bold; color: #008000;" %)normal(%%);
130 }
131
132 .(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) {
133 (% style="font-weight: bold; color: #008000;" %)font-family(%%): (% style="color: #666666;" %)'myfont'(%%);
134 }
135 )))
136 )))
137
gru 1.1 138 == Anpassen des Favicons ==
139
sas 3.1 140 (% class="xm-figure xm-float-right xm-clear-h2" data-alt="Im im Metabereich kann der Link auf ein anderes Favicon definiert werden." %)
141 (((
142 (% class="xm-figure-inner" style="width:310px" %)
143 (((
144 [[[[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."]]
gru 1.1 145
sas 3.1 146 (% class="xm-figure-caption" %)
147 (((
148 Im (% class="xm-smallcaps" %)Xima® Formcycle-Designer(%%) im Metabereich kann der Link auf ein anderes Favicon definiert werden.
149 )))
150 )))
151 )))
gru 1.1 152
sas 3.1 153 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:
154
155 (% class="box" %)
156 (((
157 (% class="code" %)
158 (((
159 <(% 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"(%%) />
160 )))
161 )))
162
gru 1.1 163 Für ein Base64-Codiertes Bild erfolgt eine Einbindung analog:
164
sas 3.1 165 (% class="box" %)
166 (((
167 (% class="code" %)
168 (((
169 <(% 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="(%%) />
170 )))
171 )))
gru 1.1 172
sas 3.1 173 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:
gru 1.1 174
sas 3.1 175 (% class="box" %)
176 (((
177 (% class="code" %)
178 (((
179 <(% 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"(%%) />
180 <(% 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"(%%) />
181 )))
182 )))
gru 1.1 183
sas 2.2 184 == Anpassung Abstand Fieldset nach oben ==
gru 1.1 185
sas 2.2 186 Beim //Modern Theme// sind standardmäßig die Abstände zu den oberen Elementen recht groß. Dies kann durch folgenen CSS-Code angepasst werden:
gru 1.1 187
sas 3.1 188 (% class="box" %)
189 (((
190 (% class="code" %)
191 (((
192 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)CXFieldSet(%%) .(% style="font-weight: bold; color: #0000FF;" %)XFieldSetWrapper(%%) {
193 (% style="font-weight: bold; color: #008000;" %)margin-top(%%): (% style="color: #666666;" %)5(% style="color: #B00040;" %)px(%%);
sas 2.2 194 }
sas 3.1 195 )))
196 )))
sas 2.2 197
198 == Anpassung Hintergrundfarbe Fieldset ==
199
200 Um den Hintergrund eines Fieldsets komplett einzufärben, muss beachtet werden auch das legend-Element zu berücksichtigen.
201
sas 3.1 202 (% class="box" %)
203 (((
204 (% class="code" %)
205 (((
206 .(% 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(%%) {
207 (% style="font-weight: bold; color: #008000;" %)background-color(%%): (% style="font-weight: bold; color: #008000;" %)lightsteelblue(%%);
208 (% style="font-weight: bold; color: #008000;" %)width(%%): (% style="color: #666666;" %)100(% style="color: #B00040;" %)%(%%);
sas 2.2 209 }
sas 3.1 210 )))
211 )))
sas 2.2 212
213 == Anpassung Seitenabstand ==
214
215 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:
216
sas 3.1 217 (% class="box" %)
218 (((
219 (% class="code" %)
220 (((
221 .(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)XPage(%%) {
222 (% style="font-weight: bold; color: #008000;" %)padding(%%): (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%) (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%);
sas 2.2 223 }
sas 3.1 224 )))
225 )))
sas 2.2 226
rpe 4.1 227
228