Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
software:dashboard:configure_theme
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
|
software:dashboard:configure_theme [2014/07/22 15:34] max.neumaier |
software:dashboard:configure_theme [2021/07/01 09:52] |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====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=== | ||
| - | |||
| - | {{ :software:dashboard:dashboard_theme_login.png?300 }} | ||
| - | |||
| - | ==Hintergrundfarbe, Rahmen, Position== | ||
| - | |||
| - | Hintergrundfarbe, Rahmen sowie Position des Loginfensters können hier angepasst werden:\\ | ||
| - | |||
| - | <code css>.login-panel { | ||
| - | background-color: #ffffff; | ||
| - | border-color: #91c81f; | ||
| - | border-style: solid; | ||
| - | height: 200px; | ||
| - | margin: 220px auto 0; | ||
| - | padding: 40px; | ||
| - | width: 360px; | ||
| - | }</code> | ||
| - | |||
| - | ==Logo== | ||
| - | Das Logo, dessen Größe sowie Position können hier angepasst werden:\\ | ||
| - | <code css>.login-panel-panel-for-image { | ||
| - | background-image: url("img/logo-login.png"); | ||
| - | background-repeat: no-repeat; | ||
| - | float: right; | ||
| - | height: 39px; | ||
| - | width: 151px; | ||
| - | }</code> | ||
| - | |||
| - | ==Schrift== | ||
| - | Die Schriftfarbe, die Schriftart und die Schriftgröße können hier angepasst werden:\\ | ||
| - | <code css>.login-panel-panel-for-text { | ||
| - | color: #00267f; | ||
| - | float: left; | ||
| - | font-family: Arial,FreeSans,Helvetica,sans-serif; | ||
| - | font-size: 14px; | ||
| - | font-weight: bold; | ||
| - | height: 50px; | ||
| - | padding-bottom: 10px; | ||
| - | width: 204px; | ||
| - | }</code>\\ | ||
| - | |||
| - | ===Hintergrund=== | ||
| - | |||
| - | ==Allgemeiner Hintergrund== | ||
| - | Der Hintergrund kann hier angepasst werden:\\ | ||
| - | |||
| - | <code css>.main-outer { | ||
| - | width: 100%; | ||
| - | float: left; | ||
| - | background-color:#F0F0F0; | ||
| - | position: absolute; | ||
| - | top: 0px; | ||
| - | bottom: 0px; | ||
| - | overflow-y: scroll; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Im Beispielscreenshot wurde das Attribut background-color angepasst.\\ | ||
| - | {{ :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: | ||
| - | <code css> | ||
| - | .main-panel { | ||
| - | background-color: #f0f0f0; | ||
| - | float: left; | ||
| - | margin-top: 10px; | ||
| - | width: 100%; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | ===Navigationsleiste=== | ||
| - | |||
| - | {{ :software:dashboard:dashboard_navigation.png?800 }} | ||
| - | |||
| - | ==Schrift Menüpunkte== | ||
| - | Schriftfarbe sowie Schriftgewicht der Menüpunkte "Dashboards", "Layout" und "Widgets hinzufügen".\\ | ||
| - | <code css> | ||
| - | .main-menu-bar { | ||
| - | color: #808080; | ||
| - | font-weight: bold; | ||
| - | } | ||
| - | </code>\\ | ||
| - | ==Schrift- und Hintergrundfarbe beim Überfahren== | ||
| - | Schrift- und Hintergrundfarbe der einzelnen Punkte beim Überfahren mit der Maus.\\ | ||
| - | <code css> | ||
| - | .main-menu-bar .gwt-MenuItem-selected { | ||
| - | background-color: #ffffff; | ||
| - | color: #808080; | ||
| - | } | ||
| - | </code>\\ | ||
| - | ==Allgemein Navigationsleiste== | ||
| - | Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ | ||
| - | <code css> | ||
| - | .menu-panel { | ||
| - | background-color: #f0f0f0; | ||
| - | border-bottom: 1px solid #c0c0c0; | ||
| - | border-top: 1px solid #c0c0c0; | ||
| - | float: left; | ||
| - | left: 190px; | ||
| - | position: absolute; | ||
| - | top: 16px; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | |||
| - | ===Header=== | ||
| - | {{ :software:dashboard:dashboard_logo.png?300 }} | ||
| - | ==Logo== | ||
| - | Das Logo sowie dessen Position kann hier hier angepasst werden:\\ | ||
| - | |||
| - | <code css> | ||
| - | .dashboard-view .header-panel { | ||
| - | background-image: url("img/default/logo.png"); | ||
| - | background-position: 10px 10px; | ||
| - | background-repeat: no-repeat; | ||
| - | float: right; | ||
| - | height: 65px; | ||
| - | vertical-align: bottom; | ||
| - | width: 100%; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | |||
| - | ==Logoutbutton== | ||
| - | Die Position des Logoutbuttons, des angemeldeten Benutzers sowie der Sprache kann hier angepasst werden:\\ | ||
| - | |||
| - | <code css> | ||
| - | .dashboard-view .header-panel .wrapper-in-head { | ||
| - | float: right; | ||
| - | padding-right: 16px; | ||
| - | padding-top: 19px; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | ===Widgets=== | ||
| - | |||
| - | {{ :software:dashboard:dasboard_widget_header.png?300 }} | ||
| - | ==Kopfzeile Header== | ||
| - | Hier kann die Schriftfarbe, Schriftart, Schriftgröße sowie -gewicht der Kopfzeile des Headers angepasst werden.\\ | ||
| - | <code css> | ||
| - | .loom-widget-header { | ||
| - | color: #ffffff; | ||
| - | float: left; | ||
| - | font-family: Arial,FreeSans,Helvetica,sans-serif; | ||
| - | font-weight: bold; | ||
| - | height: 25px; | ||
| - | padding: 6px 0 0 8px; | ||
| - | width: 57%; | ||
| - | }</code>\\ | ||
| - | ==Hintergrund und Höhe Header== | ||
| - | Die Hintergrundfarbe sowie die Höhe des Headers kann hier geändert werden.\\ | ||
| - | <code css> | ||
| - | .loom-widget-header-panel { | ||
| - | background-color: #808080; | ||
| - | height: 30px; | ||
| - | } | ||
| - | </code>\\ | ||
| - | ==Hintergrund und Rahmen der Widgets== | ||
| - | Hier kann die Hintergrundfarbe sowie der Rahmen der Widgets geändert werden.\\ | ||
| - | <code css> | ||
| - | .loom-widget { | ||
| - | background-color: #e6e3df; | ||
| - | border: 1px solid #808080; | ||
| - | float: left; | ||
| - | width: 100%; | ||
| - | }</code>\\ | ||
| - | ==Bereich aller Widgets== | ||
| - | Zusätzlich kann hier der Bereich angepasst werden, in welchem sich alle Widgets befinden (Hingergrundfarbe, Rahmen sowie Position).\\ | ||
| - | <code css> | ||
| - | .layout-control { | ||
| - | background-color: #ffffff; | ||
| - | border: 1px solid #808080; | ||
| - | border-radius: 10px; | ||
| - | margin-right: 5px; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===Dashboards Navigation=== | ||
| - | |||
| - | {{ :software:dashboard:dashboard_dashboards_tabs.png?300 }}\\ | ||
| - | |||
| - | ==Dashboard Auswahl== | ||
| - | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\ | ||
| - | <code css> | ||
| - | .tab { | ||
| - | background-color: #f0f0f0; | ||
| - | color: #808080; | ||
| - | cursor: pointer; | ||
| - | margin-left: 10px; | ||
| - | margin-right: 10px; | ||
| - | padding: 5px 10px; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\ | ||
| - | <code css> | ||
| - | .selected-tab { | ||
| - | background-color: #ffffff; | ||
| - | border: 1px solid #c0c0c0; | ||
| - | color: #808080; | ||
| - | margin-left: 10px; | ||
| - | margin-right: 10px; | ||
| - | padding: 5px 10px; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\ | ||
| - | <code css> | ||
| - | .tab:hover { | ||
| - | background-color: #ffffff; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | |||
| - | ===Dashboards Settings=== | ||
| - | Wird hier etwas geändert, greifen diese Änderungen auf den Einstellungen für Dashboards, Widgets und Variablen. \\ | ||
| - | {{ :software:dashboard:dashboard_dashboarduebersicht.png?300 }}\\ | ||
| - | |||
| - | |||
| - | ==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.\\ | ||
| - | <code css> | ||
| - | .manage-dashboards-list-panel { | ||
| - | background-color: #ffffff; | ||
| - | border: 1px solid #808080; | ||
| - | border-radius: 10px; | ||
| - | margin-right: 5px; | ||
| - | overflow: hidden; | ||
| - | padding: 10px; | ||
| - | position: relative; | ||
| - | } | ||
| - | </code>\\ | ||
| - | |||
| - | ==Mein Dashboard== | ||
| - | Hier kann die Formatierung des Schriftzugs "Meine Dashboards" geändert werden.\\ | ||
| - | <code css> | ||
| - | .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> | ||
| - | .loom-widget-body tr:hover{ | ||
| - | background: green; | ||
| - | } | ||
| - | </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 }} | ||
software/dashboard/configure_theme.txt · Zuletzt geändert: 2021/07/01 09:52 (Externe Bearbeitung)
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: 2013 T!M Solutions GmbH
