... |
... |
@@ -1,82 +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 |
|
-* [[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 |
21 |
== Einfügen einer Grafik im Formularheader == |
22 |
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. |
|
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.FormDesigner.CodingPanel.CSSTab]] des Designers, in einem [[Design>>Formcycle.UserInterface.FilesAndTemplates.Design]] oder in einer //.css//-Datei im Formular oder Mandanten eingefügt werden. |
24 |
24 |
|
25 |
25 |
=== Verwenden eines extern gehosteten Bildes === |
26 |
26 |
|
27 |
27 |
Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden: |
28 |
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 */(%%) |
|
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 */ |
41 |
41 |
} |
42 |
|
-))) |
43 |
|
-))) |
|
23 |
+{{/code}} |
44 |
44 |
|
45 |
45 |
=== Verwenden einer Mandant- oder Formularressource === |
46 |
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: |
|
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: |
48 |
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 */(%%) |
|
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 */ |
57 |
57 |
} |
58 |
|
-))) |
59 |
|
-))) |
|
35 |
+{{/code}} |
60 |
60 |
|
61 |
61 |
=== Einfügen als Base64-String === |
62 |
62 |
|
63 |
63 |
Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden: |
64 |
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 */(%%) |
|
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 */ |
77 |
77 |
} |
78 |
|
-))) |
79 |
|
-))) |
|
51 |
+{{/code}} |
80 |
80 |
|
81 |
81 |
Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers. |
82 |
82 |
|
... |
... |
@@ -86,142 +86,61 @@ |
86 |
86 |
|
87 |
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 |
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. */(%%) |
|
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. */ |
95 |
95 |
} |
96 |
|
-))) |
97 |
|
-))) |
|
65 |
+{{/code}} |
98 |
98 |
|
99 |
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 |
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. */(%%) |
|
69 |
+{{code language="css"}} |
|
70 |
+.modern .xm-item-div LABEL { |
|
71 |
+ font-size: 14px; /* Setzt die Schriftgröße. */ |
|
72 |
+ color: #111; /* Setzt die Schriftfarbe. */ |
108 |
108 |
} |
109 |
|
-))) |
110 |
|
-))) |
|
74 |
+{{/code}} |
111 |
111 |
|
112 |
|
-== 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}} |
113 |
113 |
|
114 |
|
-Um eine neue Schriftart hinzuzufügen, muss sie unter //Mehr// > //Dateien// im Format woff, woff2 und ttf hochgeladen werden. |
115 |
|
-Anschließend kann die Schriftart wie folgt im CSS-Code eines Formulars eingebunden und verwendet werden: |
116 |
|
-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. |
117 |
|
- |
118 |
|
-(% class="box" %) |
119 |
|
-((( |
120 |
|
-(% class="code" %) |
121 |
|
-((( |
122 |
|
-@(% style="font-weight: bold; color: #0000FF;" %)font-face(%%) { |
123 |
|
- (% style="font-weight: bold; color: #008000;" %)font-family(%%): (% style="color: #666666;" %)'myfont'(%%); |
124 |
|
- (% style="font-weight: bold; color: #008000;" %)src(%%): (% style="color: #666666;" %)url('?pid=8104&name=Roboto-Regular.woff2') format('woff2')(%%); |
125 |
|
- (% style="color: #666666;" %)url('?pid=8104&name=Roboto-Regular.woff') format('woff')(%%); |
126 |
|
- (% style="color: #666666;" %)url('?pid=8104&name=Roboto-Regular.ttf') format('ttf')(%%); |
127 |
|
- (% style="font-weight: bold; color: #008000;" %)font-weight(%%): (% style="font-weight: bold; color: #008000;" %)normal(%%); |
128 |
|
- (% style="font-weight: bold; color: #008000;" %)font-style(%%): (% style="font-weight: bold; color: #008000;" %)normal(%%); |
129 |
|
-} |
130 |
|
- |
131 |
|
-.(% style="font-weight: bold; color: #0000FF;" %)XHeader(%%) { |
132 |
|
- (% style="font-weight: bold; color: #008000;" %)font-family(%%): (% style="color: #666666;" %)'myfont'(%%); |
133 |
|
-} |
134 |
|
-))) |
135 |
|
-))) |
136 |
|
- |
137 |
137 |
== Anpassen des Favicons == |
138 |
138 |
|
139 |
|
-(% class="xm-figure xm-float-right xm-clear-h2" data-alt="Im im Metabereich kann der Link auf ein anderes Favicon definiert werden." %) |
140 |
|
-((( |
141 |
|
-(% class="xm-figure-inner" style="width:310px" %) |
142 |
|
-((( |
143 |
|
-[[[[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}} |
144 |
144 |
|
145 |
|
-(% class="xm-figure-caption" %) |
146 |
|
-((( |
147 |
|
-Im (% class="xm-smallcaps" %)Xima® Formcycle-Designer(%%) im Metabereich kann der Link auf ein anderes Favicon definiert werden. |
148 |
|
-))) |
149 |
|
-))) |
150 |
|
-))) |
|
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: |
151 |
151 |
|
152 |
|
-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}} |
153 |
153 |
|
154 |
|
-(% class="box" %) |
155 |
|
-((( |
156 |
|
-(% class="code" %) |
157 |
|
-((( |
158 |
|
-<(% 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"(%%) /> |
159 |
|
-))) |
160 |
|
-))) |
161 |
|
- |
162 |
162 |
Für ein Base64-Codiertes Bild erfolgt eine Einbindung analog: |
163 |
163 |
|
164 |
|
-(% class="box" %) |
165 |
|
-((( |
166 |
|
-(% class="code" %) |
167 |
|
-((( |
168 |
|
-<(% 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="(%%) /> |
169 |
|
-))) |
170 |
|
-))) |
|
99 |
+{{code language="html"}} |
|
100 |
+<link rel="shortcut icon" type="image/png" href="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=" /> |
|
101 |
+{{/code}} |
171 |
171 |
|
172 |
|
-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: |
173 |
173 |
|
174 |
|
-(% class="box" %) |
175 |
|
-((( |
176 |
|
-(% class="code" %) |
177 |
|
-((( |
178 |
|
-<(% 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"(%%) /> |
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;" %)"32x32"(%%) (% style="color: #7D9029;" %)href(% style="color: #666666;" %)=(% style="color: #BA2121;" %)"../includes/ressource?pid=1234&name=favicon32.png"(%%) /> |
180 |
|
-))) |
181 |
|
-))) |
|
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}} |
182 |
182 |
|
183 |
|
-== Anpassung Abstand Fieldset nach oben == |
184 |
184 |
|
185 |
|
-Beim //Modern Theme// sind standardmäßig die Abstände zu den oberen Elementen recht groß. Dies kann durch folgenen CSS-Code angepasst werden: |
186 |
186 |
|
187 |
|
-(% class="box" %) |
188 |
|
-((( |
189 |
|
-(% class="code" %) |
190 |
|
-((( |
191 |
|
-.(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)CXFieldSet(%%) .(% style="font-weight: bold; color: #0000FF;" %)XFieldSetWrapper(%%) { |
192 |
|
- (% style="font-weight: bold; color: #008000;" %)margin-top(%%): (% style="color: #666666;" %)5(% style="color: #B00040;" %)px(%%); |
193 |
|
-} |
194 |
|
-))) |
195 |
|
-))) |
196 |
|
- |
197 |
|
-== Anpassung Hintergrundfarbe Fieldset == |
198 |
|
- |
199 |
|
-Um den Hintergrund eines Fieldsets komplett einzufärben, muss beachtet werden auch das legend-Element zu berücksichtigen. |
200 |
|
- |
201 |
|
-(% class="box" %) |
202 |
|
-((( |
203 |
|
-(% class="code" %) |
204 |
|
-((( |
205 |
|
-.(% 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(%%) { |
206 |
|
- (% style="font-weight: bold; color: #008000;" %)background-color(%%): (% style="font-weight: bold; color: #008000;" %)lightsteelblue(%%); |
207 |
|
- (% style="font-weight: bold; color: #008000;" %)width(%%): (% style="color: #666666;" %)100(% style="color: #B00040;" %)%(%%); |
208 |
|
-} |
209 |
|
-))) |
210 |
|
-))) |
211 |
|
- |
212 |
|
-== Anpassung Seitenabstand == |
213 |
|
- |
214 |
|
-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: |
215 |
|
- |
216 |
|
-(% class="box" %) |
217 |
|
-((( |
218 |
|
-(% class="code" %) |
219 |
|
-((( |
220 |
|
-.(% style="font-weight: bold; color: #0000FF;" %)modern(%%) .(% style="font-weight: bold; color: #0000FF;" %)XPage(%%) { |
221 |
|
- (% style="font-weight: bold; color: #008000;" %)padding(%%): (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%) (% style="color: #666666;" %)25(% style="color: #B00040;" %)px(%%); |
222 |
|
-} |
223 |
|
-))) |
224 |
|
-))) |
225 |
|
- |
226 |
|
- |
227 |
|
- |
|
112 |
+{{velocity}} |
|
113 |
+##Anstelle des Links kann wahlweise auch direkt eine base64-Repräsentation des Bildes verwendet werden: |
|
114 |
+## |
|
115 |
+##{{code language="html"}} |
|
116 |
+##<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=="> |
|
117 |
+##{{/code}} |
|
118 |
+{{/velocity}} |