4

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

Improve this question

3 Answers 3

Reset to default
2

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?

Improve this answer
2
  • 2
    this is so wrong, you can't even do worse than this.
    – pankijs
    Mar 27, 2015 at 21:34
  • What is your solution?
    – TonkBerlin
    Oct 24, 2017 at 17:21
0

I would simply go to layout/page.xml file and add following code at the end of the head block:

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

Hope this helps.

Improve this answer
0

if you want to RWD theme be your parent theme you need to create a theme.xml file under app/design/frontend/theme/package/etc with content

<?xml version="1.0"?>
<theme>
    <parent>rwd/default</parent>
</theme>

otherwise I usually just copy all skin content from RWD theme to my new theme, so I edit stylesheet directly not rewrite it which results in huge amount of useless rewritten code.

please note, if you copy skin content, you still need a theme.xml because of you still want default fallback to RWD phtml files.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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