Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Magento custom css overridden by parent css - using local.xml

Tags:

css

themes

magento

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 Magento 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, my 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 cancelled 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]-->
like image 369
aDvo Avatar asked Feb 12 '23 08:02

aDvo

2 Answers

Magento will process local.xml file after processing every layout files. So if you want to extend something or need to remove something, local.xml file can be used.

Normally the css files that are included through layout.xml will load at last. Suppose you are trying to load different css files through different layout files. See the demo

LAYOUT FILE         STYLE NAME          HANDLER USED
-----------------------------------------------------
layout1.xml     =>  style1.css      =>  default
                =>  style2.css      =>  cms_page

layout2.xml     =>  style3.css      =>  default

layout3.xml     =>  style4.xml      =>  default
                =>  style5.xml      =>  cms_page


local.xml       =>  style6.xml      =>  default

Note: layout files are shown in the loaded order in Magento.

Here as you can see local.xml file is loaded at last. But it adds style6.css using a handler default. Please note that some of other layout files that are loaded above local.xml file also uses some other handlers. Here layout3.xml and layout1.xml uses cms_page handler to add some css files. Of course those css files only going to load when a cms page is used.

So suppose we loaded a page that uses cms page inside it. Example is home page of Magento. So the order of layout handles there for

ORDER OF LAYOUT HANDLE INVOKES
----------------------------------
        default
        cms_page

Note: Ignores other layout handlers that are using to load 
      home page of magento for the sake of simplicity

Due to this, for the above depicted scenario, styles will loaded in this format

ORDER OF STYLES LOADING
------------------------
style1.css
style3.css
style4.css

style6.css (style that we added through local.xml)

style2.css
style5.css

Why this order

Magento first consider default handler. Then it will add css files that are specified under default handler from layout files. Layout files will be processed in the order they are loaded. After loaded all css files that are added through default handler, magento now consider cms_page handler and the process continues. So in our case, above css file order will generate and will load them in that order.

Specific to this problem

Here it seems that styles.css is added after your css file. This will not happen normally. That is because styles.css is added via page.xml file and through default handler. So it will loaded first before your css file loaded. So there must some wierd thing happens in your case for sure.

Special NOte: You dont want use this code 

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

in your local.xml file. This is enough

<?xml version="1.0"?>
<layout>
    <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <file>css/wc_styles.css</file>
        </action>
    </reference>
    </default>
</layout>
like image 128
Rajeev K Tomy Avatar answered Feb 14 '23 21:02

Rajeev K Tomy

The problem lies with how Magento's RWD theme in 1.9 adds stylesheets: using conditional comments.

<action method="addItem">
    <type>skin_css</type>
    <name>css/madisonisland.css</name>
    <params/>
    <if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if> <!-- SEE THIS? -->
</action>

It turns out Magento inserts stylesheets that don't have conditional comments first.

So, long story short, a way to overcome this is to use "empty" conditional comments:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <name>css/tweaks.css</name>
                <params/>
                <if><![CDATA[<!--[]><!-->]]></if>
            </action>
        </reference>
    </default>
</layout>

Simon Sprankel wrote an in-depth article about this specific issue here: http://www.coderblog.de/magento-1-9-infinite-theme-inheritance-child-css-not-rendered-last/

like image 23
jmlnik Avatar answered Feb 14 '23 22:02

jmlnik

Sign in to Comment

Related questions

Set a line break in justified text, and still have it justify
Wordpress: CSS keeping menu item active when inside child pages

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!