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 ![:)]( ":)")
(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
3. In die Datei footer.less kopiert man folgenden Code (Dateien vorher mit Codeeditor öffnen):
.footer-main {
background:#ecf9bc;
.container {
background:transparent;
}
}
4. In die Datei header.less kopiert man diesen Code:
.header-main {
background:#e2f597;
.container {
background:transparent;
}
}
5. 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
6. 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
7. In die Datei all.less kopiert ihr:
@import "_modules/header";
@import "_modules/footer";
@import "_modules/main-navigation";
8. Im cpanel ist man nun fertig und hat alle Dateien im eigenen Theme angelegt, damit das Ganze auch updatesicher ist. ![:)]( ":)")
9. 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.
10. 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. ![:)]( ":)")
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
(Updatesicher im eigenen Theme)
