How to Change Order of Stylesheets and JS in Magento and Add Multiple CSS/JS Files

Question

After using local.xml to add stylesheets and js like so:

<?xml version="1.0"?>
<layout>
<default>
    <reference name="head">
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
                </text>
            </action>
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="//css.cdn.tl/normalize.css">]]>
                </text>
            </action>
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">]]>
                </text>
            </action>
        </block>
            <action method="addItem">
                <type>skin_css</type>
                <name>css/bootstrap.css</name>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <name>css/layout.css</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/script.js</name>
            </action>
    </reference>
</default>
</layout>

I find several problems.

1. In the "Block" portion of the code, only the last action is used. Why does that happen?

2. On the page source, my default styles.css is inserted before my other css files. I was hoping to have style.css be the last css file on my page. How to fix this issue?

3. My jQuery is loaded after my default script.js. How can the order be reversed?

Answer 1

I'll try to answer all of your 3 questions.

1. In the "Block" portion of the code, only the last action is used. Why does that happen?
I don't think that only the last action is used. They are all being called. See it as $a = 1; $a = 2; $a = 3;. $a will be 3 after these 3 commands. You should add a separate block for each CSS file and call setText() on it to make this work (you already did that in your own answer).

2. On the page source, my default styles.css is inserted before my other css files. I was hoping to have styles.css be the last css file on my page. How to fix this issue?
I know this question has been answered before, but the solution can even be easier. You can remove your styles.css and then add it again in your local.xml. Be sure to do that after all other css files have been added:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <!-- ... add your other css files ... -->
            <action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
        </reference>
    </default>
</layout>

3. My jQuery is loaded after my default script.js. How can the order be reversed?
I think jQuery (from googleapis.com) does not get loaded at all in your current code :) But if you want to move jQuery to top, you should make sure that it's in the top of your local.xml.

Answer 2

Try to remove default styles.css with this:

<action method="removeItem">
    <type>skin_css</type>
    <name>css/styles.css</name>
</action>

Then rename your styles.css to styles2.css and add it in your local.xml again like this:

<action method="addItem">
    <type>skin_css</type>
    <name>css/styles2.css</name>
</action>

Should work.

Answer 3

This is what I did to get it to work. Later, for production, I will merge all CSS files to styles.css.

Now the files are called in the correct order. The only downside is that styles.css is listed twice.

This file is the local.xml: app/design/frontend/yourpackage/default/layout/local.xml

<?xml version="1.0"?>
<layout>
<default>
    <reference name="head">
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
                </text>
            </action>
        </block>
        <block type="core/text" name="normalize.cdn.css">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="http://css.cdn.tl/normalize.css">]]>
                </text>
            </action>
        </block>
        <block type="core/text" name="bootstrap.cdn.css">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">]]>
                </text>
            </action>
        </block>
        <block type="core/text" name="bootstrap.custom.css">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/bootstrap.css">]]>
                </text>
            </action>
        </block>
        <block type="core/text" name="layout.custom.css">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/layout.css">]]>
                </text>
            </action>
        </block>
        <block type="core/text" name="css.custom.css">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/styles.css">]]>
                </text>
            </action>
        </block>
        <block type="core/text" name="javascript.custom.js">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" src="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/js/script.js">]]>
                </text>
            </action>
        </block>
    </reference>
</default>
</layout>

I hope this helps someone!