Wie du Hintergrund- und Schriftfarbe im Footer änderst

Heute schauen wir uns an, wie Du ganz einfach die Farbe des Footers (Hintergrund) in Deinem Shopware Shop ändern kannst. Solltest Du eine dunkle Farbe wählen, wird die Schrift unleserlich, deshalb schauen wir uns auch gleich an, wie Du die Schriftfarbe und die Farben der Links ändern kannst.

Hintergrundfarbe im Footer ändern

Dazu verwenden wir LESS und benötigen im Grunde nur 2 Dateien

1. all.less
   
2. footer.less
   

Sollten Dir diese beiden Dateien nichts sagen, dann musst Du sie höchstwahrscheinlich erst noch anlegen, aber das ist wirklich ein Kinderspiel.

Damit Deine Struktur sauber bleibt, empfehlen wir Dir (falls nicht schon getan) ein eigenes Theme zu erstellen. Dieses sollte vom Responsive Theme ableiten. 

Nun legen wir die relevante footer.less unter folgendem Pfad an:

/themes/Frontend/DEINTEMPLATENAME/frontend/_public/src/less/_modules/

In diese Datei schreiben wir folgende LESS Befehle um die Hintergrundfarbe in ein helles Schwarz (#1C1C1C) zu färben:

.footer-main{
  background: #1C1C1C;
  
.container{
  background: #1C1C1C;
 }
} 

Da der Footer bei Shopware aus einem äußeren und einem inneren Teil besteht, müssen wir hier zwei Werte setzen. Der ".container" steht für den inneren Teil.

Schriftfarbe im Footer ändern

Wenn wir jetzt noch sämtliche Schriften umfärben wollen, ergänzt sich der Code um folgende Punkte und sieht letztlich so aus:

.footer-main{
  background: #1C1C1C;
  color: #fff;

 .container{
   background: #1C1C1C;
 }

 .footer--phone-link{
   color: #fff;
 }

 .navigation--link{
   color: #fff;
 }
}

Die Schriftfarbe sollte nun bei den angegebenen Parametern in weiß (#fff) erscheinen. Damit die Änderungen wirksam bzw. sichtbar werden, müssen wir noch die all.less Datei in folgendem Verzeichnis hinterlegen:

/themes/Frontend/DEINTEMPLATENAME/frontend/_public/src/less/

In diese Datei müssen wir eine Import Funktion schreiben, damit der Code in der footer.less auch wirklich im Shop verarbeitet wird - sonst bleibt er gänzlich unbeachtet. Diese Funktion sieht folgendermaßen aus:

@import "_modules/footer";

Theoretisch müsste es der Logik halber

@import "_modules/footer.less";

heißen, aber das ".less" wird nicht benötigt und da wir faul sind, lassen wir es einfach weg :-)

Wenn Du das Ganze noch einmal von unserem Alexander auf YouTube erklärt bekommen möchtest, dann schau Dir doch folgendes Video an. Danach sollten dann keine Fragen mehr offen bleiben - und wenn doch, dann lass gerne von Dir hören!

Weitere Links

• Realisiert mit Shopware entfernen
• Shopware Rechnung anpassen
• Shopware E-Mail Template
• Shopware Merkzettel deaktivieren
• Shopware Listing Layout