How to Override Default Admin Theme in Magento?

When working on custom modules for the admin section in Magento, the best practice is to create an admin theme. Rather than working on default admin theme you should create a new admin them that overrides default admin theme. You can then install the custom modules in the new theme.

In this post, I will take you through the process by which you can override default admin theme and create a new admin theme in Magento.

Step 1: Create an XML file

Firstly, open app/etc/modules and create an XML for the module. For our reference, we can name this file “CodeCreateors_Admintheme.xml”.

<?xml version="1.0"?>
<config>
    <modules>
        <CodeCreators_Admintheme>
            <active>true</active>
            <codePool>local</codePool>
        </codecreators_Admintheme>
    </modules>
</config>

 

Step 2: Create folders for new module

Now create a new folder for the module. Name it “CodeCreators” for reference. And put XML file into this folder as shown below.

As shown above, we have created two subfolders in the Admintheme folder i.e. controller and etc.

Step 3: Override admin theme

Open “confgig.xml”. We will have to use the predispatch event to override the admin theme. In order to do so, we will create ‘Observer.php’ in controller folder.

<?xml version="1.0"?>
<config>
    <global>
        <models>
            <codecreators_adminthemecontroller>
                <class>codecreators_Admintheme_Controller</class>
            </codecreators_adminthemecontroller>
        </models>
        <events>
            <adminhtml_controller_action_predispatch_start>
                <observers>
                    <codecreators_themeoverride_observer>
                        <type>singleton</type>
                        <class>codecreators_Admintheme_Controller_Observer</class>
                        <method>overrideTheme</method>
                    </codecreators_themeoverride_observer>
                </observers>
            </adminhtml_controller_action_predispatch_start>      
        </events>
    </global>
</config>

 

 

We will use ‘override theme’ to define observer class ‘CodeCreators_Admintheme_Controller_Observer‘ in the code above.

<?xml version="1.0"?>
<config>
    <sections>
        <design>
            <groups>
                <admin translate="label">
                    <label>Admin Theme</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>1</sort_order>
                    <show_in_default>1</show_in_default>
                    <fields>
                        <theme translate="label comment">
                            <label>Admin theme name</label>
                            <comment>Override default admin theme.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                        </theme>
                    </fields>
                </admin>
            </groups>
        </design>
    </sections>
</config>

 

Move on to system.xml file. In this code, we will create a group ‘Admin Theme’ with one text field i.e  ‘Admin theme name’. This group will be shown in the design section of Magento’s admin panel.

Now open ‘observer.php’ in controller folder. The Observer class includes a single function i.e. ‘overrideTheme’.

<?php
 
class codecreators_Admintheme_Controller_Observer {
 
    //Event: adminhtml_controller_action_predispatch_start
    public function overrideTheme() {
        Mage::getDesign()->setArea('adminhtml')
            ->setTheme((string) Mage::getStoreConfig('design/admin/theme'));
    }
 
}

 

When the pre-dispatch event is called, this function will be activated.This function will be triggered when the predispatch event is called in adminhtml. It will the load our custom theme instead of default admin theme.

Tell us if you found this tutorial helpful in overriding Default Admin theme in Magento. Magento e-commerce development

For more information on Magento e-commerce website development, get in touch.