Benutzer-Werkzeuge

Webseiten-Werkzeuge


Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
software:dashboard:configure_theme

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
software:dashboard:configure_theme [2014/07/22 14:51]
max.neumaier
software:dashboard:configure_theme [2021/07/01 09:52] (aktuell)
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. Es können jederzeit weitere Attribute zu den CSS-Anweisungen hinzugefügt werden.
  
-----+
  
 ===Login=== ===Login===
  
 {{ :​software:​dashboard:​dashboard_theme_login.png?​300 }} {{ :​software:​dashboard:​dashboard_theme_login.png?​300 }}
 +
 +==Hintergrundfarbe,​ Rahmen, Position==
  
 Hintergrundfarbe,​ Rahmen sowie Position des Loginfensters können hier angepasst werden:\\ Hintergrundfarbe,​ Rahmen sowie Position des Loginfensters können hier angepasst werden:\\
Zeile 23: Zeile 25:
     width: 360px;     width: 360px;
 }</​code>​ }</​code>​
-\\+ 
 +==Logo==
 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 css>​.login-panel-panel-for-image { <code css>​.login-panel-panel-for-image {
Zeile 32: Zeile 35:
     width: 151px;     width: 151px;
 }</​code>​ }</​code>​
-\\+ 
 +==Schrift==
 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 css>​.login-panel-panel-for-text { <code css>​.login-panel-panel-for-text {
Zeile 45: Zeile 49:
 }</​code>​\\ }</​code>​\\
  
-===Hintergrund:===+===Hintergrund===
  
 +==Allgemeiner Hintergrund==
 Der Hintergrund kann hier angepasst werden:\\ Der Hintergrund kann hier angepasst werden:\\
  
Zeile 63: Zeile 68:
 {{ :​software:​dashboard:​dashboard_background.png?​800 }} {{ :​software:​dashboard:​dashboard_background.png?​800 }}
 \\ \\
 +==Container==
 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 css> <code css>
Zeile 77: Zeile 83:
 {{ :​software:​dashboard:​dashboard_navigation.png?​800 }} {{ :​software:​dashboard:​dashboard_navigation.png?​800 }}
  
 +==Schrift Menüpunkte==
 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 css> <code css>
Zeile 84: Zeile 91:
 } }
 </​code>​\\ </​code>​\\
 +==Schrift- und Hintergrundfarbe beim Überfahren==
 Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\ Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\
 <code css> <code css>
Zeile 92: Zeile 99:
 } }
 </​code>​\\ </​code>​\\
 +==Allgemein Navigationsleiste==
 Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\
 <code css> <code css>
Zeile 109: Zeile 116:
 ===Header=== ​ ===Header=== ​
 {{ :​software:​dashboard:​dashboard_logo.png?​300 }} {{ :​software:​dashboard:​dashboard_logo.png?​300 }}
 +==Logo==
 Das Logo sowie dessen Position kann hier hier angepasst werden:\\ Das Logo sowie dessen Position kann hier hier angepasst werden:\\
  
Zeile 125: Zeile 132:
  
  
 +==Logoutbutton==
 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 139: Zeile 146:
  
 {{ :​software:​dashboard:​dasboard_widget_header.png?​300 }} {{ :​software:​dashboard:​dasboard_widget_header.png?​300 }}
 +==Kopfzeile Header==
 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 css> <code css>
Zeile 151: Zeile 158:
     width: 57%;     width: 57%;
 }</​code>​\\ }</​code>​\\
 +==Hintergrund und Höhe Header==
 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 css> <code css>
Zeile 159: Zeile 166:
 } }
 </​code>​\\ </​code>​\\
 +==Hintergrund und Rahmen der Widgets==
 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 css> <code css>
Zeile 168: Zeile 175:
     width: 100%;     width: 100%;
 }</​code>​\\ }</​code>​\\
 +==Bereich aller Widgets==
 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 css> <code css>
Zeile 176: Zeile 183:
     border-radius:​ 10px;     border-radius:​ 10px;
     margin-right:​ 5px;     margin-right:​ 5px;
 +}
 +</​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>
 +.loom-widget-body tr:hover{
 +    background: green;
 } }
 </​code>​ </​code>​
  
 +
 +{{ :​software:​dashboard:​table_hover.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 !important;
 +}
 +
 +</​code>​
 +
 +{{ software:​dashboard:​table_line_click.png }}
  
 ===Dashboards Navigation=== ===Dashboards Navigation===
Zeile 184: Zeile 216:
 {{ :​software:​dashboard:​dashboard_dashboards_tabs.png?​300 }}\\ {{ :​software:​dashboard:​dashboard_dashboards_tabs.png?​300 }}\\
  
 +==Dashboard Auswahl==
 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 css> <code css>
Zeile 222: Zeile 254:
  
  
 +==Konfigurations Container==
 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 css> <code css>
Zeile 236: Zeile 268:
 </​code>​\\ </​code>​\\
  
 +==Mein Dashboard==
 Hier kann die Formatierung des Schriftzugs "Meine Dashboards"​ geändert werden.\\ Hier kann die Formatierung des Schriftzugs "Meine Dashboards"​ geändert werden.\\
 <code css> <code css>
Zeile 247: Zeile 279:
 </​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>​ 
- 
-{{ software:​dashboard:​table_line_click.png }} 
  
software/dashboard/configure_theme.1406033517.txt.gz · Zuletzt geändert: 2021/07/01 10:00 (Externe Bearbeitung)