Von Version 10.1
bearbeitet von sas
am 05.10.2022, 12:58
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 13.1
bearbeitet von sas
am 05.10.2022, 13:03
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -19,6 +19,12 @@
19 19  )))
20 20  )))
21 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 +
22 22  == Einfügen einer Grafik im Formularheader ==
23 23  
24 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.
... ... @@ -45,7 +45,7 @@
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:
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:
49 49  
50 50  (% class="box" %)
51 51  (((
... ... @@ -52,7 +52,7 @@
52 52  (% class="code" %)
53 53  (((
54 54  .(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) {
55 -(% style="color:#008000; font-weight:bold" %)**background-image**(%%): (% style="color:#008000" %)url(%%)((% style="color:#ba2121" %)'../includes/ressource?pid=1234&name=headerbild.png'(%%)); (% style="color:#408080; font-style:italic" %)///* Auswählen des Bildes per relativer URL zur Formularressource *///(%%)
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 *///(%%)
56 56  (% style="color:#408080; font-style:italic" %)///* Positionierung des Bildes: *///(%%)
57 57  (% 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 *///(%%)
58 58  }
... ... @@ -116,29 +116,23 @@
116 116  
117 117  Anschließend kann die Schriftart im CSS-Code eines Formulars eingebunden und verwendet werden.
118 118  
119 -{{info}}
120 -**Hinweis**
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.
121 121  
122 -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.
123 -{{/info}}
124 -
125 -In dem folgenden Beispiel sind die Schriftarten unter Dateien & Templates hinterlegt, zu erkennen an dem Parameter //mid// (siehe Hinweis). Die URLs zu den Schriftarten müssen Sie noch anpassen nach der Übernahme. Die absolute URL finden Sie rechts im Eigenschaftsbereich.
126 -
127 127  (% class="box" %)
128 128  (((
129 129  (% class="code" %)
130 130  (((
131 131  @(% style="color:#0000ff; font-weight:bold" %)**font-face**(%%) {
132 -(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
132 +(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
133 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')(%%);
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 136  (% style="color:#008000; font-weight:bold" %)**font-weight**(%%): (% style="color:#008000; font-weight:bold" %)**normal**(%%);
137 137  (% style="color:#008000; font-weight:bold" %)**font-style**(%%): (% style="color:#008000; font-weight:bold" %)**normal**(%%);
138 138  }
139 139  
140 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'(%%);
141 +(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
142 142  }
143 143  )))
144 144  )))
... ... @@ -151,7 +151,7 @@
151 151  (((
152 152  (% class="xm-figure-inner" style="width:310px" %)
153 153  (((
154 -[[[[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."]]
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."]]
155 155  
156 156  (% class="xm-figure-caption" %)
157 157  (((