...
Dashboard
Button
Chart Panel
Chart
Table
Card
PDF
Login Screen
Config Screens
Mobile
Each of these options is covered in more detail in the Dashboard CSS Tags section. Prior knowledge of CSS and HTML is useful but not essential.
...
Changing the colour from #000000 to #d80751 for example changes the colour of the sample text.
...
Rather than using hex codes, you can also enter a new colour choice by typing the name of the colour e.g. red or blue.
...
To see how this change might look on the Dashboard, click the ‘Preview’ icon.
...
Click the ‘Remove’ icon next to the relevant colour.
...
...
Configuration
This section allows users to define additional aspects associated with the stylistic parts of the dashboard, over and above the CSS tags.
...
Dashboard
Always Show Logo – When ticked, this will force the logo to always be displayed on the category. Un-ticking it will hide the logo when the category list isn’t displayed.
...
| Info |
|---|
The optimum size for a logo is around 100px X 50px. |
After adding the relevant images into the correct folders, ensure that you type the name of the image into the relevant sections.
...
Fonts
Custom Font URLs This allows you to configure Custom Fonts to be utilised in piDashboard. The URL specified needs to contain the @Font_Face rules, for example: https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap ).
...
You could then use .pi-style__body with font-family: 'Red Hat Text' to apply to everywhere in the dashboard.
Charts
Lightbulb Chart Border Display - when ticked; a border will be displayed around the edge of a light bulb chart type.
Example
This shows how a lightbulb looks with a border.
...
Example
This shows how a lightbulb looks without a border.
...
Turn Off Tooltips – if this box is ticked, tooltips will not be displayed when you hover charts. The following screenshot shows how tooltips are displayed.
...
Show Line Dots - this is used to show line dots on Spline and Line charts. By default, this option is not selected.
...
Chart Grid Line Colour. – this is used to set the colour of the gridlines used in a chart. To specify a colour, enter a HEX code into this field.
...
Example
This example shows how the grid lines will look on a chart.
...
| Info |
|---|
If a colour is not entered here, the standard dashboard grid colours will be used. Certain named colours can also be used, please see https://www.w3schools.com/cssref/css_colors.asp for more information. |
Tables
Adding a numerical value to ‘Minimum Column Width’ field will restrict all table columns so that they don’t fall below the specified width. This value will be respected even if width values have been applied to individual columns in the Edit Chart screen.
Adding a numerical value to ‘Row Height’ will fix the height of all table body rows to the specified height. Setting this value will also overwrite line-height in .pi-style__table-body-cell, to use this property the !important tag needs to be added to line-height in .pi-style__table-body-cell.
| Info |
|---|
Row height does not apply to header rows, which can already be adjusted in the tables styles tab with |
...
Login Page
Login Screen Background Image - the background ‘splash’ screen is displayed when the login window is presented. This field supports the same image types as Login Screen Logo.
...
Images in Card chart types. You can embed an image inside a card chart by using the Image box on a card. Tick the ‘Image’ box and enter the name of the image into the Image field in Content section on the right-hand side of the screen.
...
Example
This is how the image will appear when used on a Card chart type.
...
| Info |
|---|
The images need to be placed in this folder: …\tomcat\webapps\panMISDashboardResources\images |
...
<span class= "THE NAME OF THE FONT ICON"style="color:#ffffff; font-size:0.8em;"></span>
Example
In the following example an image has been concatenated with the Gender object.
...
When this is used in a table, the image and the gender will appear together in the same column.
...
This will extend the height of the “page” allowing you to scroll up/down the dashboard, rather than the vertical size being decided by the monitor.
| Elementor macro | ||||||
|---|---|---|---|---|---|---|
| ||||||