Themes
Mit Themes kann man das Erscheinungsbild der Platform grundlegend verändern.
Ein Benutzer kann sein Theme im Benutzerprofil auswählen, welches dann nach dem "Neu laden" der Seite angewendet wird.
Für ein Theme kann man viele verschiedene Styling-Einstellungen machen. In der Sektion Variablen kann man viele Standardfarben und auch die Elementabstände anpassen.
Standardfarben sind:
| Name | Verwendung (Auswahl) |
|---|---|
| Hintergrund | Die Farbe für den Hintergrund beim hover in Listen |
| Text-Farbe | Die Farbe für z.B. den Text in Sektionsüberschriften |
| Primär-Farbe | Die Farbe der Primären Buttons, Ladebalken, uvm. |
| Sekundär-Farbe | Die Sekundärfarbe (deprecated) wird im System nicht mehr verwendet |
| Navigations-Hintergrund | Die Hintergrundfarbe des Linksmenüs |
| Navigations-Border | Die Farbe des Rahmens des Linksmenüs |
| Navigations-Text | Die Textfarbe des Linksmenüs |
| Dunkel-Grau | Die Textfarbe Feldnamen |
| Mittel-Grau | Die Farbe der Fab-Buttons beim hovern |
| Hell-Grau | Die Farbe der Schatten von Eingabefeldern |
| Rot | Die Farbe für Growl-Fehlernachrichten |
| Grün | Die Farbe für Switch-Eingabefelder |
| Blau | Die Farbe für Growl-Infonachrichten |
| Orange | Die Farbe für Growl-Warnungsnachrichten |
Bilder
In der Related list der Sektion Bilder können Bilder hochladen werden, die dann im Benutzerdefinierten CSS verwendet werden können.
Benutzerdefiniertes CSS
In diesem Bereich des Themes kann man die CSS Variablen beliebig anpassen. Verfügbare Variablen werden nicht als autocompletion im CSS Editor angezeigt. Man kann die verfügbaren CSS-Variablen aber in einem der Color Picker ansehen, wenn man den Switch auf "variable" ändert.
Ein Beispiel für das CSS wäre:
:root {
--dialogBg: #FF0000;
--sectionBg: rgba(0, 0, 0, 0.2);
--background: var(--sectionBg);
/* Die Url einer in den Bildern hochgeladenen Datei */
--navigationBg: url('/files/cd1cdf4e-52f4-4b09-a04d-b23e2eb98b9e');
}
Es gibt sehr viele CSS-Variablen, die hier überschrieben werden können, sodass diese hier nicht alle aufgeführt werden können.
Variablen (Auszug)
| Variable | Beschreibung |
|---|---|
| --borderRadius | Der Rahmen-Radius der Sektionen |
| --dialogBg | Hintergrund des Dialogs |
| --dialogBorder | Rahmen des Dialogs |
| --dialogHeaderBg | Hintergrund des Headers im Dialog |
| --growlText | Textfarbe in Benachrichtigungen |
| --headerBg | Hintergrund des Header bereiches |
| --headerText | Farbe des Textes im Bereiches des Headers |
| --inputLabel | Labelfarbe der Eingabefelder |
| --placeholder | Textfarbe des Placeholders |
| --scrollBarBg | Hintergrund der Scrollbar |
| --scrollBarHandleBg | Hintergrundfarbe des Griffs der Scrollbar |
| --scrollBarHandleBgHover | Hintergrundfarbe des Griffs der Scrollbar beim darüber-hovern |
| --scrollBarWidth | Breite der Scrollbar |
| --searchBg | Hintergrund der Global Search |
| --sectionBg | Hintergrund der sections |
| --sectionIcon | Farbe des Sektion Icons |
| --sectionTitleText | Textfarbe der Sektionen |
| --streamLabel | Farbe der Activity Stream Einträge |
| --streamLabelOld | Farbe der Activity Stream Einträge für den alten Wert |
| --tableRowText | Farbe des Textes der Tabellenzeilen |
| --tableRowBg | Hintergrund der Reihen |
| --tableRowOdd | Hintergrund der ungraden Reihen |
| --tableRowEven | Hintergrund der graden Reihen |
| --tableRowHoverBg | Hintergrund der Reihen beim darüber-hovern |
| --tableRowHoverText | Farbe des Textes der Reihen beim darüber-hovern |
| --trayBg | Hintergrund des Trays (Fussleiste) |
| --trayText | Farbe des Trays (Fussleiste) |
| --trayHeight | Höhe des Trays (Fussleiste) |
| --ultraLightGray | Farbe für sehr helles Grau, wird z.B. benutzt als Hintergrund für Inputs |