How to add custom CSS file in Magento Admin Area

Question

I want to upload a custom CSS file to the Magento Admin Area. My approach is to do this exactly the same as in the interface:

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

This generates the following <link> :

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

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

But this does not seem to be the right way to do this, since /skin/adminhtml/base does not even exist.

All this seems even strange to me when I look at the main module, for example Mage_Widget . It adds CSS files in exactly the same way:

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

But this file is saved unter / skin / adminhtml / default / default / lib / ...

What am I doing wrong?

Answer 1

base / default is the right place for this file. This is the ultimate reserve, regardless of design area. It would be impractical to provide thematic assets by default / default, given the use case from the core team. If present in the last of these two topics, a link will be created for this path to the first.

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

Answer 2

• Go to skin / adminhtml / default / default and put the file in the /custom.css module
• Go to app / design / adminhtml / default / default / layout and create a module.xml file 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> 

Greetings

Answer 3

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

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

I created a special theme for the administrator so that I can handle insertion of headers, etc.

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

 <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 I simply renamed the adminhtml/default/default theme adminhtml/base/default to adminhtml/base/default and the skin folder, as I suggested quick creation of breaks product in the admin custom products section.

I finished copying mymodule_layoutfile.xml (maybe the local.xml file, I just didn’t want to put the file without a link to my module) on adminhtml/default/default/layout and frontend/base/default/layout dirs.

Note that adminhtml does not have a base directory, so default/default .

The contents of mymodule_layoutfile.xml :

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

Answer 4

I had the same problem. Double check the correct path. In my case, I had a namespace /module/css/mycss.css. I skipped the css folder and since Magento could not find it in the default folder, it ended up in the base folder.