Wie du Hintergrund- und Schriftfarbe im Footer änderst

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

  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

4 Kommentare

  • Kann man eigentlich auch die Reihenfolge der Spalten ändern?
  • Hey Melanie,

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

    Viele Grüße
    Ewald
  • 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
  • Hey Nancy,

    vielen Dank!

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

    Gruß
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz