Farbe für Header, Navileiste, Footer und Background anpassen (für Newbies)

Hallöchen Gemeinde,

ich habe mir mal kurz die Arbeit gemacht, eine kleine Schnellanleitung zum Anpassen aller Hintergrundfarben beim SW Responsive Theme zu machen. Ganz einfach und kinderleicht, also ideal für alle Newbies wie mich :slight_smile: (Updatesicher im eigenen Theme)

 

Voraussetzung bei mir: SW 5.2.8 und cpanel (geht natürlich auch bei den anderen SW5 Versionen)

 

  1. Lege ein eigenes Theme im Backend über den Thememanager an

  2. Gehe im cpanel auf Dateiverwaltung:

public_html > Themes > Frontend > Dein-eigenes-Theme > Frontend > _public > src > less > _modules

Der Ordner ist hier leer. Oben im cpanel steht der Button „+Datei“. Da geht man drauf und erstellt diese 3 Dateien:

footer.less

header.less

main-navigation.less

  1. In die Datei footer.less kopiert man folgenden Code (Dateien vorher mit Codeeditor öffnen):

.footer-main {
background:#ecf9bc;
.container {
background:transparent;
}
}

  1. In die Datei header.less kopiert man diesen Code:

.header-main {
background:#e2f597;
.container {
background:transparent;
}
}

  1. In die Datei main-navigation.less kopiert man diesen Code:

.navigation-main {
background:#f6fcdc;
.container {
background:transparent;
}
}

Die 3 Farben für Footer, Header und Navi kann man hinter dem # Zeichen dann selber nach Wunsch eintragen

  1. Dann geht ihr im cpanel eine Ebene nach oben wo die Ordner _components, _mixins, _modules und _variables stehen.

Dort erstellt ihr diese Datei wieder mit „+Datei“ im cpanel:

all.less

  1. In die Datei all.less kopiert ihr:

@import „_modules/header“;
@import „_modules/footer“;
@import „_modules/main-navigation“;

  1. Im cpanel ist man nun fertig und hat alle Dateien im eigenen Theme angelegt, damit das Ganze auch updatesicher ist. :slight_smile:

  2. Die Farbe für den mittleren Hintergrund (Body Background) stellt Ihr im Thememanager unter der

Farbkonfiguration > Allgemein > Grundgerüst > @body-bg​ ein. Dort könnt Ihr auch direkt den Farbcode z.B. #FFFFFF eingeben.

Somit kann man alle 4 Hintergrundfarben innerhalb von ein paar Minuten nach Geschmack einstellen.

Nach jeder Änderung einer Farbe immer unter Einstellungen > Caches/Performance > Cache > alle auswählen > leeren

den ganzen Cache leeren, da somit auch die Themes neu kompiliert werden. Wenn Ihr die Änderungen dann im Browser sehen wollt, immer im Browser mit Strg F5 den Cache leeren.

  1. Nette Tools die ich gefunden habe, damit die Farben auch einigermaßen stimmig sind:

http: //paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF (die Farbcodes kann man direkt ablesen, wenn man mit dem Mauspfeil drüberfährt)

http: //colorblender.com/

 

Ich hoffe damit kann der eine oder andere beim Start mit dem tollen Shopware Shop was anfangen. :slight_smile:

Schade dass man diese eigentlich doch wichtigen Farben nicht direkt im Thememanager unter der Farbkonfiguration mit einstellen kann. Diese gehören meiner Meinung nach schon auch zum „Grundgerüst“ dazu. Genauso gut könnten da auch Auswahlfelder für Hintergrundbilder sein. Somit hätte man bereits im Standard maximalen Gestaltungsspielraum per Knopfdruck.

Viele Grüße

Matthias

 

 

 

 

1 Like

Tolle Anleitung!!! Danke !!! Wenn alles hier im Forum so gut verständlich wäre.

Bei mir habe ich jetzt nur noch ein Problem was ich noch nicht lösen konnte ind er Main Navigation. 

Der Schwarze Kasten … 

Ist da nicht normal der HOME Button?

Bisschen klein das Bild um mitreden zu können. :slight_smile:

Viele Grüße

Matthias

 

super anleitung :wink: leider habe ich da ein Problem. Wenn ich die Dateien anlage wie beschrieben kann ich danach mein Theme nicht mehr kompelieren. Hast du evtl. eine Idee was das sein könnte?

