3

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 settingsDesign Settings

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

Thanks, Eddie

12

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.

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

  • Hi Erik, thanks for your detailed response &sorry for the delay in responding. I'll try this later & report on progress. – freshwebs May 30 '14 at 9:34
  • Is the custom phtml template necessary? At first glance it seems to be working for me without it. – Yumecosmos Jun 25 '14 at 22:20
  • Thanks Erik. Been breaking my head on this for a while. Worked perfectly! – user3026316 Dec 13 '14 at 0:24
  • @Erik And what if "Merge CSS Files" is enabled? Will this additional custom.css be merged with other CSS files? – zitix Mar 2 '15 at 18:18
  • @zitix - Yes, the custom.css file will be merged with other CSS files if "Merge CSS Files" is enabled. – Erik Hansen Mar 3 '15 at 19:47
5

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! :-)

  • Nice. This is the simpliest solution I know :) – jrosell Jan 24 '16 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.