Customization

Mikio Plugin

https://github.com/nomadjimbob/mikioplugin/wiki/Customising

You can customise elements in the plugin using seperate .less or .css stylesheets in the styles directory.

The custom stylesheet loader also supports searching subdirectories within the styles directory.

Due to the way that the less compiler works, all the less stylesheets are merged into a single document, starting with any files named variables.less, followed by any other files. This allows you to override all the variables within the plugin, while overriding CSS styling.

This means that you may need to use 2 seperate stylesheets in the styles directory, one named variables.less and a second named mystyles.less in order for the compiled output to be correct for less and CSS overriding.

CSS Stylesheets are loaded after the Mikio Plugin stylesheet and should be able to override any built-in styling.

Some elements contain built-in styles such as primary, secondary, success, etc, however you can add your own styles using custom stylesheets.

For an example, to add a new accent style:

1. Create a new variables.less file in the styles directory that contains the following LESS variables:

@accent-btn-text-color: #fff;
@accent-btn-bg-color: #6d2585;
@accent-btn-border-color: #91679e;
@accent-btn-hover-text-color: #ffffff;
@accent-btn-hover-bg-color: #c499d1;
@accent-btn-hover-border-color: #63416e;
@accent-alert-text-color: #ffffff;
@accent-alert-bg-color: #91679e;
@accent-alert-border-color: #63416e;

Note: all the above variables are required.

1. New link the LESS variables to the Mikio Plugin stylesheet by creating a new styles.less file in the styles directory that contains the following code:

._mikiop-custom-type(accent);

You can see that the parameter within the function _mikiop-custom-type matches the variable prefix in the variables.less file.

1. You can now use the new accent type in elements such as

   My Alert

   or

   My Alert