... |
... |
@@ -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 |
((( |