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
Nächste Überarbeitung Beide Seiten der Revision
software:dashboard:configure_theme [2014/07/22 14:46]
max.neumaier backgorund
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?​nolink&​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;
software/dashboard/configure_theme.txt · Zuletzt geändert: 2021/07/01 09:52 (Externe Bearbeitung)