Question

When I made my child theme, I wanted to extend the local.xml of the parent theme, so instead of creating my own local.xml (which would replace the parent one instead of extending it), I created a customlocal.xml and added it via my theme.xml. However, my new CSS file is loading first before all other css files, which is really dumb for a parent-child theming scheme. I found this postthat explained that xml with if statements are loaded afterward, so I put an empty if statement in my xml:

        <action method="addCss">
            <stylesheet>css/mycustomcss.css</stylesheet>
            <if><![CDATA[<!--[]><!-->]]></if>
        </action>

This did work and load my CSS after the parent themes, but now I'm getting an orphan html closing tag right after my :

<body class="catalog-product-view" cz-shortcut-listen="true">/&gt;

The /&gt renders as /> on the page, before the header and all other content. Does anyone know how I correctly use an empty CDATA to get my css to load in the expected position?

PS also, in my css link in the head, <!--[]="" is being added in at the end:

<link rel="stylesheet" type="text/css" href="http://localhost/mylift/store/skin/frontend/custom/default/css/mycustomcss.css" <!--[]="">

and <!---->is also showing up right before the closing tag of the

Was it helpful?

Solution

This is because the addItem and addCss methods have different signatures. You would need to look at Mage_Page_Block_Html_Head to see the differences and which parameters are required and which are optional. The XML nodes of the action follow the same rules as PHP: if you want to "skip" a parameter, you still need to include it but leave it empty.

The addCss method takes two parameters: the style sheet path and parameters.

/**
 * Add CSS file to HEAD entity
 *
 * @param string $name
 * @param string $params
 * @return Mage_Page_Block_Html_Head
 */
public function addCss($name, $params = "")

The addItem takes quite a few parameters as it needs to support different elements like scripts, style sheets and meta elements.

/**
 * Add HEAD Item
 *
 * Allowed types:
 *  - js
 *  - js_css
 *  - skin_js
 *  - skin_css
 *  - rss
 *
 * @param string $type
 * @param string $name
 * @param string $params
 * @param string $if
 * @param string $cond
 * @return Mage_Page_Block_Html_Head
 */
public function addItem($type, $name, $params=null, $if=null, $cond=null)

So the only way to add a style sheet with an empty if statement is to use the addItem method.

As an alternative I've implemented a customization of this class which adds the functionality to insert an element before/after another element. This requires a module and some knowledge of how Magento keeps the scripts array, but is fairly easy to implement.

OTHER TIPS

It turns out I was missing a

<params/>

in my xml, that I guess closes out the head tag. For some reason, I also needed to use the method "addItem" and specify the type as css, rather than addCss. The complete XML looks like this:

<reference name="head">
    <action method="addItem">
         <type>skin_css</type>
         <name>css/mycustomcss.css</name>
         <params/>
         <if><![CDATA[<!--[]><!-->]]></if>
    </action>
 </reference>

This will not work:

<reference name="head">
   <action method="addCss">
        <stylesheet>css/mycustomcss.css</stylesheet>
        <params/>
        <if><![CDATA[<!--[]><!-->]]></if>
    </action>
</reference>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top