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?

Solution 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.

Solution 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

Comments

[fmsthird]

This is much understandable

[sonu pokade]

But I have one doubt that custom folder will be lost when magento version will be updated. I need to add custom js only in module folder itself Or even better please tell me the best solution to add custom js for admin custom module so that we will not lost anything even after updating magento. Thank you in advance.