css-Datei Verständnisfrage

Hallo, ich arbeite nun schon einige Tage mit Shopware v4 und bin wirklich begeistert. Nun arbeite ich mich durch verschiedene Tutorials und habe z.B. das Menü verschoben etc. Nun bin ich gerade dabei einige Sachen in den CSS-Dateien zu ändern. Dabei arbeite ich mit FireBug. Ich suche mir dann die Klasse raus und kann ja auch sehen in welcher Datei diese festgelegt wurde. Wie gestalte ich meine Änderungen nun Updatesicher ? z.B. die Klasse “#mainNavigation” wird in der Datei /templates/\_emotion/frontend/\_resources/styles/emotion.css festgelegt. Wie kann ich nun diese Klasse am besten ändern ? Ich habe eine eigene Ordnerstruktur und eine eigene CSS-Dateien unter /templates/emotion\_timeagent/frontend/\_resources/styles/emotion\_timeagent.css Soll ich die Klasse nun in meine CSS-Datei kopieren ? Oder kann ich sie einfach in der Datei unter /templates/\_emotion/frontend/\_resources/styles ändern ohne das es beim Update überschrieben/geändert wird ?

Hallo, wenn es Updatesicher sein soll, dann unbedingt die Änderungen in deiner CSS vornehmen. Also einfach die gewünschten ID’s / Klassen … in deine CSS einfügen und dort die Änderungen hinzufügen. zB.: #mainNavigation {color:#000} Da du mit Firebug arbeitest, kannst du die Klasse einfach rauskopieren. Gruß Manuel

1 „Gefällt mir“

Danke für deine Antwort :slight_smile: Ich habe es bisher so gemacht das ich immer alles kopiert habe und es dann einfach geändert habe. Muss ich es kopieren oder ausschneiden sprich in der eigentlichen Datei noch löschen ? Was passiert nun wenn es ein Update gibt ? Wird dann die CSS-Datei überschrieben ? Dann wäre ja alles von mir gelöschte und kopierte wieder da oder ? Wie verhält sich Shopware dann ?

Die bestehenden CSS-Dateien brauchst du nicht verändern. Dadurch das deine CSS nach den Anderen geladen wird, werden deine Einträge vorrangig verwendet. Kann man mit Firebug ganz schön erkennen, welche CSS-Datei verwendet wird. Nochmal ein Beispiel für dich: emotion.css hat folgenden Eintrag: .container_20 {background-color: #fff; border-color: #fff;margin-top: 0;} Jetzt möchtest du zB. eine andere Hintergrundfarbe, dann fügst du in deiner emotion_timeagent.css einfach folgendes ein: .container_20 {background-color: #000;} Gruß Manuel

Okay das habe ich mir fast so gedacht :wink: Dann sollte das alles kein Problem sein und die Änderungen sollten dann auch bei Updates übernommen werden. Wie verhält sich das mit Änderungen in den tpl-Dateien ? Die Sachen die ich ändere mache ich ja in meinen eigenen Dateien z.B. Suche ausbauen usw. das sollte dann auch bei Updates nicht „zerstört“ werden oder ? Ich frage einfach nur um das ganze genau zu verstehen ich habe leider am Anfang meiner „Shop-Karriere“ den Fehler gemacht und bei Gambio etc. immer alles angepasst und nach Updates war dann alles weg :smiley: Das will ich nun natürlich vermeiden.

Mit den .tpl ist genau so wie mit dem .css. Du kopierst die leeren Ordner aus dem emotion orange template in dein eigenes. Und dann legst du dort dein eigenes .tpl an oder du kopierst auch das .tpl und änderst es. Das hängt davon ab wieviele Änderungen du hast. Was du vermutlich brauchst ist der home/index.tpl wenn du die Startseite(alles unter dem header von der Struktur her ändern willst. Alles was du in deinem Template hast wird nur von dir selbst überschrieben, gelöscht,falsch gemacht,… Bei den .tpl brauchst du eine Überschriftszeile damit sie verwendet werden. Extends Original.tpl Pfad… Findet sich im Tutorial was da genau stehen muss. Ich hab übrigens alle wichtigen Änderungen die ich gemacht habe nochmal extra dokumentiert um es auch in 2 Jahren noch nachbauen zu können.

Okay ich schiebe die .tpl-Dateien nun immer komplett in meine leere Struktur und passe dann die Sachen einfach an. Was ist nun mit dieser Sache {extends file='parent:frontend/detail/data.tpl'} Das brauche ich doch nur wenn ich z.B. nur 1 Block oder so ausblenden will oder ? Wenn ich die komplette Datei übernehme und einige Sachen ausschneide dann brauche ich diesen „Tag“ nicht nutzen oder ? Das mit den Blöcken habe ich eingentlich verstanden. Was aber wenn davor ein div ist ? Wie mache ich es dann ? Das war der eigentliche Grund waurm ich immer die komplette Datei übernehme und es dann dort einfach ändere. Kann man doch so auch machen oder laufe ich dann Gefahr das ein Update etwas zerstört ?

ich denke du brauchst sie immer weil sie einfach sagt wo sie dazu gehört.

Bei einigen Dateien funktioniert es aber auch ohne diesen “Tag” deswegen binnich etwas verwirrt :smiley: