Wie du Hintergrund- und Schriftfarbe im Footer änderst

Wie du Hintergrund- und Schriftfarbe im Footer änderst

Marc Baur 25. April 2017 0

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!


Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare, sei jetzt der erste! ;)

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
© 2017 by 8mylez. Powered by Goltfisch GmbH.