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/07/22 14:14] max.neumaier |
software:dashboard:configure_theme [2014/07/22 14:49] max.neumaier |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | **Dashboard optisch anpassen**\\ | + | ====Dashboard optisch anpassen====\\ |
\\ | \\ | ||
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.\\ | ||
Zeile 8: | Zeile 8: | ||
---- | ---- | ||
- | __**Login:**__ \\ | + | ===Login:=== |
- | {{:software:dashboard:dashboard_theme_login.png?nolink&300|}}\\ | + | {{ :software:dashboard:dashboard_theme_login.png?300 }} |
Hintergrundfarbe, Rahmen sowie Position des Loginfensters können hier angepasst werden:\\ | Hintergrundfarbe, Rahmen sowie Position des Loginfensters können hier angepasst werden:\\ | ||
- | <code>.login-panel { | + | <code css>.login-panel { |
background-color: #ffffff; | background-color: #ffffff; | ||
border-color: #91c81f; | border-color: #91c81f; | ||
Zeile 25: | Zeile 25: | ||
\\ | \\ | ||
Das Logo, dessen Größe sowie Position können hier angepasst werden:\\ | Das Logo, dessen Größe sowie Position können hier angepasst werden:\\ | ||
- | <code>.login-panel-panel-for-image { | + | <code css>.login-panel-panel-for-image { |
background-image: url("img/logo-login.png"); | background-image: url("img/logo-login.png"); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
Zeile 34: | Zeile 34: | ||
\\ | \\ | ||
Die Schriftfarbe, die Schriftart und die Schriftgröße können hier angepasst werden:\\ | Die Schriftfarbe, die Schriftart und die Schriftgröße können hier angepasst werden:\\ | ||
- | <code>.login-panel-panel-for-text { | + | <code css>.login-panel-panel-for-text { |
color: #00267f; | color: #00267f; | ||
float: left; | float: left; | ||
Zeile 45: | Zeile 45: | ||
}</code>\\ | }</code>\\ | ||
- | __**Hintergrund:**__ \\ | + | ===Hintergrund:=== \\ |
Der Hintergrund kann hier angepasst werden:\\ | Der Hintergrund kann hier angepasst werden:\\ | ||
- | <code>.main-outer { | + | <code css>.main-outer { |
width: 100%; | width: 100%; | ||
float: left; | float: left; | ||
Zeile 61: | Zeile 61: | ||
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: | 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 css> |
.main-panel { | .main-panel { | ||
background-color: #f0f0f0; | background-color: #f0f0f0; | ||
Zeile 73: | Zeile 73: | ||
</code>\\ | </code>\\ | ||
- | __**Navigationsleiste:**__ \\ | + | ===Navigationsleiste:=== \\ |
- | {{:software:dashboard:dashboard_navigation.png?nolink&800|}}\\ | + | {{ :software:dashboard:dashboard_navigation.png?nolink&800| }}\\ |
Schriftfarbe sowie Schriftgewicht der Menüpunkte "Dashboards", "Layout" und "Widgets hinzufügen".\\ | Schriftfarbe sowie Schriftgewicht der Menüpunkte "Dashboards", "Layout" und "Widgets hinzufügen".\\ | ||
- | <code> | + | <code css> |
.main-menu-bar { | .main-menu-bar { | ||
color: #808080; | color: #808080; | ||
Zeile 86: | Zeile 86: | ||
Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\ | Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\ | ||
- | <code> | + | <code css> |
.main-menu-bar .gwt-MenuItem-selected { | .main-menu-bar .gwt-MenuItem-selected { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Zeile 94: | Zeile 94: | ||
Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ | Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ | ||
- | <code> | + | <code css> |
.menu-panel { | .menu-panel { | ||
background-color: #f0f0f0; | background-color: #f0f0f0; | ||
Zeile 107: | Zeile 107: | ||
- | __**Header:**__ \\ | + | ===Header:=== \\ |
- | {{:software:dashboard:dashboard_logo.png?nolink&300|}}\\ | + | {{ :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:\\ | ||
- | <code> | + | <code css> |
.dashboard-view .header-panel { | .dashboard-view .header-panel { | ||
background-image: url("img/default/logo.png"); | background-image: url("img/default/logo.png"); | ||
Zeile 128: | Zeile 128: | ||
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:\\ | ||
- | <code> | + | <code css> |
.dashboard-view .header-panel .wrapper-in-head { | .dashboard-view .header-panel .wrapper-in-head { | ||
float: right; | float: right; | ||
Zeile 136: | Zeile 136: | ||
</code>\\ | </code>\\ | ||
- | __**Widgets:**__ \\ | + | ===Widgets:=== \\ |
- | {{:software:dashboard:dasboard_widget_header.png?nolink&300|}} | + | {{ :software:dashboard:dasboard_widget_header.png?nolink&300| }} |
Hier kann die Schriftfarbe, Schriftart, Schriftgröße sowie -gewicht der Kopfzeile des Headers angepasst werden.\\ | Hier kann die Schriftfarbe, Schriftart, Schriftgröße sowie -gewicht der Kopfzeile des Headers angepasst werden.\\ | ||
- | <code> | + | <code css> |
.loom-widget-header { | .loom-widget-header { | ||
color: #ffffff; | color: #ffffff; | ||
Zeile 153: | Zeile 153: | ||
Die Hintergrundfarbe sowie die Höhe des Headers kann hier geändert werden.\\ | Die Hintergrundfarbe sowie die Höhe des Headers kann hier geändert werden.\\ | ||
- | <code> | + | <code css> |
.loom-widget-header-panel { | .loom-widget-header-panel { | ||
background-color: #808080; | background-color: #808080; | ||
Zeile 161: | Zeile 161: | ||
Hier kann die Hintergrundfarbe sowie der Rahmen der Widgets geändert werden.\\ | Hier kann die Hintergrundfarbe sowie der Rahmen der Widgets geändert werden.\\ | ||
- | <code> | + | <code css> |
.loom-widget { | .loom-widget { | ||
background-color: #e6e3df; | background-color: #e6e3df; | ||
Zeile 170: | Zeile 170: | ||
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).\\ | ||
- | <code> | + | <code css> |
.layout-control { | .layout-control { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Zeile 180: | Zeile 180: | ||
- | __**Dashboards Navigation:**__ \\ | + | ===Dashboards Navigation=== \\ |
- | {{:software:dashboard:dashboard_dashboards_tabs.png?nolink&300|}}\\ | + | {{ :software:dashboard:dashboard_dashboards_tabs.png?nolink&300| }}\\ |
Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\ | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\ | ||
- | <code> | + | <code css> |
.tab { | .tab { | ||
background-color: #f0f0f0; | background-color: #f0f0f0; | ||
Zeile 198: | Zeile 198: | ||
Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\ | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\ | ||
- | <code> | + | <code css> |
.selected-tab { | .selected-tab { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Zeile 210: | Zeile 210: | ||
Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\ | Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\ | ||
- | <code> | + | <code css> |
.tab:hover { | .tab:hover { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Zeile 217: | Zeile 217: | ||
- | __**Dashboards Settings:**__ \\ | + | ===Dashboards Settings===\\ |
Wird hier etwas geändert, greifen diese Änderungen auf den Einstellungen für Dashboards, Widgets und Variablen. \\ | Wird hier etwas geändert, greifen diese Änderungen auf den Einstellungen für Dashboards, Widgets und Variablen. \\ | ||
- | {{:software:dashboard:dashboard_dashboarduebersicht.png?nolink&600|}}\\ | + | {{ :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.\\ | Hier kann der Hintergrund, der Rahmen sowie die Position des Containers geändert werden in welchem sich die verschiedenen Dashboards zur Konfiguration befinden.\\ | ||
- | <code> | + | <code css> |
.manage-dashboards-list-panel { | .manage-dashboards-list-panel { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Zeile 238: | Zeile 238: | ||
Hier kann die Formatierung des Schriftzugs "Meine Dashboards" geändert werden.\\ | Hier kann die Formatierung des Schriftzugs "Meine Dashboards" geändert werden.\\ | ||
- | <code> | + | <code css> |
.config-panel-heading { | .config-panel-heading { | ||
color: #808080; | color: #808080; | ||
Zeile 247: | Zeile 247: | ||
</code>\\ | </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> | ||
+ | .GK40RFKDKD{ | ||
+ | background: green; | ||
+ | } | ||
+ | .GK40RFKDKE{ | ||
+ | background: red; | ||
+ | } | ||
+ | |||
+ | |||
+ | </code> | ||
+ | {{ software:dashboard:table_line_color.png }} | ||
+ | |||
+ | ==Zeilenfarbe bei Markieren== | ||
+ | |||
+ | Der Befehl um die Zeilenfarbe zu ändern, sobald eine Zeile angeklickt und damit ausgewählt wurde, lautet wie folgt: | ||
+ | |||
+ | |||
+ | <code css> | ||
+ | .GK40RFKDEE{ | ||
+ | background:red; | ||
+ | } | ||
+ | |||
+ | </code> | ||
- | <h1>TabellenWidget</h1> | + | {{ software:dashboard:table_line_click.png }} |