Um die Anwendung optisch an die eigenen Vorstellungen anzupassen können das Hintergrundbild der Anmeldeseite, das Logo in der Kopfzeile der Anwendung, das Logo der Anwendung im Browsertab sowie auch die Anwendungsfarben zur Laufzeit an die eigenen Wünsche angepasst werden.
Für Anpassungen dieser Art wird im Anwendungsverzeichnes auf dem Webserver der Ordner „Custom/Styles” verwendet. In diesem können folgende Dateien hinterlegt werden. Alle hier genannten Dateien sind optional.
| Datei | Aufgabe | Erklärung |
|---|---|---|
| loginscreen.jpg | Das Hintergrundbild für die Anmeldeseite | Die Größe des Bildes wird unter Beibehaltung der Aspect Ratio auf die aktuelle Browser-Größe verändert. Wenn das Bild größer aus die aktuelle Browser-Größe ist, wird ein zentrierter Ausschnitt dargestellt. Das Standardbild hat eine Auflösung von 2356×1571 Pixel. |
| balogo.png | Das innerhalb der Anwendung gezeigte Logo, z.B. auf der Anmeldeseite oder in der Kopfzeile der Anwendung | Wenn die Grafik höher als 46 Pixel ist, wird sie auf eine Höhe von 46 Pixel verkleinert. |
| favicon.ico | Das im Browser-Tab dargestellte Icon | Es muss sich um eine .ico-Datei mit den Maßen 16 × 16 Pixel handeln. |
| Theme.css | Farbanpassungen | Wenn diese Datei vorhanden ist, wird sie automatisch als Standard-Theme verwendet, falls kein spezielles anderes Theme in den Anwendungseinstellungen ausgewählt wurde. |
Definition der Farben
In den Theme-CSS-Dateien können Farbanpassungen über unterschiedliche Variablen definiert werden. Legen Sie hierzu den Ordner Custom/Styles an. Beispiele zur Farbanpassung finden Sie innerhalb dieser Dokumentation. Die Farben können in allen innerhalb CSS verwendbaren Formaten angegeben werden (Hex, RGB, RGBA, Keyword).
Beispiel für das Anlegen einer Theme Datei (Example):
:root {
--main-color: #ff0000;
}In den Anwendungseinstellungen kann eine alternative CSS-Datei oder eines der ausgelieferten alternativen Standard-Themes als Theme ausgewählt werden. Wenn dort kein Theme ausgewählt wird, wird die Datei „Theme.css” verwendet. Ist diese ebenfalls nicht vorhanden, wird das Standard-Theme benutzt.
Die CSS-Dateien der ausgelieferten Themes können über folgende URL aus der Instanz heruntergeladen werden: https://[Pfad zur Instanz]/StaticFileHandler/GetCI?file=Theme_pastel.css&folder=Content. Ersetzen Sie den Parameter file durch das gewünschte Theme. Sie können über file=Theme.css auch das Standard-Theme herunterladen. Eine gleichnamige Datei im Ordner „Custom/Styles” wird bevorzugt heruntergeladen.
Beispiel für die Definition einer Theme Variable:
--main-color: #ff0000;
--main-color: #f00;
--main-color: rgb(100%, 0, 0);
--main-color: rgb(255, 0, 0);
--main-color: rgba(255, 0, 0, 1);
--main-color: red;Die Farbe von Icons kann ebenfalls angepasst werden. Hier gilt es zu beachten, dass Icons keine Farbe als Wert annehmen, sondern einen Filter. Möglichkeiten zur Berechnung dieses Filterwertes sind online auffindbar, beispielsweise unter https://codepen.io/sosuke/pen/Pjoqqp oder https://angel-rs.github.io/css-color-filter-generator/.
Beispiel für Icon-Farben:
--main-icon-color: brightness(0) saturate(100%) invert(24%) sepia(81%) saturate(6822%) hue-rotate(355deg) brightness(107%) contrast(129%);Struktur der Farbvariablen
Die Farben können sowohl zentral für alle Stellen, als auch individuell für spezieller Stellen innerhalb der Anwendung geändert werden. Spezielle Stellen referenzieren in den meisten Fällen allgemeine Farben. Sind keine speziellen Änderungen an diesen Stellen gewünscht, ist keine weitere Farbanpassung notwendig.