97

Product support

Get help in the plugin support forum.

Categories

Backend Skin

The Backend Skin Plugin will help you changing all backend ui for octobercms.

You can change all backend matters, From core backend pages to plugin pages.

You can also change all assets.

Note: This will not change the original file of octobercms.

Why use the plugin?

Most of us want our admin dashboard to be look different. It also help us to get more clients.

And you can change everything without changing the original file of octobercms.

How to get start?

Getting started is just simple. Simple because all you need is to add backend folder in your current theme. Or you can add backendskin/<yourskin> in root directory

Your next step is to got documentation.

Getting started

Creating a new skin for your backend need to have existing theme.

First you need to create backend folder in your own current theme.

Folder Structure

Inside Current Theme Folder structure

- theme
--- current_theme
----- backend
------- assets
------- config
------- layouts
------- views
--------- modules
----------- backend
----------- cms
----------- system
--------- plugins

Folder Structure inside backendskin

As of version 1.1 you can now separate your backend skin from your theme.

- backendskins
--- <your-skin-code> # eg. myskin
----- assets
----- config
----- layouts
----- views
------- modules
--------- backend
--------- cms
--------- system
------- plugins

Note: as default the skin code will use the current theme, lets say your current theme is mytheme your skin will be mytheme

Note: All folders are optional, just add folder to what you need.

Note: The plugin will not replace all file inside specific folder. The plugin will add a asset path and view paths if the file that you need was existing in your custom backend.

Equivalent of the folders

assets : We request you to add this folder for your custom assets (eg. image, js, css).

layouts : This folder will contain your file where you add your own layout. This will be equivalent to modules/backend/layouts.

views : Here where all views and assets of each modules and plugins. Here you can change the controller partials and assets. And even widget assets and partials.

How to customise

Customizing your backend is just easy, all you need to know is the file structure on where the view or asset is located.

Note: Same location and same file name thats how you do it.

Example 1

You want to change the default in modules/backend/layouts/default.htm

All you need to do is to create new file in your layout folder namely default.htm and you can edit it now.

Remember: layouts/default.htm in layout is the default layout use of all pages in backend.

Example 2

You want to change the partial in plugin. All you need to do is to find the partial file and check where its located.

Lets use the rainlab user if the page/partial is located at /plugins/rainlab/user/controllers/users/index.htm now in your custom backend it will be located at views/plugins/rainlab/user/controllers/users/index.htm.

That it you can now edit the file and do what ever you want.

Everything will do in all assets and views.

Defining your skin

Using just the current theme

Normally backend skin using your current theme name.

Example if your theme name is mytheme this will be use also as your skin.

Using Cookies

This method will only temporary cookie, this is only intended for testing specific skin.

To use this, first you need to add query _skin in your url. The _skin must be equal to your desired skin code. This will not affect your front end theme.

This will create a new cookie named backend_skin

Using Console

As of version 1.1 a new console command was added, backendskin:skin:set

The command will only need one argument, that argument was the code

php artisan backend:skin:set <yourskincode>

This command will save a setting namely cyd293.backendskin::skin.active And the backend skin will always check this setting for your skin

Using Config

As of version 1.1 you can now define a configuration for backend skin.

You need to create a file and folder cyd293/backendskin/config.php inside config folder of octobercms.

Inside config.php

<?php

return [
    'activeSkin' => '<yourskincode>',
];

The fallback skin

The fallback skin, All method of defining your skin code will only define your desired skin.

But if the skin was not exists in both backendskins or themes, the skin will use the code octobercms, means it will just use the default skin of OctoberCms.

The prioritization of checking the skin code

The below are the order of how the plugin will obtain skin code that will be use.

  1. Input _skin
  2. Cookies backend_skin
  3. Setting cyd293.backendskin::skin.active
  4. Config cyd293.backendskin::activeSkin
  5. Current theme

Enabling assets from backendskins

If you extend the assets of octobercms and other plugins. You need to add backendskins to white listed folder

  1. Open .htacess
  2. Located White Listed Folder
  3. Add RewriteCond %{REQUEST_FILENAME} !/backendskins/.*/(assets|resources)/.*
    ##
    ## White listed folders
    ##
    ...
    RewriteCond %{REQUEST_FILENAME} !/themes/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/backendskins/.*/(assets|resources)/.*
    ...

Future Development

This version was just the core part of the plugin that will change all assets and pages that you want do change in your backend.

The next step for this is to provide you where you can easily switch backend theme via ui.

And for more feature I also planning to add an editor where you can edit via backend.

To contribute for this plugin. Just checkout the plugin from https://github.com/cydrickn/octobercms-backendskin.

Happy coding guys.

  • Found the plugin useful on 1 Aug, 2019

    Thank you so much. Everything is working. One plugin met all my needs.

  • Found the plugin useful on 6 Jul, 2019

    hey ! tahnks for great plugin but when I create strutcre same as you said for 'views\modules\system\assets\ui\storm.css' it does not replace the css file of october and it still uses default one

  • author

    Replied on 9 Jul, 2019

    Hi Amir,

    Thanks for the review.

    The issue have been fix in 1.1.2 version

  • Found the plugin useful on 20 Jan, 2019

    Awesome plugin! I would like to have an option that the skin of the backend this be of each theme but in its own theme. something like that:

    * themes
        * mythme1
        * mythme2
        * backend-theme

    Do you think it can be made easy?

  • author

    Replied on 28 Jan, 2019

    Hi AMEPIR,

    Thanks for the suggestion. Maybe its better if I will separate the backend-themes from themes folder,

    * themes
        - octobercms-theme-1
        ...
    * backend-thems
        - backend-skin-theme-1
        ...

  • Found the plugin useful on 21 Sep, 2018

    Hey Cydrick Nonog,

    Awesome plugin!

    I'm trying to change: ~/modules/backend/controllers/auth/signin.htm.

    I added to the theme:

    /backend/views/modules/backend/controllers/auth/signin.htm,

    but it does not work.

    It is possible to modify it?

    Thanks!

  • author

    Replied on 23 Sep, 2018

    Hello Blajan Adrian,

    Thanks for the review of the plugin. I just added new version. You can update the plugin for the fix, The new version is 1.0.4

    Thanks

  • Found the plugin useful on 5 Apr, 2018

    Awesome plugin, for me it worked perfectly for backend layouts, but not for widgets or plugins. I had to change one of the lines, in your plugin's boot function :

    $newViewPath = str_replace(base_path(), '', $origViewPath);

    ltrim had unexpected results

  • author

    Replied on 15 Apr, 2018

    Good day Jérémy Le Mardelé,

    Thanks for your review. It's solve the problem, ltrim was removing the m in modules. So I do what you said to use str_replace(base_path(), '', $origViewPath);

    Thanks

  • Found the plugin useful on 28 Dec, 2017

    This is so awesome, thank you so much! Took me a moment to understand that when extending FormWidgets you need to put it into {theme}/backend/views/modules/backend/formwidgets, but other than that it's super easy to use. Great work!

  • author

    Replied on 30 Dec, 2017

    Thank you for the review

1.1.2

Use extends for url instead of singleton

Apr 12, 2020

1.1.1

Update Asset maker to accept multiple file in addCss and addJs

Apr 12, 2020

1.1.0

Add separation of backendskin and theme

Jan 29, 2019

1.0.4

Fix modules theme customization

Sep 23, 2018

1.0.3

Update PluginEventSubscriber.php

Nov 26, 2017

1.0.2

Update Event Dispatcher

Nov 26, 2017

1.0.1

Initial Backend Skin

Nov 11, 2017