Previous Topic
Customizing the JDashboard UI
Logi Report controls the appearance of the JDashboard UI by CSS files. After determining which theme you would like to apply to JDashboard, you can customize the appearance of your JDashboard UI by modifying the file dashboard.css stored in the <install_root>\public_html\webos\style\theme-name directory among these CSS files to change the width, height, color, font, borders, padding, and so on of the JDashboard window elements. This topics describes how to use dashboard.css to design your own JDashboard visual effect.
How are JDashboard UI elements and CSS declarations mapped in dashboard.css
The file dashboard.css contains a lot of selectors, which are mainly class selectors consisting of a dot "." followed by a class name. These selectors are the links between the JDashboard window elements and the style. They specify what elements are affected by the CSS declarations. You can modify or add CSS declarations for a selector or a group of selectors, or add CSS rules to customize the style of the elements.
In addition, when you hover the mouse pointer over an item in the Resources panel, you can find the background color of the item changes to yellow. A disabled button has lighter color than a working button. These are achieved by the combination of state mechanism and CSS. JDashboard marks element states using an 8-bit binary number which will be converted to a decimal number. You can append the decimal number to the end of the class name in a CSS selector to indicate the state of the element, for example, taskbar_16 means that the dashboard title bar is invisible. The following table lists the most commonly used decimal numbers in dashboard.css and the corresponding element state:
| Decimal Number | Element State |
|---|---|
| 0 | Normal state. Usually not added in class names. |
| 1 | Disabled |
| 2 | Hovered |
| 3 | Usually having the same style effect as 1.
For example: |
| 4 | Triggered |
| 6 | Triggered + hovered |
| 16 | Invisible |
How to edit dashboard.css to customize the JDashboard UI
- In JDashboard specify the theme you want to use, for example, Green.
- Go to the
<install_root>\public_html\webos\style\theme-namedirectory, for example<install_root>\public_html\webos\style\green. - Open dashboard.css with your preferred editor.
- Find the selectors for the elements you want to customize.
- Edit the CSS declarations for the selectors.
- Save dashboard.css.
- Run make.bat/make.sh in the
<install_root>\public_html\bindirectory with the argument "jsvm" to make the changes take effect. For example, on the Windows platform, run the commandmake.bat jsvm. - Refresh the current JDashboard window. You can find the UI elements appear in the style you define.
Tip: You can access Developer Tools on Internet Explorer, Google Chrome, or Mozilla Firefox to get the code about how CSS is applied to the JDashboard window elements. To do this, open JDashboard by running a dashboard or creating a new dashboard, then press F12.