...
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.
...
| 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 ).
...
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.
...
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. |
...
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 | ||||||
|---|---|---|---|---|---|---|
| ||||||