How are the style files structured?

The different styles are specified in various LESS style files, such as application.less or default.less.

Application styling

The general styling settings of the entire application are specified in the application.less file. Changes in the application.less file affect the MashZone NextGen welcome page, the dashboard editor in view and edit mode, and the feed editor. The styling of the Admin Console cannot be changed.

The application.less file is stored in the following folder.

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

Dashboard and widget styling

The dashboard and widget styles are specified in various style files with specific style names, such as White.less or Default-big.less. The default dashboard style file is named default.less.

The dashboard style files are store in the dashboard style folder:

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

Example

The LESS files of the default and dark dashboard styles:

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

By default, a dashboard style provides a set of widget styles, that are stored in the corresponding widget style subfolder. The following folder names can be used to create the relevant widget subfolders: actionbutton, barchart, bubblechart, colorpalette, columnchart, container, datefilter, grid, horizontalgauge, label, layoutgroup, layoutrow, linechart, piechart, speedometer, tab, and verticalgauge.

Note that the list may vary depending on the MashZone NextGen version and the installed custom widgets.

Example

...\dashboard\default

\actionbutton

\barchart

\bubblechart

\colorpalette

...

For each widget style, a corresponding LESS style file is created and stored in the corresponding widget subfolder. The various styles must be assigned to the individual widget.

Example

The Number_left_aligned is assigned to the Bar chart and the Action button widget. The Red style is only assigned to the Bar chart widget.

...\dashboard\default\

A widget style assigned to a dashboard applies to all widgets of the same type in this dashboard, for example, all bar charts in the dashboard.

File upload

You can upload your styles in individual LESS files or contained in a ZIP file.

The structure of the ZIP file must correspond to the file and folder structure described above. The ZIP file can have any name.

Example

myStyling.zip

dashboardStyle.less

dashboardStyle

actionbutton

Default-big.less

Primary-big.less

Primary.less

barchart

White.less

bubblechart

White.less

...

grid