October CMS resources and help articles

Simple and to the point. Optimized by the community.

Creating Custom Backend Skins

by larryb, last modified on January 28th, 2020

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.


  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 [
            $this->skinPath . '/layouts'
  1. Copy the layouts directory from the backend module to your plugin's skin directory
  2. 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:

  author/                  <=== Author name
    customskin/            <=== Plugin name
        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!


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



Post on January 31st, 2020 4:35 PM

I think in below code you should do this little change !!!

return [
            $this->skinPath . '/layouts'
Post on November 16th, 2020 11:54 PM

Hi Larry! If you're interested in pushing out le storm.css limitations, look at this repository where I started to create a backend skin using storm + TailwindCSS!

The skin isn't finished but it's a good example for those who want to work with something different of storm css.


Have a great day, @RBilloir on Twitter ๐Ÿ‘Œ

We use cookies to measure the performance of this website. Do you want to accept these cookies?