Magento – Not seeing changes made to page.xml or local.xml

Instead of overwriting the page.xml I would suggest using the layout/local.xml file in your active template.

If it doesn't exist please create the file app/design/frontend/default/blank/layout/local.xml and add the page.xml content you've already created.

Please make sure caching and JS script compression are disabled to see the changes

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.