Creating Custom Backend Skins

This trick will help you get started with customizing October's backend UI. There are some important considerations to be made here:

1. Storm UI is based on Bootstrap 3
2. Decoupling Storm UI is a tedious process
3. This limits what is possible depending on your knowledge, time, and requirements

Please note this trick is intended to get you started, and does not cover making modifications to the UI.

Instructions

1. Create a new plugin php artisan create:plugin Author.CustomSkin
2. Create a new folder in your plugin's directory called skin
3. Create a new class in your plugin's skin directory called CustomSkin.php:

<?php namespace Author\Plugin\Skin;

use Backend\Skins\Standard as BackendSkin;

/**
 * Modified backend skin information file.
 *
 * This is modified to include an additional path to override the default layouts.
 *
 */

class CustomSkin extends BackendSkin
{
    /**
     * {@inheritDoc}
     */
    public function getLayoutPaths()
    {
        return [
            plugins_path('/author/plugin/skin/layouts'),
            $this->skinPath . '/layouts'
        ];
    }
}

4. Copy the layouts directory from the backend module to your plugin's skin directory

5. Update the backendSkin property in config/cms.php to use your new skin class:

   /*
   |--------------------------------------------------------------------------
   | Back-end Skin
   |--------------------------------------------------------------------------
   |
   | Specifies the back-end skin to use.
   |
   */
   
   'backendSkin' => 'Author\CustomSkin\Skin\CustomSkin',

When you are finished, you should have a new plugin with a directory structure as below:

plugins/
  author/                  <=== Author name
    customskin/            <=== Plugin name
      skin/
        layouts/
        CustomSkin.php     <=== Custom skin class
      ...
      Plugin.php           <=== Plugin registration file

Upvote this trick or follow me on Twitter @thegreatbarker if you would like me to publish a blog or video with more information!

Credits

Many thanks to @LukeTowers for helping me get started and better understanding how October's Backend works!