Geek Answers Handbook

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

I have a simple local.xml file that is trying to include a custom wc_styles.css file in my head block, to apply to all pages of 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 included above all the parent themes of the css files (all in the html head tag), so my custom css rules are basically canceled.

What is the correct way to make custom css work?

Note: I'm just trying to change the look of Magento 1.9 RWD. I created folders for my subtopic in

\ apps \ design \ frontend \ toilet \ default

\ skin \ frontend \ toilet \ default

My local.xml is located at: \ Application \ Design \ Interface \ warecompare \ Default \ Layout

wc_styles.css \ \\warecompare\\CSS

, wc_styles.css, 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]-->
+4
2

Magento local.xml . , - - , local.xml.

css, layout.xml, , . , css . .

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.

, , local.xml . style6.css default. , , local.xml, . layout3.xml layout1.xml cms_page css. , css cms.

, , , cms-. - Magento. ,

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


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

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

style2.css
style5.css

Magento default. css, default . , . css, default, magento cms_page, . , , css .

, styles.css css. . , styles.css page.xml default. css. - .

NOte:

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

local.xml.

<?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>
+6

, Magento RWD 1.9 : .

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

, Magento , .

, , - "" :

<?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>

: http://www.coderblog.de/magento-1-9-infinite-theme-inheritance-child-css-not-rendered-last/

+1

More articles:


All Articles