Magento CE 1.9 ordering ccs files

Question

I'm running CE 1.9.0 & I've created a sub theme of the rwd template.

So I have folders like so: app/design/frontend/rwd/mytheme/layout/local.xml app/design/frontend/rwd/mytheme/templates/ - currently empty

skin/frontend/rwd/mytheme/css/custom.css

In local.xml I have the following directive:

 <default>

    <reference name="head">

         <action method="addItem">
              <type>skin_css</type>
              <name>css/custom.css</name>
          </action>

      </reference>
    </default>

However, the custom.css is being output at the top - even before the various js files, so that the rwd theme css is overriding my changes.

Within the Admin UI I have the following Design settings

Anyone know why my custom.css is being output first, rather than last as I'd expect?

Thanks, Eddie

Answer 1

Cause of problem

The Mage_Page_Block_Html_Head::getCssJsHtml method is responsible for outputting the CSS/JS files that are added by the addItem method. The method groups items by their "if" condition, which results in any items with "if" values being grouped after those without "if":

switch ($item['type']) {
    case 'js':        // js/*.js
    case 'skin_js':   // skin/*/*.js
    case 'js_css':    // js/*.css
    case 'skin_css':  // skin/*/*.css
        $lines[$if][$item['type']][$params][$item['name']] = $item['name'];
        break;
    default:
        $this->_separateOtherHtmlHeadElements($lines, $if, $item['type'], $params, $item['name'], $item);
        break;
}

The app/design/frontend/rwd/default/layout/page.xml file adds the CSS files using conditional IE-style comments:

<!-- Add stylesheets with no media queries for use in IE 8 and below -->
<action method="addItem"><type>skin_css</type><name>css/styles-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
<action method="addItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>

<!-- Add stylesheets with media queries for use by modern browsers -->
<action method="addItem"><type>skin_css</type><name>css/styles.css</name><params/></action>
<action method="addItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>

Solution

If you want to be able to add multiple CSS/JS files after the native files using the standard addItem/addJs methods, you can follow these steps:

1. Create this file app/design/frontend/custompackage/customtheme/layout/local.xml and add these contents:

   <?xml version="1.0"?>
   <layout version="0.1.0">
       <default translate="label" module="page">
           <reference name="head">
               <block type="page/html_head" name="head_custom" template="page/html/head_custom.phtml">
               <action method="addItem"><type>skin_css</type><name>css/custom.css</name></action>
               </block>
           </reference>
       </default>
   </layout>
   

You're creating a new head_custom block so that you can add new items to it. If you look at the app/design/frontend/base/default/template/page/html/head.phtml file, you will see that getChildHtml() is being called after getCssJsHtml(), so head.phtml will first load all of the native CSS/JS files, and will then load the head_custom block, which will in turn load your custom CSS/JS files.

2. Create this file app/design/frontend/custompackage/customtheme/template/page/html/head_custom.phtml and add this content to that file:

   <?php echo $this->getCssJsHtml(); ?>
   

Now, any items you add to the head_custom block will load beneath the native CSS/JS items.

Answer 2

What about just to add into local.xml same css like that:

<reference name="head">
    <!-- Add stylesheets with no media queries for use in IE 8 and below -->
    <action method="addItem"><type>skin_css</type><name>css/custom.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
    <!-- Add stylesheets with media queries for use by modern browsers -->
    <action method="addItem"><type>skin_css</type><name>css/custom.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>
</reference>

And nothing more! :-)