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]-->
Best Answer
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 demoHere as you can see
local.xml
file is loaded at last. But it addsstyle6.css
using a handlerdefault
. Please note that some of other layout files that are loaded abovelocal.xml
file also uses some other handlers. Herelayout3.xml
andlayout1.xml
usescms_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
Due to this, for the above depicted scenario, styles will loaded in this format
Why this order
Magento first consider
default
handler. Then it will add css files that are specified underdefault
handler from layout files. Layout files will be processed in the order they are loaded. After loaded all css files that are added throughdefault
handler, magento now considercms_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 becausestyles.css
is added viapage.xml
file and throughdefault
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
in your local.xml file. This is enough