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

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

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

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.