Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Magento Grundkurs (2012)

Eigene CSS-Datei verwenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Einbinden einer Grafik über eine CSS-Datei gestaltet sich in Magento schwieriger. Dafür ist die Erstellung einer neuen CSS-Datei im eigenen Theme erforderlich, um die Grafik aufrufen zu können.
11:28

Transkript

Sie wissen bereits, wie man Grafiken in Magento austauscht, dabei gibt es allerdings zwei verschiedene Schwierigkeitsstufen. Eine Grafik, die direkt über HTML eingebunden wird, lässt sich in Magento relativ leicht mit Hilfe des Fallback-Models austauschen. Schwieriger sieht es hingegen aus mit Grafiken, die über eine CSS-Datei geladen werden, wie beispielsweise der Hintergrund. Überprüfen wir nun mal mit der Extension "Firebug", wo genau sich diese Grafik im Hintergrund befindet. Ich sehe hier in der CSS-Datei einen Eintrag, und lasse mir diese Grafik nun mal in einem neuen Fenster anzeigen. Und ich sehe hier den korrekten Pfad zu dieser Datei, und versuche sie jetzt mal durch Anlegen einer gleich benannten Datei, in einem gleichen Ordner zu überschreiben. Ich habe mir dazu ein eigenes "Training"-Theme angelegt. Dort gibt es auch einen Ordner "Images". Schauen wir mal im Vergleich, ob der Pfadname bereits passt. Ich befinde mich also im Ordner "Images". Und dort benötige ich eine Datei "bkg.header.jpg". Im Original finden wir diese Datei ebenfalls. Und nun kopiere ich meine vorbereitete eigene Grafikdatei dort hinein, und sorge dafür, dass der Dateiname identisch ist. Beim Aktualisieren des Frontends werde ich feststellen, dass sich nichts getan hat. Nun liegt die Vermutung vielleicht nahe, dass es sich dabei um ein Cache-Problem handelt. Ich könnte also den Cache in meinen Browser deaktivieren. Ich könnte zusätzlich auch das Caching in Magento aktualisieren. Allerdings kann ich Ihnen verraten, dass ich hier nicht viel tun wird. Das Problem ist, dass Grafiken, die über CSS-Dateien eingebunden werden nicht direkt Teil des Fallback-Models sind. Das Problem dabei ist einfach, dass die CSS-Datei zwar Teil des Fallback-Models ist, allerdings die Grafiken einer CSS-Datei immer relativ zur eigentlichen Position der CSS-Datei geladen werden. Wenn wir also nun unsere CSS-Datei anpassen würden, würde auch die Hintergrundgrafik geladen werden. Hier haben wir zwei Möglichkeiten. Einen guten und einen nicht ganz so guten Weg. Die CSS-Dateien in Magento befinden sich im Theme, im Ordner "CSS", und hier gibt es verschiedene CSS-Dateien. Der allerschlechteste Weg wäre die Kopie des kompletten CSS-Ordners, in unser eigenes Theme. Wenn wir nun neu laden, würde auch die Hintergrundgrafik passend geladen, denn die CSS-Datei, die diese Anweisung enthält, ist hier die "styles.css". In der "styles.css" springt die Anweisung einen Ordner nach oben, dann in den Ordner "Images" und sucht dort nach der "bkg.header.jpg". Das Problem ist nun, wenn wir die Änderung nur in der "styles.css" vorgenommen haben, ist es keine gute Idee alle anderen CSS-Dateien mit zu kopieren. Wir sollten diese auf jeden Fall aus unserem Theme raus löschen, um sicher zu stellen, dass zumindest die unbearbeiteten Dateien von Magento aus dem Original-Ordner gezogen werden. Ein besserer Weg ist es, eine eigene CSS-Datei dafür zu verwenden. Um eine eigene CSS-Datei in Magento einbinden zu können, ist allerdings ein kleines bisschen Aufwand notwendig. Dieser Aufwand bezieht sich in erster Linie auf den Bereich "app design frontend". Auch dort finden wir, wie im Bereich "Skin", auf der linken Seite zu sehen, unsere Pakete "base" und "default". Und innerhalb unseres "Default"-Paketes sehen wir einen Großteil der Themes. Warum sehen wir auf der rechten Seite, in unserem App-Design-Bereich, nun kein Theme für "German"? Das liegt einfach daran, dass dort keine Strukturänderung vorgenommen worden sind. Der Bereich "App-Design", den wir auf der rechten Seite sehen, bezieht sich ausschließlich auf Struktur und Funktionalität. Der Bereich "Skin", den wir auf der linken Seite sehen, bezieht sich ausschließlich auf die Darstellung im Frontend, also Grafiken und CSS-Dateien. Wenn nun also in einem Theme keine Strukturänderung notwendig ist, kann man darauf verzichten, diesen Teilbereich anzulegen. Wichtig ist, im Backend haben Sie die Möglichkeit Themes auszuwählen, für bestimmte CMS-Seiten, Artikel oder Kategorien. Diese werden allerdings nur dann angezeigt, wenn auch ein notfalls leerer Ordner hier im Bereich "App-Design" angelegt ist. Wir sorgen nun dafür, dass auch im "App-Design"-Bereich unser "Training"-Theme angelegt wird. Das ist schnell erledigt, durch das Erstellen eines neuen Ordners. Und für das Laden von CSS-Dateien ist ein Dateityp verantwortlich, nämlich die XML-Dateien in Magento, also die Layout-Dateien. Der Einfachheit halber öffne ich nun auf der linken Seite ebenfalls den Bereich "app design frontend", und gehe hier, dem Fallback-Model folgend, zuallererst mal in das "Default"-Paket und das "Default-Theme" und suche dort nach einer Layout-Datei, die für das Laden einer CSS-Datei zuständig ist. Aber unglücklicherweise sehe ich hier keinen Ordner "Layout", das heißt im "Default"-Paket werde ich nicht fündig. Springe also dann in das "Base"-Paket, unsere letzte Bastion des Fallback-Models. Und sehe, hier gibt es einen Ordner "Layout". In diesem Ordner "Layout" sehen wir sehr, sehr viele XML-Dateien, die für verschiedene Funktionalitäten in Magento zuständig sind. Und es gibt auch eine Datei, die für die Grundstruktur unserer Seite verantwortlich ist, das ist die "page.xml". Und genau diese Datei benötige ich jetzt in meinem eigenen Theme, und dazu ist es auch hier wieder wichtig, die gleiche Ordnerstruktur anzulegen. Also innerhalb meines Themes benötige ich einen Ordner "Layout", und in diesem Ordner "Layout" kann ich nun eine eigene Datei anlegen. Damit Magento updatesicher bleibt, und Sie nicht regelmäßig unveränderten Code mit kopieren, möchte ich Ihnen nun einen kleinen Trick zeigen, wie Sie sehr einfach und schnell eine eigene "layout.xml"-Datei in Magento anlegen können. Sie benutzen dazu einen Text-Editor, und den magischen Dateinamen "local.xml". Wechseln wir also zu meinem Texteditor und legen ein neues Textdokument an. Und zum Vergleich, damit wir auch relativ schnell zum Ergebnis kommen, öffne ich noch die "page.xml". Eine XML-Datei in Magento enthält alle Strukturanweisungen in verschiedenen Teilbereichen. Im Detail kann ich jetzt hierauf nicht eingehen, allerdings möchte ich Ihnen ganz kurz den groben Umriss dieser Datei erklären. Es gibt einen Kopfbereich, in dem Magento mitgeteilt wird, dass es sich bei diesem Dokument um ein XML-Dokument handelt. Wir können diesen einfach 1:1 in unser Dokument übernehmen. Und über den ersten Knoten, den wir hier sehen, den Layout-Tag, sagen wir Magento, dass es sich hierbei um eine "layout.xml"-Datei handelt. Es gibt neben den "layout.xml"-Dateien auch "config.xml"-Dateien, diese haben dann als "Root"-Element, also als Hauptknoten, "config" stehen. So, was kommt nun in diesen Layout-Bereich hinein? Die nächste Zeile, die wir hierfür brauchen, ist unser sogenannter "Layout-Handle". Wir übernehmen den einfach 1:1, so wie er auch in der Originaldatei vorkommt. Und nun sehen wir uns einmal ganz kurz den Bereich in der "page.xml" an, mit dem die CSS-Dateien geladen werden. Es handelt sich dabei um diesen Abschnitt hier, und wir können schon sehen, die "styles.css" wird hier, in dieser Methode aufgerufen. Das Aufrufen einer "action", Sie sehen das hier, anhand des Tag-Namens "Action", ist nicht ohne weiteres direkt möglich. Wir brauchen dazu einen dazugehörigen Block, und unser Block, der dafür verantwortlich ist, die CSS-Dateien zu laden, ist der "head"-Block. Also beziehe ich mich in meiner eigenen Datei auf den Block "head". Und kann innerhalb dieses Blocks nun definieren, welche Datei geladen werden soll. Nachdem wir nicht die "styles.css" laden möchten, denn die wird ja bereits von Magento geladen, können wir unseren eigenen CSS-Namen vorgeben. Und meine Datei soll heißen "training.css". Das ist auch schon die ganze Magie hinter dem Laden einer CSS-Datei. Das heißt, die Datei die wir jetzt hier erstellt haben, können wir so speichern. Dazu gehe ich jetzt in meinen Magento-Ordner unter "app design frontend". Dann haben wir uns im "Default-"Paket ein "Training"-Theme angelegt. Mit dem Unterordner "Layout", in welchem wir nun die "local.xml" ablegen. Magento sucht automatisch in jedem Theme nach dieser "local.xml", und führt diese ganz zum Schluss aus. Das heißt, unsere CSS-Datei wird nun auch ganz zum Schluss, im "Head"-Bereich unserer Seite eingebunden. Wenn ich das Frontend aktualisiere und mir dann den Quelltext anschaue, sehe ich, dass Magento hier versucht unsere Datei zu laden. Nachdem wir aber diese Datei noch nicht angelegt haben, können wir auch sehen, dass Magento automatisch, aufgrund des Fallback-Models in das "Base"-Package und das "Default Theme" zurück fällt. Dann ist also der nächste Schritt das Anlegen unserer CSS-Datei, und auch das können wir hier im Editor tun. Und der einfachste Weg um heraus zu finden, wie genau der CSS-Aufruf lautet, um hier den Hintergrund zu setzen, geht über den "Firebug". Wir haben hier unseren Header-Container. Und in der rechten Spalte sehe ich hier die Befehlskette in CSS, mit der ich die Hintergrundgrafik setze. Und ich kopiere mir diese jetzt einfach 1:1 in meine leere CSS-Datei. Ich kann dabei den kompletten Aufruf so belassen, wie er ist, denn wir haben ja eine Datei angelegt, im gleichen Ordner, wie hier auch angegeben, also "Images" mit dem gleichen Dateinamen, wie die Originaldatei. Das heißt, ich speichere hier einfach die Information, gehe dann in meinen Ordner "skin frontend default", und dort in meine "Training"-Theme. Und in einem neuen Ordner "CSS" lege ich mir nun eine Datei an, mit dem Namen "training.css". Wenn wir jetzt das Frontend neu laden, sehen wir das Magento nicht nur unsere CSS-Datei, sondern auch die neue Grafik gefunden hat. Auf diese Weise ist es sehr einfach eigene CSS-Anweisungen in Magento zu implementieren, ohne das Sie bestehende Dateien überschreiben müssen. Sie haben in diesem Video gesehen, dass es durchaus möglich ist Dateien zu überschreiben, in dem Sie einfach den gleichen Dateinamen und die gleiche Ordnerstruktur verwenden. Mit dieser Art und Weise der Gestaltung in Magento könnten Sie also auch zum Ergebnis kommen. Das Problem ist allerdings, wenn Sie eine Datei, wie die "styles.css", die mit fast 100 Kilobyte doch sehr umfangreich ist, nur deswegen kopieren, damit sie dort eine einzige Code-Zeile verändern können, dann bedeutet das bei einem Update von Magento, dass Sie alle anderen Code-Zeilen zusätzlich händisch überprüfen müssen, ob sich dort eine Änderung ergeben hat. Die wichtigste Lektion aus diesem Video sollte Ihnen also sein, dass Sie ausschließlich die Dateien in Ihr eigenes Theme kopieren, die Sie wirklich bearbeiten möchten. Und das Sie keine kompletten CSS-Dateien kopieren sollten, sondern lieber über den Weg der "local.xml" eine eigene CSS-Datei mit in den Aufruf der Seite einbauen, um dort gezielt die Veränderungen vorzunehmen, die Sie an Ihrem Frontend vornehmen möchten. Ganz wichtig ist auch, dass Sie niemals Dateien im "Base"-Package, im Bereich "app design frontend", und hier im "Base"-Package, dass Sie dort niemals Änderungen vornehmen. Eine Änderung oder das Löschen einer Datei im "Base"-Package sorgt dafür, dass im Frontend ein Fehler entstehen wird.

Magento Grundkurs (2012)

Lernen Sie als Einsteiger in die E-Commerce-Plattform Magento die Grundlagen kennen und lassen Sie sich als versierter Anwender neue Möglichkeiten und wichtige Tricks erklären.

10 Std. 14 min (135 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!