Stilanpassungen an Formularen
Auf dieser Seite werden verschiedene Beispiele für das Anpassen des Aussehens von Formularen per CSS dargestellt.
Einfügen einer Grafik im Formularheader
Für das Einfügen einer Grafik im auf allen Formularseiten sichtbaren Headerbereich des Formulars sollen im Forlgenden 3 verschiedene Möglichkeiten vorgestellt werden.
Verwenden eines extern gehosteten Bildes
font-size: 16px; /* Setzt die Basisschriftgröße. */
color: #111; /* Setzt die Default-Schriftfarbe. */
font-family: Arial; /* Setzt die Default-Schriftart. */
}
Verwenden einer Mandant- oder Formularressource
font-size: 16px; /* Setzt die Basisschriftgröße. */
color: #111; /* Setzt die Default-Schriftfarbe. */
font-family: Arial; /* Setzt die Default-Schriftart. */
}
Einfügen als Base64-String
Ein als Base64-String kodiertes Bild kann auch einfach im CSS eingefügt werden:
background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=);
background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
background-position-x: 10px; /* Positionierung in horizontaler Richtung */
background-position-y: 10px; /* Positionierung in vertikaler Richtung */
background-size: auto 40px; /* Größe des Bildes: 40px hoch und so breit, wie es das Seitenverhältnis des Bildes vorgibt */
height: 60px; /* Gesamthöhe des Formularheaders */
}
Die weiteren CSS dienen zur Positionierung des Bildes und zum Festelgen der Höhe des Headers.
Zu beachten ist hierbei, dass bei der Einbindung des Bildes als base64-String bei jedem Aufruf des Formulars das Bild erneut mitübertragen wird, da die Cachingmechanismen der Webbrowser für Dateien hier nicht greifen.
Anpassungen des Schriftbildes
Um allgemein für alle Elemente im Formular die Eigenschaften der Schriftart festzulegen, kann folgender CSS-Code als Grundlage genommen werden:
font-size: 16px; /* Setzt die Basisschriftgröße. */
color: #111; /* Setzt die Default-Schriftfarbe. */
font-family: Arial; /* Setzt die Default-Schriftart. */
}
Für Labels und Text in Eigabefeldern müssen die Schriftgrößen und Farben gegebenenfalls noch angepasst werden. Dies kann für die entsprechenden
Anpassen des Favicons
Um in einem Formular das Favicon zu verändern, kann im Meta-Bereich die Position der zu verwendenen Bildes angegeben werden. Dies erfolgt nach folgendem Muster:
Wenn das Favicon als Formularressource unter Dateien hochgeladen wurde, könnte der entsprechende Code für ein Formular mit der ID 1234 und einer Größe von 32 mal 32 Pixeln wie folgt aussehen: