How to add a custom CSS file in Magento's Admin Area

Question

I want to load a custom CSS file in Magento's Admin Area. My approach is to do it exactly as I would in the frontend:

<action method="addCss">
    <file>namespace/module/mycss.css</file>
</action>

That generates the following <link> tag:

<link rel="stylesheet" type="text/css" 
    href="http://host/skin/adminhtml/base/default/namespace/module/mycss.css" 
    media="all">

That tells me that Magento is looking for my CSS in /skin/adminhtml/base/default/namespace/module. So if I put it there, I'd probably be fine and everything would work.

But that just doesn't seem like the proper way to do it since /skin/adminhtml/base doesn't even exist.

The whole thing seems even weirder to me when I look at a core module like Mage_Widget. It adds CSS files the exact same way:

<action method="addCss"><name>lib/prototype/windows/themes/magento.css</name></action>

But that file is stored unter /skin/adminhtml/default/default/lib/...

What am I doing wrong?

Answer 1

base/default is the appropriate location for this file. It is the ultimate fallback regardless of design area. It would not be inappropriate to provide theme assets under default/default given the precedent from the core team. If present in the latter of these two themes, the link would be generated for that path before the former.

Incidentally, if you rename app/design/adminhtml/default to app/design/adminhtml/base the admin theme works fine.

Answer 2

1. Go to skin/adminhtml/default/default and place your file under module/custom.css
2. Go to app/design/adminhtml/default/default/layout and create the file module.xml with the following code:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addCss">
                <name>module/custom.css</name>
            </action>
        </reference>
    </default>
</layout>

3. Now connect your xml file to the module in Namespace/Module/etc/config.xml:

<config>
...
<adminhtml>
    <layout>
        <updates>
            <namespace_module>
                <file>module.xml</file>
            </namespace_module>
        </updates>
    </layout>
</adminhtml>
...
</config>

Cheers