#2111 Farben konfigurieren

Farben können grundsätzlich aus den folgenden Bereichen in Shopware kommen:

  • Theme-Manager
  • Erlebniswelten
  • jegliche HTML-Elemente (Content)
  • Shopware Core (sehr wenige, nicht für die Gestaltung relevant)


In diesem Artikel bzw. Video geht es um den Theme-Manager.


In ein Farbkonfigurationsfeld kannst du die folgenden "Arten" von Werten eingeben:

  • Hexadezimale Farbwerte, z.B.: #ff0000
  • RGB-Farbwerte, z.B. rgb(255, 0, 0)
  • RGBA-Farbwerte, z.B. rgba(255, 0, 0, 0.5)
  • Transparent-Anweisung: transparent
  • Theme-Variablen, z.B. $sw-color-brand-primary
  • ThemeWare®-Variablen, z.B. $twt-color-brand-primary-light
  • SCSS-Funktionen mit Farbwerten und Theme-Variablen


Wichtig: Verwende am besten immer nur die üblichen hexadezimalen Farbwerte (z.B. #ff0000) oder direkt den Colorpicker in Shopware, da diese am wenigsten fehleranfällig sind. Den Colorpicker kannst du öffnen, indem du links im Konfigurationsfeld auf die Farbe klickst.


Theme-Variablen helfen dir im Theme-Manager dabei, dass du häufig verwendete Farben nicht jedes mal neu eingeben musst bzw. du diese sehr schnell ändern kannst. Mit einfachen SCSS-Funktionen kannst du Farbwerte darüber hinaus modifizieren (z.B. abdunkeln, aufhellen etc.). 

Hinweis: Mehr dazu erfährst du in unseren Artikeln "Theme-Variablen bzw. SCSS-Funktionen in der Konfiguration verwenden" (Links siehe unten).


Tipp: Zum Generieren von Farbnuancen hell und dunkel kannst du beispielsweise das Online-Tool "Sass Color Generator" nutzen (Link siehe unten).


Wichtig – so gehst du mit Fehlermeldungen im Theme-Manager um: 
Wenn du einen ungültigen Farbwert eingibst und im Theme-Manager speicherst, kommt es zu einer Fehlermeldung. Diese verschwindet erst dann wieder, sobald du den Theme-Manager einmal komplett neu lädst, dann den Farbwert korrigierst und den Theme-Manager erneut speicherst.


Im Video erklärst Thorsten dir ganz genau, wie du die Farben im Theme-Manager konfigurierst, macht einige Beispiele und er zeigt dir, wie du mit Fehlermeldungen umgehst. Unbedingt anschauen!



Weiterführende Links


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

6e099a6ff34972492ecd47874ddcc54c
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen