Theme Konfiguration

1 Anpassung der Armaturenbrettoptik
- 1.1 Einloggen
  - 1.1.1 Hintergrundfarbe, Rahmen und Positionen
  - 1.1.2 Logo
  - 1.1.3 Schriftart
- 1.2 Hintergrund
  - 1.2.1 Der allgemeine Hintergrund
  - 1.2.2 Container
- 1.3 Die Navigationsleiste
- 1.4 Kopfball
  - 1.4.1 Logo
  - 1.4.2 Die Schaltfläche "Abmelden"
- 1.5 Widgets
  - 1.5.1 Kopfball
  - 1.5.2 Der Hintergrund und die Höhe der Kopfzeile
  - 1.5.3 Hintergrund und Rahmen der Widgets
  - 1.5.4 Bereich, der alle Widgets umfasst
- 1.6 Widget für Tabellen
  - 1.6.1 Ändern der Zeilenfarbe in Abhängigkeit von der Mausposition
  - 1.6.2 Ändern der Farben ausgewählter Zeilen
- 1.7 Dashboards Navigation
  - 1.7.1 Auswahl eines Dashboards
- 1.8 Dashboard-Einstellungen
  - 1.8.1 Container für Konfiguration
  - 1.8.2 Mein Dashboard

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:

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:

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:

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:

Kopfball

Logo

Das Logo und seine Position können mit diesem Eintrag angepasst werden:

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:

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:

Der Hintergrund und die Höhe der Kopfzeile

Die Farbe des Hintergrunds, sowie die Höhe des Headers, können hier geändert werden:

Hintergrund und Rahmen der Widgets

Die Farbe des Hintergrunds und der Rahmen einzelner Widgets kann folgendermaßen angepasst werden:

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

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:

Ändern der Farben ausgewählter Zeilen

Der Befehl zum Ändern der Farbe von Zeilen während ihrer Auswahl kann folgendermaßen eingegeben werden:

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:

Die Farbvorgabe des Hintergrunds und der Schriftart, sowie die Position ausgewählter Dashboards, kann wiederum wie folgt durchgeführt werden:

Die Farbe des Hintergrunds beim Bewegen der Maus über das Dashboard kann anhand dieses Eintrags ermittelt werden:

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:

Mein Dashboard

Über diesen Eintrag kann die Formatierung des Schriftzugs "Meine Dashboards" angepasst werden: