How To Override Default Admin Theme In Magento

Hi guys,

In this post I’ll show you how to create a theme for the admin panel and override the default admin panel’s theme. When you have to create a lot of custom modules for the admin section, it is not a good practice to put your modules’ files in the default admin theme folder. The best practice would be to create an admin theme that will overwrite Magento’s default admin theme, and you put all your modules’ files under that theme. In this post I’ll show you how to do just that.

First we’ll create the xml file for our module in the app/etc/modules folder. Let’s call this file ‘Folio3_Admintheme.xml’

Below is the source code of this file.

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

Now let’s create our new module’s folde. As you see in the above code, our new module’s name is ‘Admintheme’ and we have put this new module in the ‘Folio3’ folder.

As you can see from the screenshot above, we have created two subfolders in the Admintheme folder namely:
1. Controller
2. etc

The ‘etc’ folder contains the two xml files shown in the screenshot below.

Let’s look at the ‘config.xml’ file first (shown in the snippet below).

<?xml version="1.0"?>
<config>
    <global>
        <models>
            <folio3_adminthemecontroller>
                <class>Folio3_Admintheme_Controller</class>
            </folio3_adminthemecontroller>
        </models>
        <events>
            <adminhtml_controller_action_predispatch_start>
                <observers>
                    <folio3_themeoverride_observer>
                        <type>singleton</type>
                        <class>Folio3_Admintheme_Controller_Observer</class>
                        <method>overrideTheme</method>
                    </folio3_themeoverride_observer>
                </observers>
            </adminhtml_controller_action_predispatch_start>      
        </events>
    </global>
</config>

To override the admin theme we have to use the ‘predispatch’ event. That is why we have created the ‘Observer.php’ file in the controller folder. In the above code we have also defined the observer class ‘Folio3_Admintheme_Controller_Observer’ which contains a method called ‘overrideTheme’ (shown in the snippet below).

Let us now move on to ‘system.xml’ file.

<?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>

In the above code snippet, we have created a group called ‘Admin Theme’ which contains only one text field called ‘Admin theme name’. This group will appear in the Magento admin panel’s design section (as shown below).

Now’s let’s look at the ‘Observer.php’ file (shown in the snippet below), which resides in the controller folder.

<?php

class Folio3_Admintheme_Controller_Observer {

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

}

As you can see, this Observer class only contains a single function called ‘overrideTheme’. This function will be triggered when the predispatch event is called in adminhtml. This function will then load our custom theme, instead of the default Magento admin theme. That’s it.

Hopefully this tutorial will give you a good idea on how to override the default admin theme in Magento.

If you have a Magento customization requirement you would like to discuss or would like to know more about our Magento development services, please get in touch with us.

Blog Post