3

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?

9

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.

  • I appreciate your answer! I am finally starting to get the hang of the local.xml file. For completeness, jQuery did work with the code in my answer. – Raphael Rafatpanah Apr 19 '13 at 12:26
  • 1
    Maybe my answer was not clear. In my answer I was referring to the code in your question. Hope you have it all working by now. – Mark van der Sanden Apr 19 '13 at 13:22
3

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.

  • Thank you! I think what I will do is keep it the way I have for now, and before production, combine everything into styles.css. But +1 since this may come in handy to use styles.min.css instead. – Raphael Rafatpanah Apr 18 '13 at 15:51
  • @zitix This works, but why do we have to rename it to get it to work??? – Justin Oct 23 '14 at 20:42
  • @Justin Because you remove the original styles.css, so you need to use some other name for your own file. – zitix Oct 26 '14 at 16:55
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.