Farbkonfiguration
In der ThemeWare® Konfiguration findest du diverse Farbkonfigurationsfelder (Farbauswahl). Im Tab "Layout" findest du beispielsweise den Bereich "Hauptfarben". Hier konfigurierst du die wichtigsten Farben für deinen Shop.
Eine Farbauswahl erkennst du immer an einem kleinen, meist bunten Rechteck, links neben dem Eingabefeld. Diese Rechteck ist eine Vorschau der konfigurierten Farbe.
Hinweis: Grundlagen zur Farbkonfiguration findest in der ThemeWare® Einführung: Farben konfigurieren
Hexadezimalwerte
Im Eingabefeld siehst du dann den entsprechenden Farbcode. In der Regel findest du dort einen Code nach dem Muster #123456. Die ist ein Hexadezimalwert einer Farbe (z.B.: #ff0000).
Hinweis: Achte darauf den korrekten Farbcode zu nutzen um Fehler bei der Kompilierung zu vermeiden.
RGBA-Werte
Wir empfehlen dir mit Hexadezimalwerten zu arbeiten. Du kannst aber auch mit RGBA-Werten (z.B. rgba(255, 0, 0, 0.5)) arbeiten. Über RGBA-Werte (RGB-Farbmodell + Alpha-Kanal) kannst du sehr leicht Transparenzen definieren.
Farbwähler
Wenn du auf die Farbvorschau klickst, öffnet sich der "Farbwähler" auch "Color Picker" genannt.
Nutze einfach den Farbwähler um einen fehlerfreien Farbcode zu generieren.
Tipp: Einsteigern empfehlen wir mit dem Farbwähler zu arbeiten. Dieser generiert automatisch den richtigen Farbcode für die gewünschte Farbe.
Sonderfall: Der Farbwert "transparent"
Du wirst bei der Farb-Konfiguration in ThemeWare® gelegentlich den Wert transparent finden. Dieser steht für eine durchsichtige bzw. unsichtbare Farbe.
Eine Transparenz erreichst du im Idealfall über einen RGBA-Wert (z.B. rgba(0, 0, 0, 0) oder rgba(255, 255, 255, 0)), in ThemeWare® hat der Wert transparent in manchen Konfigurationsfeldern aber eine besondere Funktion. "Transparent" wird genutzt um gleichzeitig noch andere Elemente (z.B. Rahmen um Elemente) zu entfernen.
Tipp: Wir empfehlen dir den Wert rgba(0, 0, 0, 0) für Transparenzen bzw. eine durchsichtige bzw. unsichtbare Farbe zu nutzen.
Für erfahrene Anwender
Zusätzlich zu diesen Farbwerten kannst du auch Variablen oder SCSS-Funktionen verwenden.
Variablen bzw. Theme-Variablen sind die technischen Bezeichnungen für ein Konfigurationsfeld (z.B. $sw-color-brand-primary für die Primärfarbe). Beim kompilieren wird diese Variable von Shopware durch den Wert des entsprechenden Konfigurationsfeldes ersetzt.
Theme-Variablen können dir dabei helfen, dass du häufig verwendete Farben nicht jedes mal neu eingeben musst bzw. dass du viele Farbfelder mit der entsprechenden Variable auf einen Rutsch ändern kannst.
Mit einfachen SCSS-Funktionen kannst du Farbwerte darüber hinaus modifizieren (z.B. abdunkeln, aufhellen etc.).
Beides empfehlen wir nur erfahrenen Anwendern, da diese schnell zu Fehlern führen können.
Mehr Informationen zum Thema "Theme-Variablen" und "SCSS-Funktionen" findest du im Bereich "Anleitungen" im Bereich "Individuelle Anpassungen".
Tipp: Zum Generieren von Farbnuancen hell und dunkel kannst du auch einfach das Online-Tool Sass Color Generator nutzen.
Grundkonfiguration
Das Design deines Shops wird maßgeblich durch die Primärfarbe und die Sekundärfarbe bestimmt.
Zusätzlich bietet ThemeWare® die auch die Nuancen hell und dunkel dieser beiden Farben an.
Zum Generieren von Farbnuancen hell und dunkel empfehlen wir dir das Online-Tool Sass Color Generator. Damit kannst du dir ganz einfach Nuancen für eine Grundfarbe generieren lassen.
Wenn du diese Farben eingestellt hast, bis du mit der Farbkonfiguration deines Themes schon sehr weit. Dennoch solltest du dir die anderen Bereiche anschauen.
Fehlerhafte Eingaben
Wenn du einen ungültigen Farbwert eingibst und im Theme-Manager speicherst, kommt es zu einer Fehlermeldung.
Angenommen du gibst bei der Primärfarbe aus versehen eine zweite Raute ein (#f2832e#), erscheint beim Speichern der Konfiguration die folgende Fehlermeldung:
Da wir wissen, dass wir gerade die Primärfarbe geändert haben, ist es naheliegend, dass wir dort wohl etwas falsch gemacht haben. Also korrigieren wir den Wert direkt.
Du wirst nun feststellen, dass obwohl du den Wert korrigiert hast, beim Speichern erneut diese Fehlermeldung erscheint. Wichtig ist hierbei zu wissen, dass der Theme-Manager jetzt sozusagen "kaputt" ist. Egal was du eingibst, der falsche Wert hat sich quasi festgefressen.
Leider können wir dieses verhalten nicht ändern, aber wir gehen davon aus, dass Shopware dies mit einem künftigen Update verbessert.
Um das Problem zu lösen, musst du die Seite einmal neu laden (z.B. mit F5). Danach navigierst du wieder zum "fehlerhaften" Konfigurationsfeld – dort ist tatsächlich noch der falsche Wert gespeichert – korrigierst den Wert und speicherst die Änderung nochmals.
Nun funktioniert das speichern und damit die Kompilierung des Themes wieder.
Weiterführende Informationen
Einführung: Wie du Farben in deinem Shop konfigurieren kannst, erfährst du im Artikel Farben konfigurieren
Last updated
