Beispiele für Anpassungen bei Erscheinungsbild / CSS

1

Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen dargestellt.

2

3

(% class="box xm-toc-box" data-content-hide="Verbergen" data-content-show="Anzeigen" style="width:auto;" %)

4

(((

5

Inhalt (% class="xm-toc-toggle" %)[ [[Verbergen>>path:javascript:void||class="xm-toc-togglelink"]] ]

6

7

(% class="xm-toc numbered-true" %)

8

(((

9

* [[Einfügen einer Grafik im Formularheader>>path:#HEinfFCgeneinerGrafikimFormularheader]]

10

** [[Verwenden eines extern gehosteten Bildes>>path:#HVerwendeneinesexterngehostetenBildes]]

11

** [[Verwenden einer Mandant- oder Formularressource>>path:#HVerwendeneinerMandant-oderFormularressource]]

12

** [[Einfügen als Base64-String>>path:#HEinfFCgenalsBase64-String]]

13

* [[Anpassungen des Schriftbildes>>path:#HAnpassungendesSchriftbildes]]

14

* [[Anpassen des Favicons>>path:#HAnpassendesFavicons]]

15

* [[Anpassung Abstand Fieldset nach oben>>path:#HAnpassungAbstandFieldsetnachoben]]

16

* [[Anpassung Hintergrundfarbe Fieldset>>path:#HAnpassungHintergrundfarbeFieldset]]

17

* [[Anpassung Seitenabstand>>path:#HAnpassungSeitenabstand]]

)))

)))

== Einfügen einer Grafik im Formularheader ==

22

23

Für das Einfügen einer Grafik im auf allen Formularseiten sichtbaren Headerbereich des Formulars sollen im folgenden 3 verschiedene Möglichkeiten vorgestellt werden. Die hier gezeigten Beispiele müssen im [[CSS-Bereich>>path:/xwiki/bin/view/Formcycle/Designer/Form/CodingPanel/CSSTab/]] des Designers, in einem [[Design>>path:/xwiki/bin/create/Formcycle/UserInterface/FilesAndTemplates/Design/WebHome?parent=Examples.FormStylingAdjustments]] oder in einer //.css//-Datei im Formular oder Mandanten eingefügt werden.

24

25

=== Verwenden eines extern gehosteten Bildes ===

26

27

Um ein extern gehostets (kleines) Logo mittig rechts im Header zu postitionieren, kann der folgende Code als Basis verwendet werden:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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 */(%%)

}

)))

)))

=== Verwenden einer Mandant- oder Formularressource ===

46

47

Für das Anzeigen eines als Formularressource hochgeladenen Bilddatei (% class="box code" %)headerbild.png(%%) mit dem Namen über die gesamte Headergröße eines Formulars mit der ID (% class="box code" %)1234(%%) kann folgender Code verwendet werden:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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 */(%%)

}

)))

)))

=== Einfügen als Base64-String ===

62

63

Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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 */(%%)

}

)))

)))

Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.

82

83

Zu beachten ist hierbei, dass bei der Einbindung des Bildes als base64-String bei jedem Aufruf des Formulars das Bild erneut mitübertragen wird, da die Cachingmechanismen der Webbrowser für Dateien hier nicht greifen.

84

85

== Anpassungen des Schriftbildes ==

86

87

Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart festzulegen, kann bei Verwendung des //Modern Themes// folgender CSS-Code als Grundlage genommen werden:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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. */(%%)

}

)))

)))

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:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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. */(%%)

}

)))

)))

== Hinzufügen einer eigenen Schriftart ==

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.

(% class="box" %)

(((

(% class="code" %)

(((

@(% 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'(%%);

}

)))

)))

== Anpassen des Favicons ==

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."]]

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.

)))

)))

)))

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:

(% class="box" %)

(((

(% class="code" %)

(((

<(% 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"(%%) />

)))

)))

Für ein Base64-Codiertes Bild erfolgt eine Einbindung analog:

(% class="box" %)

(((

(% class="code" %)

(((

<(% 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="(%%) />

)))

)))

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:

(% class="box" %)

(((

(% class="code" %)

(((

<(% 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"(%%) />

)))

)))

== Anpassung Abstand Fieldset nach oben ==

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:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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(%%);

}

)))

)))

== Anpassung Hintergrundfarbe Fieldset ==

198

199

Um den Hintergrund eines Fieldsets komplett einzufärben, muss beachtet werden auch das legend-Element zu berücksichtigen.

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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;" %)%(%%);

}

)))

)))

== 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:

(% class="box" %)

(((

(% class="code" %)

(((

.(% 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(%%);

}

)))

)))

Wiki-Quellcode von Beispiele für Anpassungen bei Erscheinungsbild / CSS

Navigation