Magento: How to change the admin theme

So you want to use Magento for your company and now you have to change the look of the backend. Of course you don’t want to change the default Magento adminhtml theme and kill any chances of upgrading your templates later on. So thats where this post comes into play. ;)

Theres an easy way to add your own theme folder and use it to customize the look of your admin control panel. All files that aren’t included in your theme will fall back to the default Magento theme, thus avoiding any problems with missing templates and making it a lot easier to change only a few files.

Add a new adminhtml theme

Start by adding a new folder inside the app/design/adminhtml/default folder. To start out, the folder should also contain one sub-folders called template.

So, for example, you add a folder called mytheme, and inside it you add another folder called template.

Overriding Magento configuration

All you have to do is add a new config.xml file inside app/code/local/MyCompany/Adminhtml/etc. Add the following code inside the file:

Note: if you created this file by following one of my earlier guides you don’t have to create it again and you would simply add the <stores> section at the appropriate location inside the existing file.
<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <MyCompany_Adminhtml>
            <version>0.1.1</version>
        </MyCompany_Adminhtml>
    </modules>
    <stores>
        <admin>
            <!-- override default admin design package and theme -->
            <design>
                <package>
                    <name>default</name>
                </package>
                <theme>
                    <default>mytheme</default>
                </theme>
            </design>
        </admin>
    </stores>
</config>

You will also have to tell Magento about this new module in an XML file placed inside /app/etc/modules. This file could be called MyCompany.xml and inside you would copy/paste:

Note: if you created this file by following one of my earlier guides you don’t have to create it again.
<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <MyCompany_Adminhtml>
	    <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Adminhtml />
            </depends>
        </MyCompany_Adminhtml>
    </modules>
</config>

Changing template files

Now to change the default Magento templates you basically copy the .phtml files from the app/design/adminhtml/default/default/template folder into your own template folder and change the contents of the .phtml file to suit your needs.

For example, if you want to change the login box and remove the Magento copyright message:

Copy app/design/adminhtml/default/default/template/login.phml into the app/design/adminhtml/default/mytheme/template folder and then change the <p class=”legal”></p> to put your own legal note.

7 comments

  1. Legendary post dude. Still took me am hour to get going. I think making a new template folder under skin/adminhtml/default/mytheme was required to make it kick in. Magento is only starting to make a little sense to me now after pulling my hair out for weeks. Its actually a really cool system once you get past the hair pulling stage.

  2. Hi, This post is a realy great one, but I had to change default value to mytheme in admin page System->Configuration->General->Design. It’s worked only that way.

  3. Nice post dude…Thanks a lot

    Also one thing.. no need to copy entire templates from default folder to our theme folder…
    Only need to copy the modified template and layout files…

    Once again.. thanks for the post

  4. For Magento with the “The Find” (e.g. EE 1.9 and CE 1.5) module you’ll need to do something like:

    default

    default
    mytheme
    default
    mytheme
    default

    This will allow you to change the layout and template files and fall back to the default ones. The only downside is that now “The Find” module’s admin pages no longer work. If that’s not a requirement then it’s probably not much of an issue.

  5. If anyone of you go through all of this steps and still not seeing anything try deleting your VAR -> CACHE folder that solved my problem
    Thanks.

  6. Thank you so much…I was banging my head for last 4-5 hrs. Finally it worked with the help of this post. :)

Comments are closed.