Stylecheatsheet

Shopware Theme Konfiguration
Kategorie
Grautöne
Grundgerüst
Hinweisfarben
Allgemein
Basiskonfiguration
Bereich
Variable
Basiskonfiguration
Überschriften
Zweck
Wird eingesetzt in:
@brand-primary
#D9400B
Primärfarbe (Im Button unten)
TopNavigation Grundfarbe, Warenkorbbutton Grundfarbe, aktive Navigationsleiste links Grundfarbe, Shopseiten
Überschrift, aktive und gehoverte Icons, gehoverte Sprachauswahl + Währungswechsler, Grundpreis,
Tagwolkeneinträge, Breadcrumb (aktive Kategorie), aktive Step Header Icons, fokussierte Inputfelder
@brand-secondary
#5F7285
Sekundärfarbe (Im Button oben)
Off-Canvas Warenkorb (Weiter shoppen button), Warenkorb öffnen Button, inaktive Step Header Icons
@brand-primary-light
saturate(lighten(@brand-primary,12%), 5%)
Nuance der Primärfarbe (Im Button oben)
Nuance der primary farben (Top Navigation, Warenkorbbutton etc), aktive Step Header Icons
@brand-secondary-dark
darken(@brand-secondary, 15%)
Nuance der sekundärfarbe (Im Button unten) Nuance der sekundärfarben (Weiter Shoppen Button etc.), inaktive Step Header Icons
@gray
#F5F5F8
Primärer Grauton
Findet keine direkte Verwendung im FE, dient nur als Basiston zur Erstellung der Nuancen
@gray-light
lighten(@gray, 1%)
helle grau nuance
Listing Sortierungscontainer + alle Schattierungen der Dropdowns untere Farbe
@gray-dark
darken(@gray-light, 10%)
dunkle Grau nuance
Schattierung aller Eingabefelder (Suche, Registrierung, Formulare), Artikelnavigationsbuttons auf der Detailseite
@border-color
@gray-dark
Randfarben
Rand von: Main-Container, Naviation links (Rand + Trennlinien), Header + Footer Trennlinien, Listing
Sortierungscontainer, Artikeltrenner (zw. Bild und Beschreibung), Bewertungssterne, Thumbnails, Trenner Artikel
hauptdetails, Tabs (Beschreibung, Bewertung), Lightbox, Bildmarkierung (unter dem Hauptbild), Trenner in Cross Selling
Slidern, Trenner in Dropdowns (zwischen Eintrag und Dropdownpfeil)
@highlight-success
#2ECC71
Erfolgs Message Box
z.B. Bestätigung nach Newsletter Registrierung
@highlight-error
#E74C3C
Fehler Message Box
z.B. fehlerhafte Anmeldung
@highlight-notice
#F1C40F
Notiz Mesage Box
z.B. "Sie haben keine Artikel im Warenkorb" Meldung
@highlight-info
#4AA3DF
Info Message Box
z.B. Lagerbestand unterschritten in der Modalbox oder im Off-Canvas Warenkorb
@body-bg
@overlay-bg
darken(@gray-light, 5%)
#000000
Body Background
Overlay Hintergrundfarbe
Hintergrund des Body (zwischen Header und Footer)
@overlay-opacity
0.7
Overlay Transparenz
@text-color
@text-color-dark
@link-color
@link-hover-color
@rating-star-color
@brand-secondary
@brand-secondary-dark
@brand-primary
darken(@link-color, 10%)
@highlight-notice
Open Sans, "Helvetica Neue", Helvetica, Arial,
"Lucida Grande", sans-serif;
Text-/ Iconfarbe
Nuace zur Textfarbe
statische Links
Link Hover Farbe
Füllfarbe der Bewertungssterne
@font-headline-stack
@font-base-stack
Schriftart-Überschrift
@font-size-base
14
Basis Schriftgröße
Schriftgröße: Blogartikelbeschreibung, Kategoriebeschreibung, Artikelbeschreibung, Headernavigation(SprachWährungswechsel u. Service Hilfe), Linke Kategorienavigation usw.
@font-base-weight
@font-light-weight
@font-bold -weight
500
300
700
Schriftgewicht Basis
Schriftgewicht light
Schriftgewicht bold
Definiert, wie dick die Schrift dargestellt wird. 400 entspricht normal, 700 entspricht bold (muss von der Schriftart
unterstützt werden)
@font-size-h1
26
Schriftgröße H1
@font-size-h2
21
Schriftgröße H2
@font-size-h3
18
Schriftgröße H3
@font-size-h4
16
Schriftgröße H4
@font-size-h5
@font-size-base
Schriftgröße H5
@font-size-h6
12
Schriftgröße H6
@font-base-stack
Typografie
Default Value
Schriftarten
Lightboxen & Modalboxen
Überschriften, Kategorienamen, Artikelnamen, Preise, Blog Artikel Bezeichnungen
Einkaufsweltenlinks, Versandhinweise, Artikel Action Links, Social Buttons
Weitere Schriftarten können über die Theme Konfiguration hinzugefügt werden.
Funktioniert aktuell nur in html Überschriften ohne Klassenangabe
Bereich
Kategorie
Variable
Default Value
Zweck
@btn-font-size
14 Button Schriftgröße
@btn-icon-size
10 Button Icongröße
Wird eingesetzt in:
Primary-Button
Panels
SecondaryButton
Buttons & Panels
Default-Button
globales Buttonstyling
Labels
Formular Status
Tables
Badges und Hinweise
Tabellen & Badges
Formulare
Globales Formular
Styling
@btn-default-top-bg
@btn-default-bottom-bg
@btn-default-hover-bg
@btn-default-text-color
#FFFFFF
@gray-light
#FFFFFF
@text-color
Oberer Buttonfarbe
Untere Buttonfarbe
Hover-Farbe
Schriftfarbe
@btn-default-hover-text-color @brand-primary
Schriftfarbe gehovert
@btn-default-border-color
@btn-default-hover-bodercolor
@btn-primary-top-bg
@btn-primary-bottom-bg
@btn-primary-hover-bg
@btn-primary-text-color
@border-color
Randfarbe
@brand-primary
gehoverte Randfarbe
@brand-primary-light
@brand-primary
@brand-primary
#FFFFFF
Oberer Buttonfarbe
Untere Buttonfarbe
Hover-Farbe
Schriftfarbe
@btn-primary-hover-text-color
@btn-secondary-top-bg
@btn-secondary-bottom-bg
@btn-secondary-hover-bg
@btn-secondary-text-color
@btn-secondary-hover-textcolor
@panel-header-bg
@panel-header-font-size
@panel-header-color
@panel-border
@panel-bg
@label-font-size
@label-color
@input-font-size
@input-bg
@input-color
@input-placeholder-color
@input-border
@input-focus-bg
@input-focus-border
@input-focus-color
@btn-primary-text-color
Oberer Buttonfarbe
Untere Buttonfarbe
Hover-Farbe
Schriftfarbe
@btn-secondary-text-color
Schriftfarbe gehovert
@text-color
@border-color
#FFFFFF
@text-color
Hintergrund Panel Header
14 Schriftgröße Panel Header
Farbe Panel header
Randfarbe Panel
Hintergrund Panel
12 Label Schriftgröße
Label Schriftfarbe
14 Schriftgröße Inputfeld
Hintergrundfarbe Inputfeld
Schriftfarbe der Eingaben
Schriftfarbe Platzhalter
Randfarbe des Inputfeldes
Inputfeld geklickt Hintergrundfarbe
Inputfeld geklickt Randfarbe
Inputfeld geklickt Schriftfarbe
@input-error-border
@input-error-color
@input-success-bg
@input-success-border
@input-success-color
@panel-table-header-bg
@panel-table-header-color
@table-row-bg
@table-row-color
@table-row-highligt-color
@table-header-bg
@table-header-color
@badge-discount-bg
@badge-discount-color
@badge-newcomer-bg
@badge-newcomer-color
@gray-light
@brand-secondary
lighten(@text-color, 15%)
@border-color
#FFFFFF
@brand-primary
@brand-secondary
desaturate(lighten(@highlight-error, 38%),
20%)
@highlight-error
@highlight-error
#FFFFFF
@highlight-success
@brand-secondary-dark
@panel-bg
@text-color-dark
#FFFFFF
@brand-secondary
darken(@table-row-bg, 4%)
@brand-secondary
#FFFFFF
@highlight-error
#FFFFFF
@highlight-notice
#FFFFFF
@badge-recommendation-bg
@highlight-success
Badgefarbe Highlightartikel
#FFFFFF
Iconfarbe Highlightartikel
@highlight-info
#FFFFFF
Badgefarbe ESD Artikel
Iconfarbe ESD Artikel
@input-error-bg
@badge-recommendationcolor
@badge-download-bg
@badge-download-color
Listing: "Filter", "Zum Produkt", "Weitere Artikel laden", "In den Warenkorb", Formulare: "Senden", Blog: "Mehr lesen",
Allgemein: "Vergleich starten", Registrierung: "Anmelden", "Weiter", Warenkorb & Checkout: "Zur Kasse",
"Zahlungspflichtig bestellen", "Bestellbestätigung jetzt ausdrucken!"
Schriftfarbe gehovert
@brand-secondary
@brand-secondary-dark
@brand-secondary-dark
#FFFFFF
@gray-light
Buttons: Mein Konto, Merkzettel, Warenkorb, Warenkorb bearbeiten, Löschen
Listing: "Vergleichen", "Jetzt bestellen", Vergleich: "Vergleich löschen", Blog: "Vergleichen", Warenkorb: "Weiter
shoppen", Checkout: "Ändern", "Andere", Finish: "Zurück zum Shop"
Als Panel werden z.B. folgende Elemente definiert: Tagwolke, Artkelboxen im Listing in Listenansicht,
Kategorieüberschriften, Crossselling Slider, Formularcontainer, Blogartikel, Blog Crossselling Artikel, Überschriften, Blog
Details gesamt, Trenner zw. Warenkorb Artikel und Prämienartikeln, Checkout Boxen (Adressen, Zahlarten etc)
Checkout Artikelbox
Beschreibungstexte hinter Checkboxen oder Radio Buttons, Bereichsgliederungen in Formularen
Alle Inputfelder, Suche, Formularfelder etc.
geklickte Inputfelder (Registrierung, Anmeldung, Dateneingabefelder)
Inputfeld Fehler Hintergrundfarbe
Inputfeld Fehler Rand
Inputfeld Fehler Schriftfarbe
Inputfeld Success Hintergrundfarbe
Inputfeld Success Randfarbe
Inputfeld Success Schriftfarbe
PanelTabellen Überschriften
PanelTabellen Einträge
Tabellenzeilenhintergrund
Tabellenzeilenschriftfarbe
Hightlightfarbe (jede 2. Zeile)
Tabellenheaderhinergrund
Tabellenheaderschriftfarbe
Badgefarbe Discount
Iconfarbe Discount
Badgefarbe Neuer Artikel
Iconfarbe Neuer Artikel
z.B. fehlerhafte Eingaben in der Registrierung
Erfolgreche Eingaben in Eingabefelder. (ist z. Zt. Nicht in Verwendung)
Warenkorb (Geschätzte Versandkosten)
Tabellen, egal ob in Fließtexten oder in anderen Elementen
Listing & Details
Listing

Download Report