Magento – Create your own CSS, the standard CSS overruled

Using an existing (Standard-)Template as e.g.. the RWD theme and would like to customize it according to his own ideas CSS, you should really take the styles.css and customize everything you want to have changed.

But if you want anything / as little as possible styles.css working to, e.g. by. to see his changes better future, you can also create your own CSS file and integrate it into the theme with. This is relatively easy ansich.

You open the local.xml in Theme (or creates) from the folder app / design / frontend /[Eigenes Theme]/[Eigenes Theme]/layout and adds the following code

            <action method="addItem">
                <type>skin_css</type>
                <name>css / my-own.css</name>
                <params/>
                <if><![CDATA[<!--[]><!-->]]></if>
            </action>

Now you create naturally own CSS file together with the required name in the directory skin / frontend /[Eigenes Theme]/[Eigenes Theme]/css

Then the CSS adjustments are taken in the theme.

Now, there is the problem, that the default CSS files as the styles.css by the system as a priority be viewed on our own CSS. This is not a problem if you make an adjustment, which is not yet addressed by a CSS file. But if you want an existing definition e.g.. overrule from the styles.css, not working this as.

As Simon Sprankel in his blog post (HERE) declared, this is because, Magento that prefers the CSS files, include a condition.
The other CSS files are e.g.. in the page.xml with a condition such as

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

loaded.

So in order to prioritize their own CSS, one must also deposit a condition – even if there is nothing in this.

The code in the local.xml (if this e.g.. only this involves one thing) then reads

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

For most CSS definitions of the standard CSS files are then overruled by their own CSS. Otherwise helps every now and again “!important” after the definition.

Used in Magento Version 1.9 Comments? Additions? Notes? Gladly!