Beispiele für Anpassungen bei Erscheinungsbild / CSS

Geändert am Mo, 30 Sep um 3:03 NACHMITTAGS

Auf dieser Seite werden verschiedene Beispiele für die Anpassung des Aussehens von Formularen vorgestellt.

Inhalt

Einfügen einer Grafik im Formularheader

Im Folgenden sollen drei verschiedene Möglichkeiten vorgestellt werden, wie Grafiken auf allen Formularseiten im sichtbaren Headerbereich einfügt werden können.

Die hier gezeigten Beispiele müssen im CSS-Bereich des Designers, in einem Design-Template oder in einer .css-Datei im Formular oder unter Mandanten (Dateien & Templates > Dateien) eingefügt werden.

Verwenden eines extern gehosteten Bildes

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

root, :host {
    /* URL des Logos und sein Seitenverhältnis. */
    --logo-source: url(https://www.formcycle.eu/files/theme/logo/formcycle-logo-klein.png);
    --logo-aspect-ratio: 598 / 145;

    /* Oberer und rechter Abstand des Logos vom Header. */
    --logo-margin-top: 10;
    --logo-margin-right: 10;

    /* Standardhöhe des Logos. Auf kleineren Bildschirmen wird das Logo kleiner (responsive) */
    --logo-max-height: 80;
}

.CXHeader::before {
    content: "";
    aspect-ratio: var(--logo-aspect-ratio);
    background-image: var(--logo-source);
    display: block;
    max-height: calc(1px * var(--logo-max-height));
    max-width: 100%;
    background-repeat: no-repeat;
    justify-self: left;
    pointer-events: none;
    background-size: calc(100%) auto;
    transform: translateY(calc(1px * var(--logo-margin-top)));
    margin: 0px 0 calc(1px * var(--logo-margin-top)) auto;

    /* Kein rechter Rand, wenn die Breite zu klein ist */
    margin-right: calc(clamp(0px, 100% - 2px * var(--logo-margin-right) - 1px * var(--logo-aspect-ratio) * var(--logo-max-height), 1px) * var(--logo-margin-right));
}

Verwenden einer Mandant- oder Formularressource

Hinweis:
Beachten Sie im Nachfolgenden die Angabe der URL auf der rechten Seite unter Eigenschaften. In dieser ist zu beobachten, dass unter Dateien im Designer der Parameter pid verwendet wird. Dies ist die sogenannte Project-ID. Unter Dateien & Templates > Dateien wird hingegen der 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 hingegen immer vorhanden, da er die Bezeichnung der Datei, welche abgerufen werden soll, übergibt.

Soll eine Bilddatei mit dem Namen headerbild.png, die als Mandant-Ressource (Dateien & Templates > Dateien) hochgeladenen wurde, angezeigt werden, kann derr nachfolgende Code verwendet werden. Dieser positioniert das Bild über die gesamte Größe des Headers eines Formulars mit der Mandant-ID 1234:

root, :host {
   /* Auswählen des Bildes per relativer URL zur Datei unter Mandant */
    --logo-source: url('../includes/ressource?mid=1234&name=headerbild.png'); 
}

Andernfalls kann eine Bilddatei mit dem Namen headerbild.png als Formular-Ressource (Mehr > Dateien) hochgeladen werden. Dann sollte nachfolgender Code verwendet werden, der das Bild über die gesamte Größe des Headers eines Formulars mit der Projekt-ID 1234 positioniert:

root, :host {
   /* Auswählen des Bildes per relativer URL zur Formularressource */
    --logo-source: url('../includes/ressource?pid=1234&name=headerbild.png'); 
}

Einfügen als Base64-String

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

root, :host {
   /* Auswahl eines Bildes per Base64-String*/
    --logo-source: url("data:image/png;base64,hier folgt Base64-String");
}

Die Umwandlung eines Bildes in einen Base64 String bieten verschiedene Webseiten kostenlos an.

Bei der Verwendung eines Base64-Strings für die Bildintegration ist zu beachten, dass das Bild bei jedem Formularaufruf neu nachgeladen wird. Da Webbrowser den Base64-String kodierten Bildinhalt nicht als separate Datei erkennen, greifen die Caching-Mechanismen der Webbrowser nicht.

Anpassungen des Schriftbildes

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:

.xm-form.modern *, .modern .XPage * { 
    /* Selektiert das gesamte Formular und alle Formularseiten*/
    font-family: Verdana; /* Setzt die Default-Schriftart. */
}

Die Schriftgrößen und Farben für Labels in Eingabefeldern können wie folgt angepasst werden:

.modern .xm-item-div LABEL {
   font-size: 14px; /* Setzt die Schriftgröße. */
   color: #111; /* Setzt die Schriftfarbe. */
}

Die Schriftgröße aller Eingabeelemente können wie folgt angepasst werden:

.modern .xm-item-div *, .modern .xm-item-div .XItem {
   font-size: 14px; /* Setzt die Schriftgröße. */
}

Hinzufügen einer eigenen Schriftart

Um eine neue Schriftart hinzuzufügen, muss diese entweder im Formular unter Mehr > Dateien im Format woff, woff2 und ttf hochgeladen werden. Wenn die Schriftart stattdessen allgemein zum Einsatz kommt, dann sollte diese unter Dateien & Templates > Dateien abgelegt werden. Dadurch werden die Schriftarten zunächst nur bereitgestellt.

Anschließend muss die Schriftart im CSS-Code eines Formulars eingebunden und kann dann verwendet werden.

In dem folgenden Beispiel sind die Schriftarten unter Dateien & Templates > Dateien hinterlegt. Das ist zu erkennen an dem Parameter mid (siehe Hinweis). Bei einer Ressource im Formular unter Dateien wird, wie bereits erwähnt, der Parameter pid verwendet.

Nach der Übernahme müssen Sie noch die URLs zu den Schriftarten anpassen. Die absolute URL befindet sich rechts im Eigenschaftsbereich.

@font-face {
    font-family: 'myfont';
    src: url('../includes/ressource?mid=8104&name=Roboto-Regular.woff2') format('woff2'),
          url('../includes/ressource?mid=8104&name=Roboto-Regular.woff') format('woff'),
          url('../includes/ressource?mid=8104&name=Roboto-Regular.ttf') format('ttf');
    font-weight:  normal;
    font-style:  normal;
}

Es reicht allerdings nicht aus nur ein font-face zu definieren. Die neue Schriftart muss dann noch als font für den entsprechenden Abschnitt hinterlegt werden. In folgenden Beispiel wird nun im Kopfbereich die neue Schriftart angewendet. Prüfen Sie dies ggf. noch über den Browser Inspector (F12)

.modern .XHeader * {
font-family: 'myfont';
}

Anpassen des Favicons

Um in einem Formular das Favicon zu ändern, kann im Meta-Bereich des Xima® formcycle-Designers die Position des zu verwendenden Bildes angegeben werden. Dies erfolgt nach folgendem Muster:

<link rel="shortcut icon" type="image/png" href="https://beispiel.de/pfad/zum/bild/favicon.png" />

Analog erfolgt die Einbindung eines Base64-codierten Bildes:

<link rel="shortcut icon" type="image/png" href="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=" />

Wenn mehrere Favicons mit unterschiedlichen Größen als Formularressource unter Dateien hochgeladen werden sollen, könnte der entsprechende Code für ein Formular mit der Projekt-ID 1234 und einer Größe von 16 x 16 oder 32 x 32 Pixeln wie folgt aussehen:

<link rel="shortcut icon" type="image/png" sizes="16x16" href="../includes/ressource?pid=1234&name=favicon16.png" />
<link rel="shortcut icon" type="image/png" sizes="32x32" href="../includes/ressource?pid=1234&name=favicon32.png" />

Anpassung Abstand eines Fieldsets nach oben

Beim Modern Theme sind standardmäßig die Abstände zu den oberen Elementen recht groß. Dies kann durch folgenden CSS-Code angepasst werden:

.modern .CXFieldSet .XFieldSetWrapper {
   margin-top: 5px;
}

Anpassung Hintergrundfarbe eines Fieldsets

Um den Hintergrund eines Fieldsets komplett einzufärben, muss das legend-Element berücksichtigt werden, wie im folgenden Beispiel dargestellt.

.modern .CXFieldSet .XFieldSetWrapper, .modern .XFieldSet legend {
    background-color: lightsteelblue;
    width: 100%;
}

Anpassung des Seitenabstands

Die CSS-Klasse XPage legt die Abstände einer Seite fest. Dabei bestimmt der erste Wert den Abstand für oben sowie unten. Der zweite Wert bestimmt den Abstand für rechts bzw. links.

.modern .XPage {
   padding: 25px 25px;
}

Anpassung der Breite eines Hilfetextes

Um die Breite eines Hilfetextes einzustellen, muss der :hover-Selektor des Hilfe-Icons angesprochen werden. Standardmäßig ist die Breite auf 200px eingestellt. Allerdings funktioniert diese Anpassung nur ohne Leitfaden-Plugin.

.xm-help-container:focus .xm-help-icon .xm-help-text, .xm-help-icon:hover .xm-help-text {
    max-width: 225px;
    width: 225px;
}