Page Comparison

...

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:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.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:

.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):

.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:

.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:

.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:

...

.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:

.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:

...