Create component style template
You have MashZone NextGen administrator permissions.
You can create your own component style templates. Creating your own style templates enables you to customize the look and feel of your dashboard components, for example, colors schemes, fonts, or alignment.
By default, a dashboard style template contains a set of component 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 component styles provided by the dashboard style template file. A component template applies to all components of the same type, for example, line chart, of a dashboard assigned.
For each component 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 component subfolder of the relevant dashboard template folder.
...\assets\custom-look-and-feel\dashboard\<dashboard template name>\<component type>
The following folder names can be used to create the relevant component 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
Procedure
1. Create a folder with the dashboard template name and a subfolder with the component type name in the following form.
...\assets\custom-look-and-feel\dashboard\<dashboard template name>\<component type>
2. Create a less style template file for each component 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 component type folder created.
Give the template file the name of the style you want to replace in the dashboard template.
4. Load the new style template file into the MashZone NextGen Dashboard component.
b. Click Manage > Change style template in the dashboard main menu.
c. Select the relevant dashboard style template in the Dashboard drop-down menu and click Update.
5. Click OK.
The new component style template is now available in the MashZone NextGen Dashboard component.
Example
You want to replace the number_left_aligned style of the grid component 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 component:
...\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 dashboard components, see
Change component style template.