Magento – How to override custom css by parent css using local.xml

cssmagento-1.9themexml

I have a simple local.xml that attempts to include a custom wc_styles.css in my head block, to apply for all pages in my site.

<?xml version="1.0"?>
<layout>
    <default>

    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <file>css/wc_styles.css</file>
        </action>

        <action method="addCss"><stylesheet>css/wc_styles.css</stylesheet></action>

    </reference>


    </default>
</layout>

When viewing the source of my website, wc_styles.css is being included above all the parent themes css files (all within the HTML head tag), so my custom css rules get canceled out basically.

What is the proper way of getting a custom css to work?

Edit Note:

I'm merely trying to make look & feel changes to the Magento 1.9 RWD theme.
I've created the folders for my subtheme at

\app\design\frontend\wc\default

\skin\frontend\wc\default

My local.xml is placed at:

\app\design\frontend\warecompare\default\layout

My wc_styles.css is placed at:

\skin\frontend\warecompare\default\css

This is what the source code of my site looks like where u see my wc_styles.css appearing above the parents styles.css

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://localhost/mg1/js/blank.html';
    var BLANK_IMG = 'http://localhost/mg1/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/base/default/css/et_advancedcompare/noreload.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/wc/default/css/wc_styles.css" media="all" />
<!-- big heap of javascript includes here-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600" />
<!--[if  (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles-ie8.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland-ie8.css" media="all" />
<![endif]-->
<!--[if (gte IE 9) | (IEMobile)]><!-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland.css" media="all" />
<!--<![endif]-->

Note:
I actually have this as a duplicate question on StackOverflow before realizing that there as a Magento subdomain of StackExchange to ask this question on. Not sure how to delete the original question
https://stackoverflow.com/questions/25156808/magento-custom-css-overridden-by-parent-css-using-local-xml

Best Answer

Why do you think your css is not working? Remember, there are styles given by RWDs stylesheet. So, if RWDs CSS tells

a {
color:red;
}

A link is red. If your CSS says (nearly) the same the browser will be confused.

a {
color:green;
}

Now 2 css are written for the same thing. So overwrite or redefine:

a {
color:green !important;
}

#id a {
color:green;
}

Ok?

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 – Magento 1.9 https ERR_TOO_MANY_REDIRECTS

The problem was the load balancer

Best Answer

Related Solutions

Magento – calling css using layout xml

Magento – Magento 1.9 https ERR_TOO_MANY_REDIRECTS

Related Topic