====== Customization ======
[[doku>plugin:mikioplugin|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:

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

<code ->
@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;

</code>

**Note**: all the above variables are required.

  - 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:

<code ->
._mikiop-custom-type(accent);

</code>

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

  - You can now use the new%% %%''accent''%% %%type in elements such as%% %%''<alert accent>My Alert</alert>''%% %%or%% %%''<alert type=accent>My Alert</alert>''