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

2 Answers 2

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.

5
  • Hi Erik, thanks for your detailed response &sorry for the delay in responding. I'll try this later & report on progress.
    – freshwebs
    May 30, 2014 at 9:34
  • Is the custom phtml template necessary? At first glance it seems to be working for me without it.
    – Yumecosmos
    Jun 25, 2014 at 22:20
  • Thanks Erik. Been breaking my head on this for a while. Worked perfectly! Dec 13, 2014 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, 2015 at 18:18
  • @zitix - Yes, the custom.css file will be merged with other CSS files if "Merge CSS Files" is enabled. Mar 3, 2015 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! :-)

1
  • Nice. This is the simpliest solution I know :)
    – jrosell
    Jan 24, 2016 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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