Magento – Change the order of CSS files. Load module’s CSS before theme’s CSS

configurationfrontendlayoutmoduletheme

How can I change the order of CSS files to load module's CSS before theme's CSS? Here are some code examples:

Theme's CSS file (loaded on all pages) added in theme's local.xml:

<default>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
    </reference>
</default>

Extension's CSS file (loaded only on category pages) added in module's XML layout file:

<catalog_category_layered>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/extension.css</name>
        </action>
    </reference>
</catalog_category_layered>

This is the order of loaded CSS files which I get on the category page, extension's CSS is loaded after theme's CSS:

/default/mytheme/css/styles.css

/default/mytheme/css/theme.css

/default/mytheme/css/extension.css

What I'm trying to achieve: extension's CSS is loaded before theme's CSS.
How can I force this order of CSS files:

/default/mytheme/css/styles.css

/default/mytheme/css/extension.css

/default/mytheme/css/theme.css

I've noticed that if I have many extensions installed, CSS of some extensions loads before theme's CSS and CSS of some other extensions loads after theme's CSS. I assume that it has something to do with the order of modules in Magento, but I don't understand how I can affect the order of CSS (or JavaScript) files on the frontend.

EDIT:

About philwinkle's answer:

but in this case I can't do something like this because it would add layout of the category page to all pages (that CSS file is needed only on category page):

<layout>
    <default>
        <update handle="catalog_category_layered" />
    </default>
    
    <catalog_category_layered>
        <reference name="head">
            <action method="addItem"><type>skin_css</type><name>css/extension.css</name></action>
        </reference>
    </catalog_category_layered>
</layout>

Can this solution be adjusted to my case somehow?

Best Answer

@benmarks has a great approach from this SO thread - though his example is for Javascript it can be adapted for CSS, too:

https://stackoverflow.com/questions/12610949/magento-module-layout-xml-load-order

Another option to try would be to use an directive in your custom module layout XML, as the directives in an are processed before the other directives. This means that jQuery will load before all other files.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <update handle="add_css_first" />
    </default>

    <add_css_first>
        <action method="addCss" block="head">
            <link>css/custom-styles.css</link>
        </action>
    </add_css_first>
</layout>

There are also community modules which exist to allow you to set an explicit sort-order with a rewrite of page/html_head:

https://github.com/drewhunter/ItemPosition

Which allows you to do this sort of customization:

 <reference name="head">
        <action method="setLast">
            <last>css/custom-styles.css</last>
        </action>
 </reference>

Related Solutions

Magento – calling css using layout xml

You have an error in your xml, the <layout> tag at the end should be closed, but I will assume that it's a copy/paste mistake and that is not the problem

Your problem is here:

<default>
    <reference name="root">
        <block type="core/template" name="page_head" output="toHtml" template="page/html/head.phtml" />
        <action method="addCss"><stylesheet>css/normalize.css</stylesheet></action>
    </reference>
</default>

What you are doing is:

Referencing the root block in all pages, adding to it a block of type core/template that is using the page/html/head.phtml as its template.
Calling the addCss method of the page/html block (since the root is of that type if you look in the page.xml layout file)

What you should be doing is referencing the head block as the addCss function is in that one.

Now before answering your main question, I would like to put out a few remarks:

It is my understanding from reading the tutorials that Magento will load the default handle and apply to all the pages in this .xml file.

This is somewhat true, except that anything in the <default> handle, will applied website-wide, not just for pages of that particular layout file.

which class is used to load action method="addCss"? (I have looked in various Mage/Core/Block folders)

If you look at the page.xml file, you can find it. In fact there are 2 methods to add CSS files, addCss and addItem

<block type="page/html_head" name="head" as="head">
    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
    <!-- etc. -->
</block>

From the type of the block, page/html_head, you would be able to figure out that the block is Mage_Page_Block_Html_Head. (It's in the format of module/path)

how do I set up the .xml file to add css to the pages in my module?

Since you need the css to be ONLY in you module's pages, you cannot put it in the <default> handle. As it would be loaded in all pages throughout the website.

But what you can do, is create your own "default" handle, and make all other handles "extend" it.

So using all that info, this is how your XML would look like:^tl;dr

<layout>
    <!-- First we create the default handle that should be applied to all
         of the module pages in this layout file-->
    <user_register>
        <reference name="head">
            <!-- There is no need to reference the root handle, we just
                 reference the head handle and call the addCss method -->
            <action method="addCss"><stylesheet>css/normalize.css</stylesheet></action>             
        </reference>
    </user_register>
    <!-- The next handle will match the BASE_URL/user/register/form path -->
    <user_register_form>
            <!-- This is the tag which "extends" the user_register handle-->
            <update handle="user_register"/>
            <block type="core/template" name="prefcentre_regform" output="toHtml" template="ps/prefcentre/signup.phtml" />
    </user_register_form>
</layout>

where do I need to locate my css for magento to find them?

Since you used css/normalize.css as the path for the CSS file, it should be located at frontend/default/default/css and not inside a subfolder.

Magento – How to load a specific JS at the end of all other included JS files

You can sort the order of skin or js files in layout.xml by using the params element with a name attribute like this answer explains:-

<action method="addJs"><!-- this will be shown second -->
    <script>prototype/javascript1.js</script>
    <params><![CDATA[name="js002_second"]]></params>
</action>
<action method="addJs"><!-- this will be shown first -->
    <script>prototype/javascript2.js</script>
    <params><![CDATA[name="js001_first"]]></params>
</action>

EDIT:

Best Answer

Related Solutions

Magento – calling css using layout xml

Magento – How to load a specific JS at the end of all other included JS files

Related Topic