selbst wenn ich die originalen dateien unverändert nehme kann ich nicht kompelieren

Wo hast du kompiliert?

Im thememanager? oder unter caches performance alle auswählen?

Gruss

Matthias

 

http://community.shopware.com/files/downloads/stylecheatsheet-18088588.pdf  Sehr hilfreich. Am bester quer ausdrucken sonst ist die Schrift arg winzig.

Leider stimmt das überhaupt nicht. Tabellenhintergrundfarbe finde ich unter Buttons und Panels. Aber nur die inneren. Und auf der Listingseite gilt das wieder nicht mehr. Chaos.

Das hat aber nichts mit meiner Anleitung zu den Hintergrundfarben hier zu tun.

Gruss

Matthias

 

Haben die Tabellen (eigentlich sind es ja blöcke) keine Hintergrundfarbe?

Meinst du die Tabellen für Eigenschaften?

Keine Ahnung was die mit den Begriffen meinen. Unter Tables @table-row-bg sollte man hintergrundfarbe der Tabellen (Blöcke) vermuten. Trifft aber nicht ganz zu.
Einige Hintergrundfarben für Tabellenhintergrundfarbe (Blöcke) verstecken sich komischerweise hinter dem Reiter Buttons. Habe etwas rumprobiert um herauszubekommen was sich ändert. Das ständige rendern nervt dabei. Wenn ich es wüßte würde ich einen Screenshot davon machen und die entsprechenden Stellen mit Pfeilen und der Bezeichnung im Backend versehen. Würde sicher manchen Einsteiger eine große Hilfe sein.

Hi Malzfos, 

danke für die Anleitung. Hat Super funktioniert, nur wie ändere Ich nur die Textfarbe von der Navigation? Ich möchte die Leiste Schwarz haben und der Text ist schwarz.

Ich hoffe du hast eine Lösung? Danke 

Das kann man glaube ich entweder global im Thememanager einstellen oder dann einzeln für obere Navi in der gleichen Less Datei wo du bereits den Hintergrund definiert hast. Am Besten schaust du dir die originale Less Datei an. Änderungen brauchst du dann lediglich in deine eigene Less Datei die du schon angelegt hast einfügen.

Dabei sind 3 Farben die eine Rolle spielen. Die aktive Farbe wie in deinem Bild „Home“, und die inaktive Farbe wie dieses sehr dunkle grau und die Hover Effekt Farbe wenn du mit der Maus drauf fährst.

Wie genau der Code in der eigenen Less Datei aussieht weiss ich selber noch nicht, da ich das noch nicht gebraucht hatte.

Hi Malzfons, 

danke erstmals. Also das Problem ist das in Shopware Backend die Farbe für den Text im Shop und Navileiste gekoppelt sind, sprich willst du alle Texte Schwarz haben aber nur die Schrift in Navi Weiß etc. dann hast du ein Problem. Ich hab gestern Nacht etwas herum getüfftelt und den Code von Malzfon geändert und es funktioniert nun ist die Navi Leiste Schwarz und die Schrift weiß.

Hier der Code in die Datei main-navigation packen wie oben von Malzfons beschrieben. 

 

.navigation-main .navigation–link {
  color: #ffffff;
}
.navigation-main {
background:#000000;
.container {
background:transparent;
}
}

3 Likes

super. :slight_smile:

 

Danke malzfons für das aufschreiben und posten!!! Dein Post hat genau unser Problem gelöst. Auch das, was sunnyx empfohlen hat, hat uns gut weiter geholfen.

Vielen Dank @malzfons‍ für deine Anleitung. Alles hat wie beschrieben optimal funktioniert. Ich möchte nun unten im Footer das Shopware Logo entfernen. Leider kenne ich mich mit Less nicht so gut aus… Wie binde ich dies in meiner footer.less Datei ein?

https://forum.shopware.com/discussion/comment/163646/#Comment_163646

Hi @malzfons, die Anleitung sieht super aus, würde das denn so wie es hier geschrieben steht auch mit einem gekauften Theme funktionieren? Denn es ist dann schon etwas unglücklich dafür Geld ausgegeben zu haben und es dann doch selbst zu machen.

Gruß