Von Version 13.1
bearbeitet von sas
am 05.10.2022, 13:03
Ä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
Inhalt
... ... @@ -1,89 +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:#HHinzufFCgeneinereigenenSchriftart]]
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 -{{info}}
23 -**Hinweis**
24 -
25 -Beachten Sie die Angabe der URL auf der linken Seite unter Eigenschaften. Hierbei ist zu beobachten, dass unter Dateien im Designer der Parameter //pid //verwendet wird. Dies ist die Project-ID. Unter Dateien & Templates > Dateien wird hingegen den Parameter //mid //verwendet, welcher die Mandant-ID übergibt. Da die Dateien sich in unterschiedlichen Kontexten befinden, ist es notwendig den Parameter je nach Ablageort zu übergeben. Der Parameter //name //ist immer vorhanden und übergibt die Bezeichnung der Datei, welche abgerufen werden soll.
26 -{{/info}}
27 -
28 28  == Einfügen einer Grafik im Formularheader ==
29 29  
30 -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.
31 31  
32 32  === Verwenden eines extern gehosteten Bildes ===
33 33  
34 34  Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:
35 35  
36 -(% class="box" %)
37 -(((
38 -(% class="code" %)
39 -(((
40 -.(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) {
41 -(% style="color:#008000; font-weight:bold" %)**background-image**(%%): (% style="color:#008000" %)url(%%)((% style="color:#ba2121" %)'https:~/~/beispiel.de/pfad/zum/bild/logo.png'(%%)); (% style="color:#408080; font-style:italic" %)///* Auswählen des Bildes per URL *///(%%)
42 -(% style="color:#408080; font-style:italic" %)///* Positionierung des Bildes: *///(%%)
43 -(% style="color:#008000; font-weight:bold" %)**background-size**(%%): (% style="color:#008000; font-weight:bold" %)**auto**(%%) (% style="color:#666666" %)25(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* Das Bild hat 25 Pixel Höhe und die Breite wird automatisch passend zum Seitenverhältnis des Bildes ermittelt *///(%%)
44 -(% style="color:#008000; font-weight:bold" %)**height**(%%): (% style="color:#666666" %)60(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* Die Höhe des Headers wird auf 60 Pixel festgelegt *///(%%)
45 -(% style="color:#008000; font-weight:bold" %)**background-repeat**(%%): (% style="color:#008000; font-weight:bold" %)**no-repeat**(%%); (% style="color:#408080; font-style:italic" %)///* Das Bild wird nur einmal angezeigt *///(%%)
46 - 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="color:#408080; font-style:italic" %)///* Das Bild wird 30 Pixel vom rechten Rand positioniert *///(%%)
47 - background-position-y: (% style="color:#666666" %)20(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* 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 */
48 48  }
49 -)))
50 -)))
23 +{{/code}}
51 51  
52 52  === Verwenden einer Mandant- oder Formularressource ===
53 53  
54 -Für das Anzeigen eines als Mandantressource (Dateien & Templates > Dateien) hochgeladenen Bilddatei mit dem Namen (% class="box code" %)headerbild.png(%%) und ü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:
55 55  
56 -(% class="box" %)
57 -(((
58 -(% class="code" %)
59 -(((
60 -.(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) {
61 -(% style="color:#008000; font-weight:bold" %)**background-image**(%%): (% style="color:#008000" %)url(%%)((% style="color:#ba2121" %)'../includes/ressource?mid=1234&name=headerbild.png'(%%)); (% style="color:#408080; font-style:italic" %)///* Auswählen des Bildes per relativer URL zur Formularressource *///(%%)
62 -(% style="color:#408080; font-style:italic" %)///* Positionierung des Bildes: *///(%%)
63 -(% style="color:#008000; font-weight:bold" %)**background-size**(%%): (% style="color:#666666" %)100(% style="color:#b00040" %)%(%%) (% style="color:#666666" %)100(% style="color:#b00040" %)%(%%); (% style="color:#408080; font-style:italic" %)///* 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 */
64 64  }
65 -)))
66 -)))
35 +{{/code}}
67 67  
68 68  === Einfügen als Base64-String ===
69 69  
70 70  Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
71 71  
72 -(% class="box" %)
73 -(((
74 -(% class="code" %)
75 -(((
76 -.(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) {
77 -(% style="color:#008000; font-weight:bold" %)**background-image**(%%): (% style="color:#008000" %)url(%%)((% style="color:#008000" %)data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=(%%)); (% style="color:#408080; font-style:italic" %)///* Auswahl eines Bildes per Base64-String*///(%%)
78 -(% style="color:#408080; font-style:italic" %)///* Positionierung des Bildes: *///(%%)
79 -(% style="color:#008000; font-weight:bold" %)**background-repeat**(%%): (% style="color:#008000; font-weight:bold" %)**no-repeat**(%%); (% style="color:#408080; font-style:italic" %)///* Das Bild wird nur einmal angezeigt *///(%%)
80 - background-position-x: (% style="color:#666666" %)10(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* Positionierung in horizontaler Richtung *///(%%)
81 - background-position-y: (% style="color:#666666" %)10(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* Positionierung in vertikaler Richtung *///(%%)
82 -(% style="color:#008000; font-weight:bold" %)**background-size**(%%): (% style="color:#008000; font-weight:bold" %)**auto**(%%) (% style="color:#666666" %)40(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt *///(%%)
83 -(% style="color:#008000; font-weight:bold" %)**height**(%%): (% style="color:#666666" %)60(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* 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 */
84 84  }
85 -)))
86 -)))
51 +{{/code}}
87 87  
88 88  Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
89 89  
... ... @@ -93,146 +93,91 @@
93 93  
94 94  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:
95 95  
96 -(% class="box" %)
97 -(((
98 -(% class="code" %)
99 -(((
100 -.(% style="color:#0000ff; font-weight:bold" %)**xm-form**(%%).(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) (% style="color:#666666" %)*,(%%) .(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XPage**(%%) (% style="color:#666666" %)*(%%) { (% style="color:#408080; font-style:italic" %)///* Selektiert das gesamte Formular und alle Formularseiten*///(%%)
101 -(% style="color:#008000; font-weight:bold" %)**font-family**(%%): Verdana; (% style="color:#408080; font-style:italic" %)///* 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. */
102 102  }
103 -)))
104 -)))
65 +{{/code}}
105 105  
106 106  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:
107 107  
108 -(% class="box" %)
109 -(((
110 -(% class="code" %)
111 -(((
112 -.(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**xm-item-div**(%%) (% style="color:#008000; font-weight:bold" %)**LABEL**(%%) {
113 -(% style="color:#008000; font-weight:bold" %)**font-size**(%%): (% style="color:#666666" %)14(% style="color:#b00040" %)px(%%); (% style="color:#408080; font-style:italic" %)///* Setzt die Schriftgröße. *///(%%)
114 -(% style="color:#008000; font-weight:bold" %)**color**(%%): (% style="color:#666666" %)#111(%%); (% style="color:#408080; font-style:italic" %)///* 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. */
115 115  }
116 -)))
117 -)))
74 +{{/code}}
118 118  
119 -== 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}}
120 120  
121 -Um eine neue Schriftart hinzuzufügen, muss diese entweder im Formular unter //Mehr// > [[//Dateien// >>doc:Formcycle.UserInterface.MyForms.Files||target="_blank"]]im Format woff, woff2 und ttf hochgeladen werden. Wenn die Schriftart allgemein zum Einsatz kommt, dann sollte diese stattdessen unter //Dateien & Templates > //[[//Dateien// >>doc:Formcycle.UserInterface.FilesAndTemplates.Files||target="_blank"]]abgelegt werden. Dadurch werden die Schriftarten erstmal generell bereitgestellt.
122 -
123 -Anschließend kann die Schriftart im CSS-Code eines Formulars eingebunden und verwendet werden.
124 -
125 -In dem folgenden Beispiel sind die Schriftarten unter Dateien & Templates > Dateien hinterlegt, zu erkennen an dem Parameter //mid// (siehe Hinweis). Bei einer Ressource im Formular unter Dateien wird Parameter //pod// verwendet. Die URLs zu den Schriftarten müssen Sie noch anpassen nach der Übernahme. Die absolute URL finden Sie rechts im Eigenschaftsbereich.
126 -
127 -(% class="box" %)
128 -(((
129 -(% class="code" %)
130 -(((
131 -@(% style="color:#0000ff; font-weight:bold" %)**font-face**(%%) {
132 -(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
133 -(% style="color:#008000; font-weight:bold" %)**src**(%%): (% style="color:#666666" %)url('../includes/ressource?mid=8104&name=Roboto-Regular.woff2') format('woff2'),(%%)
134 -(% style="color:#666666" %) url('../includes/ressource?mid=8104&name=Roboto-Regular.woff') format('woff')(%%),
135 -(% style="color:#666666" %) url('../includes/ressource?mid=8104&name=Roboto-Regular.ttf') format('ttf')(%%);
136 -(% style="color:#008000; font-weight:bold" %)**font-weight**(%%): (% style="color:#008000; font-weight:bold" %)**normal**(%%);
137 -(% style="color:#008000; font-weight:bold" %)**font-style**(%%): (% style="color:#008000; font-weight:bold" %)**normal**(%%);
138 -}
139 -
140 -.(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) * {
141 -(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
142 -}
143 -)))
144 -)))
145 -
146 -Es reicht nicht aus nur ein font-face zu definieren. Die neue Schriftart muss dann noch als font für den entsprechenden Abschnitt hinterlegt werden. In diesem Beispiel wird nun im Kopfbereich die neue Schriftart angewendet. Prüfen Sie dies ggf. noch über den Browser Inspector (F12).
147 -
148 148  == Anpassen des Favicons ==
149 149  
150 -(% class="xm-figure xm-float-right xm-clear-h2" data-alt="Im im Metabereich kann der Link auf ein anderes Favicon definiert werden." %)
151 -(((
152 -(% class="xm-figure-inner" style="width:310px" %)
153 -(((
154 -[[[[image:designer_favicon_meta_de.png||alt="/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}}
155 155  
156 -(% class="xm-figure-caption" %)
157 -(((
158 -Im (% class="xm-smallcaps" %)Xima® Formcycle-Designer(%%) im Metabereich kann der Link auf ein anderes Favicon definiert werden.
159 -)))
160 -)))
161 -)))
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:
162 162  
163 -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}}
164 164  
165 -(% class="box" %)
166 -(((
167 -(% class="code" %)
168 -(((
169 -<(% style="color:#008000; font-weight:bold" %)**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"(%%) />
170 -)))
171 -)))
172 -
173 173  Für ein Base64-Codiertes Bild erfolgt eine Einbindung analog:
174 174  
175 -(% class="box" %)
176 -(((
177 -(% class="code" %)
178 -(((
179 -<(% style="color:#008000; font-weight:bold" %)**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="(%%) />
180 -)))
181 -)))
99 +{{code language="html"}}
100 +<link rel="shortcut icon" type="image/png" href="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=" />
101 +{{/code}}
182 182  
183 -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:
184 184  
185 -(% class="box" %)
186 -(((
187 -(% class="code" %)
188 -(((
189 -<(% style="color:#008000; font-weight:bold" %)**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"(%%) />
190 -<(% style="color:#008000; font-weight:bold" %)**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"(%%) />
191 -)))
192 -)))
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}}
193 193  
194 194  == Anpassung Abstand Fieldset nach oben ==
195 195  
196 196  Beim //Modern Theme// sind standardmäßig die Abstände zu den oberen Elementen recht groß. Dies kann durch folgenen CSS-Code angepasst werden:
197 197  
198 -(% class="box" %)
199 -(((
200 -(% class="code" %)
201 -(((
202 -.(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**CXFieldSet**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XFieldSetWrapper**(%%) {
203 -(% style="color:#008000; font-weight:bold" %)**margin-top**(%%): (% style="color:#666666" %)5(% style="color:#b00040" %)px(%%);
114 +{{code language="css"}}
115 +.modern .CXFieldSet .XFieldSetWrapper {
116 + margin-top: 5px;
204 204  }
205 -)))
206 -)))
118 +{{/code}}
207 207  
208 208  == Anpassung Hintergrundfarbe Fieldset ==
209 209  
210 210  Um den Hintergrund eines Fieldsets komplett einzufärben, muss beachtet werden auch das legend-Element zu berücksichtigen.
211 211  
212 -(% class="box" %)
213 -(((
214 -(% class="code" %)
215 -(((
216 -.(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**CXFieldSet**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XFieldSetWrapper**(% style="color:#666666" %),(%%) .(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XFieldSet**(%%) (% style="color:#008000; font-weight:bold" %)**legend**(%%) {
217 -(% style="color:#008000; font-weight:bold" %)**background-color**(%%): (% style="color:#008000; font-weight:bold" %)**lightsteelblue**(%%);
218 -(% style="color:#008000; font-weight:bold" %)**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%;
219 219  }
220 -)))
221 -)))
129 +{{/code}}
222 222  
223 223  == Anpassung Seitenabstand ==
224 224  
225 225  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:
226 226  
227 -(% class="box" %)
228 -(((
229 -(% class="code" %)
230 -(((
231 -.(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XPage**(%%) {
232 -(% style="color:#008000; font-weight:bold" %)**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;
233 233  }
234 -)))
235 -)))
139 +{{/code}}
236 236  
237 237  
238 -
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}}