Magento – Eigene CSS erstellen, die Standard-CSS überstimmt

Verwendet man ein bestehendes (Standard-)Template wie z.B. das RWD Theme und möchte dies nach seinen eigenen CSS-Vorstellungen anpassen, müsste man eigentlich die styles.css nehmen und alles anpassen was man geändert haben will.

Möchte man aber nichts / so wenig wie möglich an der styles.css arbeiten, um z.B. zukünftig seine Änderungen besser sehen zu können, kann man auch eine eigene CSS-Datei erstellen und diese in das Theme mit einbinden. Dies ist ansich relativ einfach.

Man öffnet die local.xml im Theme (oder erstellt sie) aus dem Ordner app/design/frontend/[Eigenes Theme]/[Eigenes Theme]/layout und fügt folgenden Code ein

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

Nun erstellt man natürlich noch eine eigene CSS-Datei mit dem gewünschen Namen im Verzeichnis skin/frontend/[Eigenes Theme]/[Eigenes Theme]/css

Anschließend werden die CSS-Anpassungen im Theme übernommen.

Nun gibt es aber das Problem, dass die Standard-CSS-Dateien wie die styles.css vom System als vorrangig vor der eigenen CSS angesehen werden. Dies ist kein Problem wenn man eine Anpassung macht, die bislang nicht von einer CSS-Datei angesprochen wird. Möchte man aber eine schon vorhandene Definition z.B. aus der styles.css überstimmen, funktioniert dies so nicht.

Wie Simon Sprankel in seinem Blog-Beitrag (HIER) erklärt, liegt dies daran, dass Magento die CSS-Dateien bevorzugt, die eine Bedingung enthalten.
Die anderen CSS-Dateien werden z.B. in der page.xml mit einer Bedingung wie

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

geladen.

Um also die eigene CSS zu priorisieren, muss man ebenfalls eine Bedingung hinterlegen – auch wenn in dieser nichts steht.

Der Code in der local.xml (wenn diese z.B. nur diese eine Sache beinhaltet) lautet dann

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

Damit werden dann die meisten CSS-Definitionen der Standard-CSS-Dateien von der eigenen CSS überstimmt. Ansonsten hilft immer mal wieder ein “!important” hinter der Definition.

Genutzt in Magento Version 1.9 Kommentare? Ergänzungen? Hinweise? Gerne!

Published by Covos

Seit 2009 arbeite ich nun intensiv mit Magento. Begonnen habe ich mit der Erstellung und dem Betrieb von B2C-Shops. Ausgeweitet wurde dies durch meine Tätigkeit im Logistik-Sektor. Hieraus entstanden erste spezialisierte B2E-Systeme. Heute arbeite ich tag-täglich mit spannenden B2C-, B2B- und B2E-Projekten und berichte in diesem Blog über Herausforderungen und gebe Insider-Tipps.

Leave a Reply

Your email address will not be published. Required fields are marked *