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!
