Table of Contents |
---|
...
Anpassung der Armaturenbrettoptik
In diesem Kapitel kann der Benutzer das Aussehen des Dashboards ändern, indem er die Theme.css Datei bearbeitet. Diese Datei wird auf dem Server im Ordner Dashboard gespeichert. Grafische Elemente, z.B. das Logo eines Unternehmens, werden im Verzeichnis dashboard/img gespeichert. Zusätzliche Funktionen können jederzeit zu den CSS-Anweisungen hinzugefügt werden.
...
Einloggen
...
Hintergrundfarbe, Rahmen und Positionen
Die Farbe des Hintergrunds und des Rahmens sowie die Position des Anmeldefensters können über folgenden Eintrag angepasst werden:
Code Block | ||
---|---|---|
| ||
.login-panel { background-color: #ffffff; border-color: #91c81f; border-style: solid; height: 200px; margin: 220px auto 0; padding: 40px; width: 360px; } |
Logo
Das Logo selbst sowie seine Größe und Position können über diesen Eintrag angepasst werden:
Code Block | ||
---|---|---|
| ||
.login-panel-panel-for-image { background-image: url("img/logo-login.png"); background-repeat: no-repeat; float: right; height: 39px; width: 151px; } |
Schriftart
Die Farbe und der Stil sowie die Größe der Schrift können über diesen Eintrag angepasst werden:
Code Block | ||
---|---|---|
| ||
.login-panel-panel-for-text { color: #00267f; float: left; font-family: Arial,FreeSans,Helvetica,sans-serif; font-size: 14px; font-weight: bold; height: 50px; padding-bottom: 10px; width: 204px; } |
...
Hintergrund
Der allgemeine Hintergrund
Der Hintergrund kann über diesen Eintrag geändert werden:
...
Im folgenden Screenshot wurde beispielsweise das Attribut der Hintergrundfarbe geändert.
...
Container
Die Einstellungen für das Dashboard und die einzelnen Widgets werden im Container gespeichert (der grau eingefärbte Bereich im obigen Beispiel). Die Farbe des Hintergrunds sowie seine Position können mit diesem Eintrag angepasst werden:
Code Block | ||
---|---|---|
| ||
.main-panel { background-color: #f0f0f0; float: left; margin-top: 10px; width: 100%; } |
...
Die Navigationsleiste
Die Schriftart des Menüelements
Die Schriftfarbe und -stärke der Elemente im Menü "Dashboards" und "Layout" sowie "Widgets hinzufügen" können in diesem Beitrag geändert werden:
Code Block | ||
---|---|---|
| ||
.main-menu-bar { color: #808080; font-weight: bold; } |
Schriftart und Hintergrundfarbe beim Bewegen der Maus
Die Schriftart und die Hintergrundfarbe beim Bewegen der Maus über einzelne Menüpunkte können folgendermaßen geändert werden:
Code Block | ||
---|---|---|
| ||
.main-menu-bar .gwt-MenuItem-selected { background-color: #ffffff; color: #808080; } |
Die Navigationsleiste im Allgemeinen
Einstellungen bezüglich der Farbe des Rahmens und des Hintergrunds sowie der Position der gesamten Navigationsleiste können hier angepasst werden:
Code Block | ||
---|---|---|
| ||
.menu-panel { background-color: #f0f0f0; border-bottom: 1px solid #c0c0c0; border-top: 1px solid #c0c0c0; float: left; left: 190px; position: absolute; top: 16px; } |
...
Kopfball
Logo
Das Logo und seine Position können mit diesem Eintrag angepasst werden:
Code Block | ||
---|---|---|
| ||
.dashboard-view .header-panel { background-image: url("img/default/logo.png"); background-position: 10px 10px; background-repeat: no-repeat; float: right; height: 65px; vertical-align: bottom; width: 100%; } |
Die Schaltfläche "Abmelden"
Hier können verschiedene Einstellungen, wie z.B. die Position des Buttons zum Abmelden und des angemeldeten Benutzers sowie die Spracheinstellungen, geändert werden:
Code Block | ||
---|---|---|
| ||
.dashboard-view .header-panel .wrapper-in-head { float: right; padding-right: 16px; padding-top: 19px; } |
...
Widgets
Kopfball
Durch den Zugriff auf den folgenden Eintrag können die Farbe, der Schriftstil, die Schriftgröße und die in der Kopfzeile verwendete Schriftstärke geändert werden:
Code Block | ||
---|---|---|
| ||
.loom-widget-header { color: #ffffff; float: left; font-family: Arial,FreeSans,Helvetica,sans-serif; font-weight: bold; height: 25px; padding: 6px 0 0 8px; width: 57%; } |
Der Hintergrund und die Höhe der Kopfzeile
Die Farbe des Hintergrunds, sowie die Höhe des Headers, können hier geändert werden:
Code Block | ||
---|---|---|
| ||
.loom-widget-header-panel { background-color: #808080; height: 30px; } |
Hintergrund und Rahmen der Widgets
Die Farbe des Hintergrunds und der Rahmen einzelner Widgets kann folgendermaßen angepasst werden:
Code Block | ||
---|---|---|
| ||
.loom-widget { background-color: #e6e3df; border: 1px solid #808080; float: left; width: 100%; } |
Bereich, der alle Widgets umfasst
Darüber hinaus kann der Bereich, in dem Widgets angezeigt werden sollen, bearbeitet werden (d.h. die Farbe des Hintergrunds und der Rahmen sowie die Position):
Code Block | ||
---|---|---|
| ||
.layout-control { background-color: #ffffff; border: 1px solid #808080; border-radius: 10px; margin-right: 5px; } |
...
Widget für Tabellen
Ändern der Zeilenfarbe in Abhängigkeit von der Mausposition
Dieser Selektor kann verwendet werden, um eine andere Farbe für die Zeilen einer Tabelle festzulegen, wenn die Maus über die Tabelle bewegt wird:
Code Block | ||
---|---|---|
| ||
.loom-widget-body tr:hover{ background: green; } |
Ändern der Farben ausgewählter Zeilen
Der Befehl zum Ändern der Farbe von Zeilen während ihrer Auswahl kann folgendermaßen eingegeben werden:
Code Block | ||
---|---|---|
| ||
.GK40RFKDEE { background:red !important; } |
...
Dashboards Navigation
...
Auswahl eines Dashboards
Die Anpassung der Hintergrund- und Schriftfarbe, sowie der Position von nicht ausgewählten Dashboards, kann über diesen Eintrag vorgenommen werden:
...
Code Block | ||
---|---|---|
| ||
.tab:hover { background-color: #ffffff; } |
...
Dashboard-Einstellungen
Wenn hier Änderungen auftreten, haben die Änderungen direkte Auswirkungen auf Dashboards, Widgets und Variablen:
...
Container für Konfiguration
Mit diesem Eintrag können die Farbe des Hintergrunds und des Rahmens sowie die Position des Containers für die Konfiguration verschiedener Dashboards angeordnet werden:
Code Block | ||
---|---|---|
| ||
.manage-dashboards-list-panel { background-color: #ffffff; border: 1px solid #808080; border-radius: 10px; margin-right: 5px; overflow: hidden; padding: 10px; position: relative; } |
Mein Dashboard
Über diesen Eintrag kann die Formatierung des Schriftzugs "Meine Dashboards" angepasst werden:
...