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.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:software:dashboard:configure_theme [2014/12/05 12:20] duc.le |
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 on the server in the Dashboard folder.\\ | + | 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.\\ | ||
| - | Further attributes can be added to the CSS instructions at any time. | + | Additional features can be added to the CSS instructions at any time. |
| Line 12: | Line 12: | ||
| ===Login=== | ===Login=== | ||
| - | {{ en:software:dashboard:dashboard_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 example above). 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?600 }} | + | ==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>\\ | ||
| - | ==The navigation bar in general== | + | ==The Navigation Bar in General== |
| Settings regarding the color of the frame and the background as well as the position of the entire navigation bar can be adapted here:\\ | 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> | ||
| Line 117: | Line 116: | ||
| ===Header=== | ===Header=== | ||
| - | {{ en:software:dashboard:dashboard_logo.png?300 }} | + | {{ en:software:dashboard:dashborad_header.png?600 }} |
| ==Logo== | ==Logo== | ||
| - | The logo and its position can be adapted via this entry:\\ | + | The logo and its position can be adapted using this entry:\\ |
| <code css> | <code css> | ||
| Line 134: | Line 133: | ||
| - | ==The button for logout== | + | ==The Log-out Button== |
| - | Different settings like the position of the button for logout and the logged-in user as well as the language settings can be changed here:\\ | + | 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=== | ||
| - | {{ en:software:dashboard:dasboard_widget_header.png?300 }} | + | {{ en:software:dashboard:dashboard_widget_header.png?400 }} |
| ==Header== | ==Header== | ||
| - | By accessing the following entry the color, the style and the size as well as the weight of the font used in the header can be changed:\\ | + | 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>\\ | ||
| - | ==The backround and the height of the header== | + | ==The Background and the Height of the Header== |
| The color of the background as well as the height of the header can be changed here:\\ | The color of the background as well as the height of the header can be changed here:\\ | ||
| <code css> | <code css> | ||
| Line 168: | Line 167: | ||
| } | } | ||
| </code>\\ | </code>\\ | ||
| - | ==The background and the frames of the widgets== | + | ==The Background and Frames of the Widgets== |
| The color of the background and the frames of individual widgets can be adapted the following way:\\ | The color of the background and the frames of individual widgets can be adapted the following way:\\ | ||
| <code css> | <code css> | ||
| Line 177: | Line 176: | ||
| width: 100%; | width: 100%; | ||
| }</code>\\ | }</code>\\ | ||
| - | ==Area encompassing all widgets== | + | ==Area Encompassing all Widgets== |
| 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):\\ | 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> | ||
| Line 187: | Line 186: | ||
| } | } | ||
| </code> | </code> | ||
| - | ===Widget for tables=== | + | ===Widget for Tables=== |
| - | ==Changing the color of rows while moving a mouse over rows within a table== | + | ==Changing the Row Color Depending on Mouse Position== |
| - | This selector can be used to determine that the rows of a table should turn to another color if a mouse is being moved over the table: | + | 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: | ||
| - | {{ en:software:dashboard:dashboard_widget_tr_green.png }} | + | {{ en:software:dashboard:dashboard_widget_tr_green.png?600 }} |
| - | ==Changing the colors of rows while selecting== | + | ==Changing the Colors of Selected Rows== |
| - | The command to change the color of rows while being selected can be entered the following way: | + | 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> | ||
| - | {{ en:software:dashboard:table_line_click.png }} | + | {{ en:software:dashboard:dashboard_widget_tr_red.png?600 }} |
| - | ===Dashboards navigation=== | + | ===Dashboards Navigation=== |
| - | {{ en:software:dashboard:dashboard_widget_tr_red.png?300 }}\\ | + | {{ en:software:dashboard:dashboard_tabs.png?300 }}\\ |
| ==Selection of a Dashboard== | ==Selection of a Dashboard== | ||
| - | The adaption of the color of the background and the font as well as the position of unselected Dashboards can be made via this entry:\\ | + | 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>\\ | ||
| - | In turn, the adaption of the color of the background and the font as well as the position of selected Dashboards can be conducted as follows:\\ | + | 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>\\ | ||
| - | The color of the background while moving the mouse over the Dashboard can be determined in this entry:\\ | + | 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 251: | Line 250: | ||
| - | ===Dashboards settings=== | + | ===Dashboards Settings=== |
| - | If something gets changed here, then these modifications will have direct effects on Dashboards, widgets and variables: \\ | + | If changes occur here, the modifications have direct effects on dashboards, widgets and variables: \\ |
| - | {{ en:software:dashboard:dashboard_overview.png?300 }}\\ | + | {{ en:software:dashboard:dashboard_overview.png?600 }}\\ |
| - | ==Container for configuration== | + | ==Container for Configuration== |
| - | 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: \\ | + | 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 280: | Line 279: | ||
| } | } | ||
| </code>\\ | </code>\\ | ||
| - | |||
en/software/dashboard/configure_theme.1417778449.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
