Änderungen von Dokument Beispiele für Anpassungen bei Erscheinungsbild / CSS

Von 9.1 nach 8.1

Von Version 13.1

bearbeitet von sas
am 05.10.2022, 13:03

Änderungskommentar: Es gibt keinen Kommentar für diese Version

Auf Version 9.1

bearbeitet von sas
am 02.09.2022, 14:59

Änderungskommentar: Es gibt keinen Kommentar für diese Version

Rohform
Im Layout

Zusammenfassung

Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

@@ -19,12 +19,6 @@
  )))
  )))
--{{info}}
--**Hinweis**
--
--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.
--{{/info}}
--
  == Einfügen einer Grafik im Formularheader ==
  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.
@@ -51,7 +51,7 @@
  === Verwenden einer Mandant- oder Formularressource ===
--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:
++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" %)
  (((
@@ -58,7 +58,7 @@
  (% class="code" %)
  (((
  .(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) {
--(% 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 *///(%%)
++(% 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 *///(%%)
  (% style="color:#408080; font-style:italic" %)///* Positionierung des Bildes: *///(%%)
  (% 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 *///(%%)
  }
@@ -120,25 +120,23 @@
  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.
--Anschließend kann die Schriftart im CSS-Code eines Formulars eingebunden und verwendet werden.
++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.
--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.
--
  (% class="box" %)
  (((
  (% class="code" %)
  (((
  @(% style="color:#0000ff; font-weight:bold" %)**font-face**(%%) {
--(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
--(% style="color:#008000; font-weight:bold" %)**src**(%%): (% style="color:#666666" %)url('../includes/ressource?mid=8104&name=Roboto-Regular.woff2') format('woff2'),(%%)
--(% style="color:#666666" %) url('../includes/ressource?mid=8104&name=Roboto-Regular.woff') format('woff')(%%),
--(% style="color:#666666" %) url('../includes/ressource?mid=8104&name=Roboto-Regular.ttf') format('ttf')(%%);
++(% style="color:#008000; font-weight:bold" %)**font-family**(%%):  (% style="color:#666666" %)'myfont'(%%);
++(% style="color:#008000; font-weight:bold" %)**src**(%%):  (% style="color:#666666" %)url('?pid=8104&name=Roboto-Regular.woff2') format('woff2'),(%%)
++      (% style="color:#666666" %) url('?pid=8104&name=Roboto-Regular.woff') format('woff')(%%),
++      (% style="color:#666666" %) url('?pid=8104&name=Roboto-Regular.ttf') format('ttf')(%%);
  (% style="color:#008000; font-weight:bold" %)**font-weight**(%%):  (% style="color:#008000; font-weight:bold" %)**normal**(%%);
  (% style="color:#008000; font-weight:bold" %)**font-style**(%%):  (% style="color:#008000; font-weight:bold" %)**normal**(%%);
  }
  .(% style="color:#0000ff; font-weight:bold" %)**modern**(%%) .(% style="color:#0000ff; font-weight:bold" %)**XHeader**(%%) * {
--(% style="color:#008000; font-weight:bold" %)**font-family**(%%): (% style="color:#666666" %)'myfont'(%%);
++(% style="color:#008000; font-weight:bold" %)**font-family**(%%):  (% style="color:#666666" %)'myfont'(%%);
  }
  )))
  )))
@@ -151,7 +151,7 @@
  (((
  (% class="xm-figure-inner" style="width:310px" %)
  (((
--[[[[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."]]
++[[[[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."]]
  (% class="xm-figure-caption" %)
  (((