Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
en:software:dashboard:configure_theme
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:software:dashboard:configure_theme [2014/12/02 10:59] felix.studnitz created |
en:software:dashboard:configure_theme [2021/07/01 09:52] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| FIXME **This page is not fully translated, yet. Please help completing the translation.**\\ //(remove this paragraph once the translation is finished)// | FIXME **This page is not fully translated, yet. Please help completing the translation.**\\ //(remove this paragraph once the translation is finished)// | ||
| - | ====Optical adaption of the Dashboard==== | + | ====Adaption of the Dashboard Optic==== |
| - | The Dashboard can be optically edited in the theme.css file. This file is saved in the Dashboard folder on the server.\\ | + | The look of the Dashboard can be edited in the theme.css file. This file is saved on the server in the Dashboard folder.\\ |
| Graphical elements, e.g., the logo of a company, are saved in the directory dashboard/img.\\ | Graphical elements, e.g., the logo of a company, are saved in the directory dashboard/img.\\ | ||
| - | At any time, further attributes can be added to the CSS instructions. | + | Additional features can be added to the CSS instructions at any time. |
| Line 12: | Line 12: | ||
| ===Login=== | ===Login=== | ||
| - | {{ en:software:dashboard:dashboard_theme_login.png?300 }} | + | {{ en:software:dashboard:dashborad_login.png?300 }} |
| - | ==Background color, frames and positions== | + | ==Background Color, Frames and Positions== |
| The color of the background and the frame as well as the position of the login window can be adapted via the following entry:\\ | The color of the background and the frame as well as the position of the login window can be adapted via the following entry:\\ | ||
| Line 29: | Line 29: | ||
| ==Logo== | ==Logo== | ||
| - | The logo itself and its size as well as its position can be adapted via this entry:\\ | + | The logo itself as well as its size and position can be adapted via this entry:\\ |
| <code css>.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"); | ||
| Line 39: | Line 39: | ||
| ==Font== | ==Font== | ||
| - | The color and the style as well as the size of the font can be adapted by accessing this entry:\\ | + | The color and the style as well as the size of the font can be adapted using this entry:\\ |
| <code css>.login-panel-panel-for-text { | <code css>.login-panel-panel-for-text { | ||
| color: #00267f; | color: #00267f; | ||
| Line 68: | Line 68: | ||
| For example, in the following screenshot the attribute of the background color was changed.\\ | For example, in the following screenshot the attribute of the background color was changed.\\ | ||
| - | {{ en:software:dashboard:dashboard_background.png?800 }} | + | {{ en:software:dashboard:dashborad_background.png?600 }} |
| \\ | \\ | ||
| ==Container== | ==Container== | ||
| - | The selection for the Dashboard and the individual widgets are stored in the container (the grey-colored area in the above example). The color of the background as well as its position can be adapted by accessing this entry: | + | The settings for the Dashboard and the individual widgets are stored in the container (the grey-colored area in the example above). The color of the background as well as its position can be adapted using this entry: |
| <code css> | <code css> | ||
| .main-panel { | .main-panel { | ||
| Line 81: | Line 81: | ||
| </code>\\ | </code>\\ | ||
| - | ===The navigation bar=== | + | ===The Navigation Bar=== |
| + | {{ en:software:dashboard:dashborad_navigation.png?600 }} | ||
| - | {{ en:software:dashboard:dashboard_navigation.png?800 }} | + | ==The Menu-Item Font== |
| - | + | The font color and weight of the items in the menu "Dashboards" and "Layout" as well as "Add Widgets" can be changed in this entry: \\ | |
| - | ==The font for items of the menu== | + | |
| - | The color of the font and the font-weight of the items of the menu "Dashboards" and "Layout" as well as "Add Widgets" can be changed in this entry. \\ | + | |
| <code css> | <code css> | ||
| .main-menu-bar { | .main-menu-bar { | ||
| Line 93: | Line 92: | ||
| } | } | ||
| </code>\\ | </code>\\ | ||
| - | ==The color of the font and the background when moving the mouse over items== | + | ==The Font and Background Color while Moving the Mouse== |
| - | The color of the font and the background when moving the mouse over individual items of the menu can be changed the following way: \\ | + | The font and the background color while moving the mouse over individual items of the menu can be changed the following way: \\ |
| <code css> | <code css> | ||
| .main-menu-bar .gwt-MenuItem-selected { | .main-menu-bar .gwt-MenuItem-selected { | ||
| Line 101: | Line 100: | ||
| } | } | ||
| </code>\\ | </code>\\ | ||
| - | ==Allgemein Navigationsleiste== | + | ==The Navigation Bar in General== |
| - | Rahmen, Hintergrundfarbe sowie Position der kompletten Navigationsleiste.\\ | + | Settings regarding the color of the frame and the background as well as the position of the entire navigation bar can be adapted here:\\ |
| <code css> | <code css> | ||
| .menu-panel { | .menu-panel { | ||
| Line 117: | Line 116: | ||
| ===Header=== | ===Header=== | ||
| - | {{ :software:dashboard:dashboard_logo.png?300 }} | + | {{ en:software:dashboard:dashborad_header.png?600 }} |
| ==Logo== | ==Logo== | ||
| - | Das Logo sowie dessen Position kann hier hier angepasst werden:\\ | + | The logo and its position can be adapted using this entry:\\ |
| <code css> | <code css> | ||
| Line 134: | Line 133: | ||
| - | ==Logoutbutton== | + | ==The Log-out Button== |
| - | Die Position des Logoutbuttons, des angemeldeten Benutzers sowie der Sprache kann hier angepasst werden:\\ | + | Different settings, for instance the position of the button for logout and the logged-in user as well as the language settings, can be changed here:\\ |
| <code css> | <code css> | ||
| Line 147: | Line 146: | ||
| ===Widgets=== | ===Widgets=== | ||
| - | {{ :software:dashboard:dasboard_widget_header.png?300 }} | + | {{ en:software:dashboard:dashboard_widget_header.png?400 }} |
| - | ==Kopfzeile Header== | + | ==Header== |
| - | Hier kann die Schriftfarbe, Schriftart, Schriftgröße sowie -gewicht der Kopfzeile des Headers angepasst werden.\\ | + | By accessing the following entry the color, the font style, size, and weight used in the header can be changed:\\ |
| <code css> | <code css> | ||
| .loom-widget-header { | .loom-widget-header { | ||
| Line 160: | Line 159: | ||
| width: 57%; | width: 57%; | ||
| }</code>\\ | }</code>\\ | ||
| - | ==Hintergrund und Höhe Header== | + | ==The Background and the Height of the Header== |
| - | Die Hintergrundfarbe sowie die Höhe des Headers kann hier geändert werden.\\ | + | The color of the background as well as the height of the header can be changed here:\\ |
| <code css> | <code css> | ||
| .loom-widget-header-panel { | .loom-widget-header-panel { | ||
| Line 168: | Line 167: | ||
| } | } | ||
| </code>\\ | </code>\\ | ||
| - | ==Hintergrund und Rahmen der Widgets== | + | ==The Background and Frames of the Widgets== |
| - | Hier kann die Hintergrundfarbe sowie der Rahmen der Widgets geändert werden.\\ | + | The color of the background and the frames of individual widgets can be adapted the following way:\\ |
| <code css> | <code css> | ||
| .loom-widget { | .loom-widget { | ||
| Line 177: | Line 176: | ||
| width: 100%; | width: 100%; | ||
| }</code>\\ | }</code>\\ | ||
| - | ==Bereich aller Widgets== | + | ==Area Encompassing all Widgets== |
| - | Zusätzlich kann hier der Bereich angepasst werden, in welchem sich alle Widgets befinden (Hingergrundfarbe, Rahmen sowie Position).\\ | + | In addition, the area in which widgets are supposed to be displayed can be edited (i.e., color of the background and the frames as well as position):\\ |
| <code css> | <code css> | ||
| .layout-control { | .layout-control { | ||
| Line 187: | Line 186: | ||
| } | } | ||
| </code> | </code> | ||
| - | ===Tabellen Widget=== | + | ===Widget for Tables=== |
| - | ==Farbe der Tabellenzeilen bei überfahren== | + | ==Changing the Row Color Depending on Mouse Position== |
| - | 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: | + | This selector can be used to set a different color for the rows of a table if the mouse is being moved over the table: |
| <code css> | <code css> | ||
| .loom-widget-body tr:hover{ | .loom-widget-body tr:hover{ | ||
| Line 197: | Line 196: | ||
| - | {{ :software:dashboard:table_hover.png }} | + | {{ en:software:dashboard:dashboard_widget_tr_green.png?600 }} |
| - | ==Zeilenfarbe bei Markieren== | + | ==Changing the Colors of Selected Rows== |
| - | Der Befehl um die Zeilenfarbe zu ändern, sobald eine Zeile angeklickt und damit ausgewählt wurde, lautet wie folgt: | + | The command to change the color of rows while they are being selected can be entered the following way: |
| Line 212: | Line 211: | ||
| </code> | </code> | ||
| - | {{ software:dashboard:table_line_click.png }} | + | {{ en:software:dashboard:dashboard_widget_tr_red.png?600 }} |
| ===Dashboards Navigation=== | ===Dashboards Navigation=== | ||
| - | {{ :software:dashboard:dashboard_dashboards_tabs.png?300 }}\\ | + | {{ en:software:dashboard:dashboard_tabs.png?300 }}\\ |
| - | ==Dashboard Auswahl== | + | ==Selection of a Dashboard== |
| - | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position der nicht angewählten Dashboards bestimmt.\\ | + | The adaption of the background and font color as well as the position of unselected Dashboards can be made via this entry:\\ |
| <code css> | <code css> | ||
| .tab { | .tab { | ||
| Line 231: | Line 230: | ||
| </code>\\ | </code>\\ | ||
| - | Hier wird die Hintergrundfarbe, die Schriftfarbe, sowie die Position des ausgewählten Dashboards bestimmt.\\ | + | In turn, the color specification of the background and the font as well as the position of selected Dashboards can be conducted as follows:\\ |
| <code css> | <code css> | ||
| .selected-tab { | .selected-tab { | ||
| Line 243: | Line 242: | ||
| </code>\\ | </code>\\ | ||
| - | Hier kann die Hintergrundfarbe beim Mouseover bestimmt werden.\\ | + | The color of the background while moving the mouse over the Dashboard can be determined using this entry:\\ |
| <code css> | <code css> | ||
| .tab:hover { | .tab:hover { | ||
| Line 252: | Line 251: | ||
| ===Dashboards Settings=== | ===Dashboards Settings=== | ||
| - | Wird hier etwas geändert, greifen diese Änderungen auf den Einstellungen für Dashboards, Widgets und Variablen. \\ | + | If changes occur here, the modifications have direct effects on dashboards, widgets and variables: \\ |
| - | {{ :software:dashboard:dashboard_dashboarduebersicht.png?300 }}\\ | + | {{ en:software:dashboard:dashboard_overview.png?600 }}\\ |
| - | ==Konfigurations Container== | + | ==Container for Configuration== |
| - | Hier kann der Hintergrund, der Rahmen sowie die Position des Containers geändert werden in welchem sich die verschiedenen Dashboards zur Konfiguration befinden.\\ | + | With this entry the color of the background and the frame as well as the position of the container for configuring different dashboards can be arranged: \\ |
| <code css> | <code css> | ||
| .manage-dashboards-list-panel { | .manage-dashboards-list-panel { | ||
| Line 270: | Line 269: | ||
| </code>\\ | </code>\\ | ||
| - | ==Mein Dashboard== | + | ==My Dashboard== |
| - | Hier kann die Formatierung des Schriftzugs "Meine Dashboards" geändert werden.\\ | + | Via this entry the formatting of the lettering "My Dashboards" can be adapted:\\ |
| <code css> | <code css> | ||
| .config-panel-heading { | .config-panel-heading { | ||
| Line 280: | Line 279: | ||
| } | } | ||
| </code>\\ | </code>\\ | ||
| - | |||
en/software/dashboard/configure_theme.1417514341.txt.gz · Last modified: 2021/07/01 09:55 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: 2013 T!M Solutions GmbH
