Von Version 9.1
bearbeitet von sas
am 02.09.2022, 14:59
Ä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  }
... ... @@ -114,23 +114,25 @@
114 114  
115 115  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.
116 116  
117 -Anschließend kann die Schriftart im CSS-Code eines Formulars eingebunden und verwendet werden. in dem folgenden Beispiel sind die Schriftarten im Formular hinterlegt, zu erkennen an dem Parameter //pid//. Sollten die Schriftarten unter Dateien & Templates abgelegt sein, beachten Sie hierbei dass der Parameter //mid// verwendet wird. Bitte beachten Sie, ddass die URL's zu den Schriftarten angepasst werden müssen. Die absolute URL finden Sie rechts im Eigenschaftsbereich.
123 +Anschließend kann die Schriftart im CSS-Code eines Formulars eingebunden und verwendet werden.
118 118  
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 +
119 119  (% class="box" %)
120 120  (((
121 121  (% class="code" %)
122 122  (((
123 123  @(% style="color:#0000ff; font-weight:bold" %)**font-face**(%%) {
124 -(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
125 -(% style="color:#008000; font-weight:bold" %)**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')(%%);
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')(%%);
128 128  (% style="color:#008000; font-weight:bold" %)**font-weight**(%%): (% style="color:#008000; font-weight:bold" %)**normal**(%%);
129 129  (% style="color:#008000; font-weight:bold" %)**font-style**(%%): (% style="color:#008000; font-weight:bold" %)**normal**(%%);
130 130  }
131 131  
132 132  .(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) * {
133 -(% 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'(%%);
134 134  }
135 135  )))
136 136  )))
... ... @@ -143,7 +143,7 @@
143 143  (((
144 144  (% class="xm-figure-inner" style="width:310px" %)
145 145  (((
146 -[[[[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."]]
147 147  
148 148  (% class="xm-figure-caption" %)
149 149  (((