Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung Nächste Überarbeitung Beide Seiten der Revision | ||
software:dashboard:configure_theme [2014/06/27 09:29] manuel.kindler |
software:dashboard:configure_theme [2014/07/22 14:29] max.neumaier |
||
---|---|---|---|
Zeile 3: | Zeile 3: | ||
Das Dashboard kann optisch in der theme.css Datei angepasst werden. Diese ist auf dem Server im Dashboard-Ordner gespeichert.\\ | Das Dashboard kann optisch in der theme.css Datei angepasst werden. Diese ist auf dem Server im Dashboard-Ordner gespeichert.\\ | ||
Grafiken, wie z.B. das Firmenlogo sind unter dashboard/img hinterlegt.\\ | Grafiken, wie z.B. das Firmenlogo sind unter dashboard/img hinterlegt.\\ | ||
+ | \\ | ||
+ | Es können jederzeit weitere Attribute zu den CSS-Anweisungen hinzugefügt werden. | ||
---- | ---- | ||
Zeile 60: | Zeile 62: | ||
Im Beispielscreenshot wurde das Attribut background-color angepasst.\\ | Im Beispielscreenshot wurde das Attribut background-color angepasst.\\ | ||
{{:software:dashboard:dashboard_background.png?nolink&800|}}\\ | {{:software:dashboard:dashboard_background.png?nolink&800|}}\\ | ||
+ | \\ | ||
+ | Container in welchem Dashboardauswahl sowie die einzelnen Widgets hinterlegt sind (grauer Bereich auf obrigem Beispiel). Hier kann die Hintergrundfarbe sowie die Position angepasst werden: | ||
<code> | <code> | ||
.main-panel { | .main-panel { | ||
Zeile 69: | Zeile 72: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Container in welchem Dashboardauswahl sowie die einzelnen Widgets hinterlegt sind (grauer Bereich auf obrigem Beispiel). Hier kann die Hintergrundfarbe sowie die Position angepasst werden. | ||
__**Navigationsleiste:**__ \\ | __**Navigationsleiste:**__ \\ | ||
Zeile 75: | Zeile 77: | ||
{{:software:dashboard:dashboard_navigation.png?nolink&800|}}\\ | {{:software:dashboard:dashboard_navigation.png?nolink&800|}}\\ | ||
- | Die Navigationsleiste oberhalb kann mit folgenden Anweisungen angepasst werden:\\ | + | Schriftfarbe sowie Schriftgewicht der Menüpunkte "Dashboards", "Layout" und "Widgets hinzufügen".\\ |
<code> | <code> | ||
.main-menu-bar { | .main-menu-bar { | ||
Zeile 82: | Zeile 84: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Schriftfarbe sowie Schriftgewicht der Punkte Dashboards, Layout und Widgets hinzufügen.\\ | ||
+ | Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\ | ||
<code> | <code> | ||
.main-menu-bar .gwt-MenuItem-selected { | .main-menu-bar .gwt-MenuItem-selected { | ||
Zeile 90: | Zeile 92: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\ | ||
+ | Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ | ||
<code> | <code> | ||
.menu-panel { | .menu-panel { | ||
Zeile 103: | Zeile 105: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ | ||
__**Header:**__ \\ | __**Header:**__ \\ | ||
+ | {{:software:dashboard:dashboard_logo.png?nolink&300|}}\\ | ||
Das Logo sowie dessen Position kann hier hier angepasst werden:\\ | Das Logo sowie dessen Position kann hier hier angepasst werden:\\ | ||
Zeile 122: | Zeile 124: | ||
</code>\\ | </code>\\ | ||
- | {{:software:dashboard:dashboard_logo.png?nolink&300|}}\\ | + | |
Die Position des Logoutbuttons, des angemeldeten Benutzers sowie der Sprache kann hier angepasst werden:\\ | Die Position des Logoutbuttons, des angemeldeten Benutzers sowie der Sprache kann hier angepasst werden:\\ | ||
Zeile 138: | Zeile 140: | ||
{{:software:dashboard:dasboard_widget_header.png?nolink&300|}} | {{:software:dashboard:dasboard_widget_header.png?nolink&300|}} | ||
- | Die Header der Widgets sowie deren Beschriftung kann hier angepasst werden:\\ | + | Hier kann die Schriftfarbe, Schriftart, Schriftgröße sowie -gewicht der Kopfzeile des Headers angepasst werden.\\ |
<code> | <code> | ||
.loom-widget-header { | .loom-widget-header { | ||
Zeile 151: | Zeile 152: | ||
}</code>\\ | }</code>\\ | ||
- | Hier kann die Schriftfarbe, Schriftart, Schriftgröße sowie -gewicht der Kopfzeile angepasst werden.\\ | + | Die Hintergrundfarbe sowie die Höhe des Headers kann hier geändert werden.\\ |
<code> | <code> | ||
.loom-widget-header-panel { | .loom-widget-header-panel { | ||
Zeile 159: | Zeile 159: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Die Hintergrundfarbe sowie die Höhe der Kopfzeile kann hier geändert werden.\\ | ||
- | Zusätzlich zum Header kann auch das Widget noch angepasst werden: | + | Hier kann die Hintergrundfarbe sowie der Rahmen der Widgets geändert werden.\\ |
<code> | <code> | ||
.loom-widget { | .loom-widget { | ||
Zeile 169: | Zeile 168: | ||
width: 100%; | width: 100%; | ||
}</code>\\ | }</code>\\ | ||
- | Hier kann die Hintergrundfarbe sowie der Rahmen der Widgets geändert werden.\\ | ||
Zusätzlich kann hier der Bereich angepasst werden, in welchem sich alle Widgets befinden (Hingergrundfarbe, Rahmen sowie Position).\\ | Zusätzlich kann hier der Bereich angepasst werden, in welchem sich alle Widgets befinden (Hingergrundfarbe, Rahmen sowie Position).\\ | ||
Zeile 186: | Zeile 184: | ||
{{:software:dashboard:dashboard_dashboards_tabs.png?nolink&300|}}\\ | {{:software:dashboard:dashboard_dashboards_tabs.png?nolink&300|}}\\ | ||
- | Hier wird unterschieden ob ein Tab ausgewählt ist, nicht ausgewählt ist, oder ob man den Mauszeiger darauf hat. \\ | ||
+ | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\ | ||
<code> | <code> | ||
.tab { | .tab { | ||
Zeile 198: | Zeile 196: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\ | ||
+ | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\ | ||
<code> | <code> | ||
.selected-tab { | .selected-tab { | ||
Zeile 210: | Zeile 208: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\ | ||
+ | Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\ | ||
<code> | <code> | ||
.tab:hover { | .tab:hover { | ||
Zeile 217: | Zeile 215: | ||
} | } | ||
</code>\\ | </code>\\ | ||
- | Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\ | + | |
__**Dashboards Settings:**__ \\ | __**Dashboards Settings:**__ \\ | ||
+ | Wird hier etwas geändert, greifen diese Änderungen auf den Einstellungen für Dashboards, Widgets und Variablen. \\ | ||
+ | {{:software:dashboard:dashboard_dashboarduebersicht.png?nolink&600|}}\\ | ||
+ | |||
+ | |||
+ | |||
+ | Hier kann der Hintergrund, der Rahmen sowie die Position des Containers geändert werden in welchem sich die verschiedenen Dashboards zur Konfiguration befinden.\\ | ||
+ | <code> | ||
+ | .manage-dashboards-list-panel { | ||
+ | background-color: #ffffff; | ||
+ | border: 1px solid #808080; | ||
+ | border-radius: 10px; | ||
+ | margin-right: 5px; | ||
+ | overflow: hidden; | ||
+ | padding: 10px; | ||
+ | position: relative; | ||
+ | } | ||
+ | </code>\\ | ||
+ | |||
+ | |||
+ | Hier kann die Formatierung des Schriftzugs "Meine Dashboards" geändert werden.\\ | ||
+ | <code> | ||
+ | .config-panel-heading { | ||
+ | color: #808080; | ||
+ | font-family: Arial Unicode MS,Arial,sans-serif; | ||
+ | font-size: 25px; | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | </code>\\ | ||
+ | |||
+ | ===Tabellen Widget=== | ||
+ | ==Farbe der Tabellenzeilen bei überfahren== | ||
+ | Sollen die Zeilen der Tabelle eine andere Farben erhalten sobald mit der Maus über diese gefahren wird, so kann dieser Selektor benutzt werden um dies zu beeinflussen: | ||
+ | <code css> | ||
+ | .GK40RFKDKD:hover,.GK40RFKDKE:hover{ | ||
+ | background: green; | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | |||
+ | {{ :software:dashboard:table_hover.png }} | ||
+ | |||
+ | ==Farben der verschiedenen Zeilenfarben== | ||
+ | |||
+ | Sollen die Zeilen, welche standardmäßig alternierend gefärbt sind, mit anderen Farben angepasst werden so müssen diese beiden Befehle eingefügt werden: | ||
+ | |||
+ | <code css> | ||
+ | <code css> | ||
+ | .GK40RFKDKD{ | ||
+ | background: green; | ||
+ | } | ||
+ | .GK40RFKDKE{ | ||
+ | background: red; | ||
+ | } | ||
+ | |||
+ | |||
+ | </code> | ||
+ | |||
- | {{:software:dashboard:dashboard_dashboarduebersicht.png?nolink&600|}} |