Create widget style template

You can create your own widget style templates. Creating your own style templates enables you to customize the look and feel of your widgets, for example, colors schemes, fonts, or alignment.

By default, a dashboard style template contains a set of widget styles, that is applied automatically, when you assign a template to a dashboard. By creating your own less template files you are able to overwrite the widget styles provided by the dashboard style template file. A widget template applies to all widgets of the same type, for example, line chart, of a dashboard assigned.

For each widget style, for example, number_left_aligned, a less style template file, for example, number_left_aligned.less, has to be created. The template files have to be saved in an specific widget subfolder of the relevant dashboard template folder.

...\assets\custom-look-and-feel\dashboard\<dashboard template name>\<widget type>

The following folder names can be used to create the relevant widget subfolders: actionbutton, barchart, bubblechart, colorpalette, columnchart, container, grid, horizontalgauge, label, layoutgroup, layoutrow, linechart, piechart, speedometer, tab, and verticalgauge.

The dashboard style template files are located in the following folder on the MashZone NextGen server. The default dashboard template file is named default.less.

<MashZone NextGen installation>\apache-tomcat\webapps\mashzone\hub\dashboard\assets\custom-look-and-feel\dashboard

Prerequisite

You have MashZone NextGen administrator permissions.

Procedure

  1. Create a folder with the dashboard template name and a subfolder with the widget type name in the following form.

    ...\assets\custom-look-and-feel\dashboard\<dashboard template name>\<widget type>

  2. Create a less style template file for each widget style you want to overwrite in the dashboard template.

    You can add the styles you want to change or you can add new styles that are not part of the default style template.

  3. Save your less template file in the widget type folder created.
  4. Give the template file the name of the style you want to replace in the dashboard template.
  5. Load the new style template file.
    1. Create a dashboard or open a dashboard in the dashboard editor.
    2. Click Manage > Change style template in the dashboard main menu.
    3. Select the relevant dashboard style template in the dashboard drop-down menu and click Update.
  6. Click OK.

The new widget style template is now available in the widget.

Example

You want to replace the number_left_aligned style of the grid widget type provided by the default dashboard template. Therefor, you have to create a folder for the default dashboard template and an addition subfolder for the grid widget:

...\assets\custom-look-and-feel\dashboard\default\grid

The content of the number_left_aligned.less template file might be as follows:

[presto-angulargrid] [ag-grid] { .number-cell{ text-align: left; } }

To assign the new style template to your widgets, see Change widget style template.