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.
Die Farbe des Hintergrunds und des Rahmens sowie die Position des Anmeldefensters können über folgenden Eintrag angepasst werden:
.login-panel { background-color: #ffffff; border-color: #91c81f; border-style: solid; height: 200px; margin: 220px auto 0; padding: 40px; width: 360px; } |
Das Logo selbst sowie seine Größe und Position können über diesen Eintrag angepasst werden:
.login-panel-panel-for-image { background-image: url("img/logo-login.png"); background-repeat: no-repeat; float: right; height: 39px; width: 151px; } |
Die Farbe und der Stil sowie die Größe der Schrift können über diesen Eintrag angepasst werden:
.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; } |
Der Hintergrund kann über diesen Eintrag geändert werden:
.main-outer { width: 100%; float: left; background-color:#F0F0F0; position: absolute; top: 0px; bottom: 0px; overflow-y: scroll; } |
Im folgenden Screenshot wurde beispielsweise das Attribut der Hintergrundfarbe geändert.
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:
.main-panel { background-color: #f0f0f0; float: left; margin-top: 10px; width: 100%; } |
Die Schriftfarbe und -stärke der Elemente im Menü "Dashboards" und "Layout" sowie "Widgets hinzufügen" können in diesem Beitrag geändert werden:
.main-menu-bar { color: #808080; font-weight: bold; } |
Die Schriftart und die Hintergrundfarbe beim Bewegen der Maus über einzelne Menüpunkte können folgendermaßen geändert werden:
.main-menu-bar .gwt-MenuItem-selected { background-color: #ffffff; color: #808080; } |
Einstellungen bezüglich der Farbe des Rahmens und des Hintergrunds sowie der Position der gesamten Navigationsleiste können hier angepasst werden:
.menu-panel { background-color: #f0f0f0; border-bottom: 1px solid #c0c0c0; border-top: 1px solid #c0c0c0; float: left; left: 190px; position: absolute; top: 16px; } |
Das Logo und seine Position können mit diesem Eintrag angepasst werden:
.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%; } |
Hier können verschiedene Einstellungen, wie z.B. die Position des Buttons zum Abmelden und des angemeldeten Benutzers sowie die Spracheinstellungen, geändert werden:
.dashboard-view .header-panel .wrapper-in-head { float: right; padding-right: 16px; padding-top: 19px; } |
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:
.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%; } |
Die Farbe des Hintergrunds, sowie die Höhe des Headers, können hier geändert werden:
.loom-widget-header-panel { background-color: #808080; height: 30px; } |
Die Farbe des Hintergrunds und der Rahmen einzelner Widgets kann folgendermaßen angepasst werden:
.loom-widget { background-color: #e6e3df; border: 1px solid #808080; float: left; width: 100%; } |
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):
.layout-control { background-color: #ffffff; border: 1px solid #808080; border-radius: 10px; margin-right: 5px; } |
Dieser Selektor kann verwendet werden, um eine andere Farbe für die Zeilen einer Tabelle festzulegen, wenn die Maus über die Tabelle bewegt wird:
.loom-widget-body tr:hover{ background: green; } |
Der Befehl zum Ändern der Farbe von Zeilen während ihrer Auswahl kann folgendermaßen eingegeben werden:
.GK40RFKDEE { background:red !important; } |
Die Anpassung der Hintergrund- und Schriftfarbe, sowie der Position von nicht ausgewählten Dashboards, kann über diesen Eintrag vorgenommen werden:
.tab { background-color: #f0f0f0; color: #808080; cursor: pointer; margin-left: 10px; margin-right: 10px; padding: 5px 10px; } |
Die Farbvorgabe des Hintergrunds und der Schriftart, sowie die Position ausgewählter Dashboards, kann wiederum wie folgt durchgeführt werden:
.selected-tab { background-color: #ffffff; border: 1px solid #c0c0c0; color: #808080; margin-left: 10px; margin-right: 10px; padding: 5px 10px; } |
Die Farbe des Hintergrunds beim Bewegen der Maus über das Dashboard kann anhand dieses Eintrags ermittelt werden:
.tab:hover { background-color: #ffffff; } |
Wenn hier Änderungen auftreten, haben die Änderungen direkte Auswirkungen auf Dashboards, Widgets und Variablen:
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:
.manage-dashboards-list-panel { background-color: #ffffff; border: 1px solid #808080; border-radius: 10px; margin-right: 5px; overflow: hidden; padding: 10px; position: relative; } |
Über diesen Eintrag kann die Formatierung des Schriftzugs "Meine Dashboards" angepasst werden:
.config-panel-heading { color: #808080; font-family: Arial Unicode MS,Arial,sans-serif; font-size: 25px; padding-bottom: 20px; } |