Wie du Hintergrund- und Schriftfarbe im Footer änderst

Marc Baur 25. April 2017 4

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

all.less
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

Marc Baur

Marc Baur ist Mitgründer & CEO der 8mylez GmbH.

4 Kommentare

Melanie Windgassen

28. September 2018 um 10:33 Uhr

Kann man eigentlich auch die Reihenfolge der Spalten ändern?

Antworten
Ewald Gering

30. Oktober 2018 um 15:07 Uhr

Hey Melanie,

ja das ist möglich, allerdings müsste man dafür die Struktur in der Template Datei anpassen.

Viele Grüße
Ewald
Nancy

25. Februar 2018 um 09:57 Uhr

Tolle Videos. Leider kommt bei mir selbst wenn ich alles 1 zu 1 übernehme eine Fehlermeldung :( Während der Bearbeitung von Shop "XXX" ist ein Fehler aufgetreten: error evaluating function `rgba` color functions take numbers as parameters index: 981

Antworten
Alexander Wolf

10. März 2018 um 22:44 Uhr

Hey Nancy,

vielen Dank!

Hast du bei dir rgba für die Farbe benutzt?

Gruß
Alexander