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