What is the proper way to remove madisonisland.css?

Question

The new Madison Island theme for Magento CE 1.9/EE 1.14 comes with several theme specific CSS files, madisonisland.css and madisonisland-ie8.css.

According to the Magento documentation (http://www.magentocommerce.com/knowledge-base/entry/ee114-ce19-rwd-dev-guide#remove-sample-content ) the way to do this would be via local.xml with the following code:

<layout version="0.1.0">
<default>
    <reference name="head">
        <action method="removeItem"><type>skin_css</type><name>css/madisonisland.css</name></action>
        <action method="removeItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name></action>
    </reference>
</default>
</layout> 

However, when testing this it does not remove the two CSS files as they both still load on the frontend (and yes of course the caches have been cleared). I assume that the reason they are not removed is because they are coded into head.phtml.

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/madisonisland.css'); ?>" media="all" />

Instead of being loaded via: <?php echo $this->getCssJsHtml() ?> Is that correct?

Of course they can be easily removed by copying head.phtml to custom_package/custom_theme/template/page/html/ and removing those lines from the template file itself but is this the best method or should there be an alternative XML way to do this?

Answer 1

I checked version 1.9.0.1 and those files are being added by XML, so your first method should work.

If, however, you somehow have a version where the link tags are indeed coded into head.phtml then it is entirely valid to override it in your custom theme and edit manually. The only other method I can think of would be to create a replacement template file and then apply it with some XML.

<layout>
    <default>
        <reference name="head">
            <action method="setTemplate"><template>your/new/head.phtml</template></action>
        </reference>
    </default>
</layout>

But that only achieves the same result as overriding head.phtml directly only with more effort, so there is no point.

Answer 2

Magento version 1.9 uses SCSS stylesheets. The proper way to remove the default data is to remove those modules and recompile scss. The proper way to remove the xml calls to the stylesheets is to edit your local.xml file and removing the stylesheets there. See this article for complete information on customizing 1.9 RWD theme. http://www.magentocommerce.com/knowledge-base/entry/ee114-ce19-rwd-dev-guide#remove-sample-content

Answer 3

So The best way I found to do this is to remove the madisonisland.css via the local.xml as shown above and then re-adding it as part of my custom theme.

• Obviously just remember to copy across the madisonisland.css & madisonisland-ie8.css to your custom theme within the rwd package in the same location and rename it.

<reference name="head">
    <!--Remove CSS and JS, skin Folder-->
    <action method="removeItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
    <action method="removeItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>
    <!--Add CSS and JS, skin Folder-->
    <action method="addItem"><type>skin_css</type><name>css/custom-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
    <action method="addItem"><type>skin_css</type><name>css/custom.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>
</reference>