Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- software:dashboard:configure_theme [2014/06/27 09:53]
martin.oehm
+++ 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.\\
 Grafiken, wie z.B. das Firmenlogo sind unter dashboard/img hinterlegt.\\
+\\
+Es können jederzeit weitere Attribute zu den CSS-Anweisungen hinzugefügt werden.
 ----
-__**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:\\
-<code>.login-panel {
+<code css>.login-panel {
     background-color: #ffffff;
     border-color: #91c81f;
@@ Zeile 23: / Zeile 25: @@
 \\
 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-repeat: no-repeat;
@@ Zeile 32: / Zeile 34: @@
 \\
 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;
     float: left;
@@ Zeile 43: / Zeile 45: @@
 }</code>\\
-__**Hintergrund:**__ \\
+===Hintergrund:=== \\
 Der Hintergrund kann hier angepasst werden:\\
-<code>.main-outer {
+<code css>.main-outer {
 	width: 100%;
 	float: left;
@@ Zeile 59: / Zeile 61: @@
 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 css>
 .main-panel {
     background-color: #f0f0f0;
@@ Zeile 71: / Zeile 73: @@
 </code>\\
-__**Navigationsleiste:**__ \\
+===Navigationsleiste:=== \\
-{{: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 css>
 .main-menu-bar {
     color: #808080;
@@ Zeile 82: / Zeile 84: @@
 }
 </code>\\
-Schriftfarbe sowie Schriftgewicht der Menüpunkte "Dashboards", "Layout" und "Widgets hinzufügen".\\
-<code>
+Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\
+<code css>
 .main-menu-bar .gwt-MenuItem-selected {
     background-color: #ffffff;
@@ Zeile 90: / Zeile 92: @@
 }
 </code>\\
-Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\
-<code>
+Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\
+<code css>
 .menu-panel {
     background-color: #f0f0f0;
@@ Zeile 103: / Zeile 105: @@
 }
 </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:\\
-<code>
+<code css>
 .dashboard-view .header-panel {
     background-image: url("img/default/logo.png");
@@ Zeile 122: / Zeile 124: @@
 </code>\\
-{{:software:dashboard:dashboard_logo.png?nolink&300|}}\\
 Die Position des Logoutbuttons, des angemeldeten Benutzers sowie der Sprache kann hier angepasst werden:\\
-<code>
+<code css>
 .dashboard-view .header-panel .wrapper-in-head {
     float: right;
@@ Zeile 134: / Zeile 136: @@
 </code>\\
-__**Widgets:**__ \\
+===Widgets:=== \\
-{{: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 css>
-<code>
 .loom-widget-header {
     color: #ffffff;
@@ Zeile 151: / Zeile 152: @@
 }</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 css>
-<code>
 .loom-widget-header-panel {
     background-color: #808080;
@@ Zeile 159: / Zeile 159: @@
 }
 </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 css>
 .loom-widget {
     background-color: #e6e3df;
@@ Zeile 169: / Zeile 168: @@
     width: 100%;
 }</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).\\
-<code>
+<code css>
 .layout-control {
     background-color: #ffffff;
@@ Zeile 182: / Zeile 180: @@
-__**Dashboards Navigation:**__ \\
+===Dashboards Navigation=== \\
-{{: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. \\
-<code>
+Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\
+<code css>
 .tab {
     background-color: #f0f0f0;
@@ Zeile 198: / Zeile 196: @@
 }
 </code>\\
-Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\
-<code>
+Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\
+<code css>
 .selected-tab {
     background-color: #ffffff;
@@ Zeile 210: / Zeile 208: @@
 }
 </code>\\
-Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\
-<code>
+Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\
+<code css>
 .tab:hover {
     background-color: #ffffff;
 }
 </code>\\
-Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\
-__**Dashboards Settings:**__ \\
-{{:software:dashboard:dashboard_dashboarduebersicht.png?nolink&600|}}\\
+===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| }}\\
-Wird hier etwas geändert, greifen diese Änderungen auf den Einstellungen für Dashboards, Widgets und Variablen.
-<code>
+Hier kann der Hintergrund, der Rahmen sowie die Position des Containers geändert werden in welchem sich die verschiedenen Dashboards zur Konfiguration befinden.\\
+<code css>
 .manage-dashboards-list-panel {
     background-color: #ffffff;
@@ Zeile 237: / Zeile 236: @@
 </code>\\
-Hier kann der Hintergrund, der Rahmen sowie die Position des Containers geändert werden in welchem sich die verschiedenen Dashboards zur Konfiguration befinden.\\
-<code>
+Hier kann die Formatierung des Schriftzugs "Meine Dashboards" geändert werden.\\
+<code css>
 .config-panel-heading {
     color: #808080;
@@ Zeile 248: / Zeile 247: @@
 </code>\\
-Hier kann der Schriftzug "Meine Dashboards" geändert werden.
+===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>
+{{ software:dashboard:table_line_click.png }}

TIM Wiki / NEW TIM 6 Documentation

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge