CODEWITHSUNDEEP
magento
Rudolph Gottesheim
Rudolph Gottesheim

Reputation: 1701

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

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?

Upvotes: 8

Views: 17373

Answers (4)

&#193;ndi
&#193;ndi

Reputation: 41

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

Upvotes: 4

JohnyFree
JohnyFree

Reputation: 1369

I had the same problem. Double check if the path is absolutely correct. In my case I had namespace/module/css/mycss.css. I missed css folder and because Magento couldn't find it inside default folder, it went to base folder.

Upvotes: 0

Niloct
Niloct

Reputation: 10015

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

@benmarks answer is correct although incomplete. You need to rename another directory too: skin/adminhtml/default to skin/adminhtml/base

I created a custom theme for admin so I could handle header insertions etc.

So I had to change the config.xml in my module to look like:

<config>
<stores>
    <admin>
        <!-- altering admin design package and theme -->
        <design>
            <package>
                <name>MY_THEME_PACKAGE_NAME</name>
            </package>
            <theme>
                <default>default</default>
            </theme>
        </design>
    </admin>
</stores>
</config>

Edit

I found that just renaming the adminhtml/default/default theme dir to adminhtml/base/default and the skin folder as I suggested breaks quick product creation in configurable products section of admin.

I ended up copying a mymodule_layoutfile.xml (could be a local.xml file, I just didn't want to put a file without reference to my module) to both adminhtml/default/default/layout and frontend/base/default/layout dirs.

Notice that adminhtml doesn't have a base directory, so default/default is used.

The mymodule_layoutfile.xml contents:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs"><script>jquery/jquery.min.js</script></action>
            <action method="addJs"><script>jquery/jquery.noConflict.js</script></action>
        </reference>
    </default>
</layout>

Upvotes: 0

benmarks
benmarks

Reputation: 23205

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.

Upvotes: 7

Related Questions