Homepage
Main navigation
Main content
Additional information
October Tricks
Login / Sign up
Quality Guidelines
About
GitHub
Propose new content
October CMS resources and help articles
Simple and to the point. Optimized by the community.
×
Login / Sign up
Quality Guidelines
About
GitHub
Propose new content
Edit trick
Changes will be published after manual review
Title
Give your trick a describing title. Do
not
start with «How to...».
Your trick
Keep it short and concise! Markdown is supported.
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](https://www.twitter.com/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!
References
Add additional online resources to your trick
×
Name
URL
×
Name
URL
+ Add reference
Topics
If your trick fits more than one topic select multiple. Select at least one.
Backend
Plugin Development
CMS
Twig
Themes
Deployment
Tags
You can use existing tags or create new ones. Add at least one.
Submit for review
Cancel
We use cookies to measure the performance of this website. Do you want to accept these cookies?
Accept
Decline