Table of Contents

Customization

Mikio Plugin

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

Custom Stylesheets

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.

LESS Stylesheets

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

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

Custom Element Styles

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 or