Zum Inhalt springen
Von Version 5.1
bearbeitet von rpe
am 11.08.2022, 13:05
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 2.2
bearbeitet von sas
am 25.11.2021, 12:28
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.rpe
1 +XWiki.sas
Inhalt
... ... @@ -1,83 +1,54 @@
1 1  Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen dargestellt.
2 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"]] ]
3 +{{content/}}
6 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 -* [[Hinzufügen einer eigenen Schriftart>>path:#HHinzufügeneinereigenenSchriftart]]
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 -
22 22  == Einfügen einer Grafik im Formularheader ==
23 23  
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.
7 +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>>Formcycle.Designer.Form.CodingPanel.CSSTab.WebHome]] des Designers, in einem [[Design>>Formcycle.UserInterface.FilesAndTemplates.Design]] oder in einer //.css//-Datei im Formular oder Mandanten eingefügt werden.
25 25  
26 26  === Verwenden eines extern gehosteten Bildes ===
27 27  
28 28  Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:
29 29  
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 */(%%)
13 +{{code language="css"}}
14 +.XHeader {
15 + background-image: url('https://beispiel.de/pfad/zum/bild/logo.png'); /* Auswählen des Bildes per URL */
16 + /* Positionierung des Bildes: */
17 + background-size: auto 25px; /* Das Bild hat 25 Pixel Höhe und die Breite wird automatisch passend zum Seitenverhältnis des Bildes ermittelt */
18 + height: 60px; /* Die Höhe des Headers wird auf 60 Pixel festgelegt */
19 + background-repeat: no-repeat; /* Das Bild wird nur einmal angezeigt */
20 + background-position-x: calc(100% - 30px); /* Das Bild wird 30 Pixel vom rechten Rand positioniert */
21 + background-position-y: 20px; /* Das Bild wird 20 Pixel vom oberen Rand positioniert */
42 42  }
43 -)))
44 -)))
23 +{{/code}}
45 45  
46 46  === Verwenden einer Mandant- oder Formularressource ===
47 47  
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:
27 +Für das Anzeigen eines als Formularressource hochgeladenen Bilddatei {{code language="none"}}headerbild.png{{/code}} mit dem Namen über die gesamte Headergröße eines Formulars mit der ID {{code language="none"}}1234{{/code}} kann folgender Code verwendet werden:
49 49  
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 */(%%)
29 +{{code language="css"}}
30 +.XHeader {
31 + background-image: url('../includes/ressource?pid=1234&name=headerbild.png'); /* Auswählen des Bildes per relativer URL zur Formularressource */
32 + /* Positionierung des Bildes: */
33 + background-size: 100% 100%; /* Bild über die gesamte Headergröße zeichnen */
58 58  }
59 -)))
60 -)))
35 +{{/code}}
61 61  
62 62  === Einfügen als Base64-String ===
63 63  
64 64  Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
65 65  
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 */(%%)
41 +{{code language="css"}}
42 +.XHeader {
43 + background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=); /* Auswahl eines Bildes per Base64-String*/
44 + /* Positionierung des Bildes: */
45 + background-repeat: no-repeat; /* Das Bild wird nur einmal angezeigt */
46 + background-position-x: 10px; /* Positionierung in horizontaler Richtung */
47 + background-position-y: 10px; /* Positionierung in vertikaler Richtung */
48 + background-size: auto 40px; /* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt */
49 + height: 60px; /* Gesamthöhe des Formularheaders */
78 78  }
79 -)))
80 -)))
51 +{{/code}}
81 81  
82 82  Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
83 83  
... ... @@ -87,142 +87,91 @@
87 87  
88 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 89  
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. */(%%)
61 +{{code language="css"}}
62 +.xm-form.modern *, .modern .XPage * { /* Selektiert das gesamte Formular und alle Formularseiten*/
63 + font-family: Verdana; /* Setzt die Default-Schriftart. */
96 96  }
97 -)))
98 -)))
65 +{{/code}}
99 99  
100 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 101  
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. */(%%)
69 +{{code language="css"}}
70 +.modern .xm-item-div LABEL {
71 + font-size: 14px; /* Setzt die Schriftgröße. */
72 + color: #111; /* Setzt die Schriftfarbe. */
109 109  }
110 -)))
111 -)))
74 +{{/code}}
112 112  
113 -== Hinzufügen einer eigenen Schriftart ==
76 +{{velocity}}
77 +##Hierbei ist insbesondere darauf zu achten, dass die CSS-Regeln mindestens so spezifisch sind, wie es das grundlegende Formular-Theme vorgibt.
78 +##
79 +##Zu beachten ist hierbei, dass Formularseiten durch das Hinzufügen von Titel und Untertitel unterhalb des auf allen Seiten sichtbareneigentlichen
80 +##
81 +##Print-PDF-Plugin: Spezialfall
82 +##https://help6.formcycle.eu/xwiki/bin/view/Formcycle/PluginDocumentation/PrintServicePlugin#HTextfelderundAuswahllisten
83 +{{/velocity}}
114 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 -
138 138  == Anpassen des Favicons ==
139 139  
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."]]
87 +{{figure image="designer_favicon_meta_de.png"}}
88 +Im {{designer/}} im Metabereich kann der Link auf ein anderes Favicon definiert werden.
89 +{{/figure}}
145 145  
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 -)))
91 +Um in einem Formular das Favicon zu verändern, kann im {{designer/}} im [[Meta-Bereich>>Formcycle.FormDesigner.CodingPanel.MetaTab]] die Position des zu verwendenen Bildes angegeben werden. Dies erfolgt nach folgendem Muster:
152 152  
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:
93 +{{code language="html"}}
94 +<link rel="shortcut icon" type="image/png" href="https://beispiel.de/pfad/zum/bild/favicon.png" />
95 +{{/code}}
154 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 -
163 163  Für ein Base64-Codiertes Bild erfolgt eine Einbindung analog:
164 164  
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 -)))
99 +{{code language="html"}}
100 +<link rel="shortcut icon" type="image/png" href="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=" />
101 +{{/code}}
172 172  
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:
103 +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 {{code language="none"}}1234{{/code}} und einer Größe von 16 mal 16 und 32 mal 32 Pixeln wie folgt aussehen:
174 174  
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 -)))
105 +{{code language="html"}}
106 +<link rel="shortcut icon" type="image/png" sizes="16x16" href="../includes/ressource?pid=1234&name=favicon16.png" />
107 +<link rel="shortcut icon" type="image/png" sizes="32x32" href="../includes/ressource?pid=1234&name=favicon32.png" />
108 +{{/code}}
183 183  
184 184  == Anpassung Abstand Fieldset nach oben ==
185 185  
186 186  Beim //Modern Theme// sind standardmäßig die Abstände zu den oberen Elementen recht groß. Dies kann durch folgenen CSS-Code angepasst werden:
187 187  
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(%%);
114 +{{code language="css"}}
115 +.modern .CXFieldSet .XFieldSetWrapper {
116 + margin-top: 5px;
194 194  }
195 -)))
196 -)))
118 +{{/code}}
197 197  
198 198  == Anpassung Hintergrundfarbe Fieldset ==
199 199  
200 200  Um den Hintergrund eines Fieldsets komplett einzufärben, muss beachtet werden auch das legend-Element zu berücksichtigen.
201 201  
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;" %)%(%%);
124 +{{code language="css"}}
125 +.modern .CXFieldSet .XFieldSetWrapper, .modern .XFieldSet legend {
126 + background-color: lightsteelblue;
127 + width: 100%;
209 209  }
210 -)))
211 -)))
129 +{{/code}}
212 212  
213 213  == Anpassung Seitenabstand ==
214 214  
215 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 216  
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(%%);
135 +{{code language="css"}}
136 +.modern .XPage {
137 + padding: 25px 25px;
223 223  }
224 -)))
225 -)))
139 +{{/code}}
226 226  
227 227  
228 -
142 +{{velocity}}
143 +##Anstelle des Links kann wahlweise auch direkt eine base64-Repräsentation des Bildes verwendet werden:
144 +##
145 +##{{code language="html"}}
146 +##<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==">
147 +##{{/code}}
148 +{{/velocity}}