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!

Facebooktwitterredditpinterestlinkedinmailby feather
Dieser Beitrag wurde unter Magento Design veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

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