Farbverwaltung Shop-Management: Unterschied zwischen den Versionen

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „zurück zur CSS-Doku = Hintergrundfarben = == Allgemeine Hintergrundfarben == image:Hintergrund1.PNG|mini|Einstellungen im Shop-Management für…“)
 
 
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[CSS-Doku|zurück zur CSS-Doku]]
 
[[CSS-Doku|zurück zur CSS-Doku]]
 +
 +
{{wichtig|Die hier vorgestellten Daten gelten für Template-Versionen >= 8.0.0.0}}
 +
 +
 +
__TOC__
 +
  
 
= Hintergrundfarben =
 
= Hintergrundfarben =
Zeile 12: Zeile 18:
 
|-
 
|-
 
|Hintergrundfarbe
 
|Hintergrundfarbe
−
|#ffffff
+
|<tt>#ffffff</tt>
 
|
 
|
 
*vertikales Menü ab zweiter Ebene
 
*vertikales Menü ab zweiter Ebene
Zeile 25: Zeile 31:
 
*Tabs in Detailseite
 
*Tabs in Detailseite
 
*Subnavigation
 
*Subnavigation
−
|bg-color_color1, bg-color_light
+
|<tt>bg-color_color1<br>bg-color_light</tt>
 
|-
 
|-
 
|2. Hintergrundfarbe
 
|2. Hintergrundfarbe
−
|#f3f3f3
+
|<tt>#f3f3f3</tt>
 
|
 
|
 
*Daten in Artikel-Listung
 
*Daten in Artikel-Listung
Zeile 35: Zeile 41:
 
*Rahmenfarbe 2
 
*Rahmenfarbe 2
 
*allgemeine Box mit Neben-Hintergrundfarbe
 
*allgemeine Box mit Neben-Hintergrundfarbe
−
|bg-color_color2
+
|<tt>bg-color_color2</tt>
 
|-
 
|-
 
|3. Hintergrundfarbe
 
|3. Hintergrundfarbe
−
|#eeeeee
+
|<tt>#eeeeee</tt>
 
|
 
|
 
*vertikales Menü erste Ebene
 
*vertikales Menü erste Ebene
Zeile 44: Zeile 50:
 
*Rahmenfarbe 3
 
*Rahmenfarbe 3
 
*Navigation 6 unter Topnavigation
 
*Navigation 6 unter Topnavigation
−
|bg-color_color3, bg-color_smooth
+
|<tt>bg-color_color3<br>bg-color_smooth</tt>
 
|-
 
|-
 
|4. Hintergrundfarbe
 
|4. Hintergrundfarbe
−
|#e2e2e2
+
|<tt>#e2e2e2</tt>
 
|
 
|
 
*Rahmenfarbe 4
 
*Rahmenfarbe 4
−
|bg-color_color4
+
|<tt>bg-color_color4</tt>
 
|-
 
|-
 
|5. Hintergrundfarbe
 
|5. Hintergrundfarbe
−
|#dddddd
+
|<tt>#dddddd</tt>
 
|
 
|
 
*Rahmenfarbe des Headers
 
*Rahmenfarbe des Headers
Zeile 66: Zeile 72:
 
*Suchvorschläge
 
*Suchvorschläge
 
*Tabs:hover in Detailseite
 
*Tabs:hover in Detailseite
−
|bg-color_color5, bg-color_strong
+
|<tt>bg-color_color5<br>bg-color_strong</tt>
 
|-
 
|-
 
|6. Hintergrundfarbe
 
|6. Hintergrundfarbe
−
|#dadada
+
|<tt>#dadada</tt>
 
|
 
|
 
*6. Rahmenfarbe
 
*6. Rahmenfarbe
−
|bg-color_color6
+
|<tt>bg-color_color6</tt>
 
|-
 
|-
 
|7. Hintergrundfarbe
 
|7. Hintergrundfarbe
−
|#cccccc
+
|<tt>#cccccc</tt>
 
|
 
|
 
*7. Rahmenfarbe
 
*7. Rahmenfarbe
 
*Rahmen um Eingabefelder
 
*Rahmen um Eingabefelder
−
|bg-color_color7
+
|<tt>bg-color_color7</tt>
 
|-
 
|-
 
|8. Hintergrundfarbe
 
|8. Hintergrundfarbe
−
|#aaaaaa
+
|<tt>#aaaaaa</tt>
 
|
 
|
 
*Reservieren-Button:hover
 
*Reservieren-Button:hover
Zeile 88: Zeile 94:
 
*8. Rahmenfarbe
 
*8. Rahmenfarbe
 
*Schattenfarbe
 
*Schattenfarbe
−
|bg-color_color8, bg-color_dark
+
|<tt>bg-color_color8<br>bg-color_dark</tt>
 
|}
 
|}
  
Zeile 105: Zeile 111:
 
|-
 
|-
 
|1
 
|1
−
|#f3f3f3
+
|<tt>#f3f3f3</tt>
 
|erster Farbwert für den Hintergrundverlauf
 
|erster Farbwert für den Hintergrundverlauf
 
|-
 
|-
 
|2
 
|2
−
|#eeeeee
+
|<tt>#eeeeee</tt>
 
|zweiter Farbwert für den Hintergrundverlauf
 
|zweiter Farbwert für den Hintergrundverlauf
 
|-
 
|-
 
|3
 
|3
−
|#dddddd
+
|<tt>#dddddd</tt>
 
|nicht belegt
 
|nicht belegt
 
|-
 
|-
 
|4
 
|4
−
|#cccccc
+
|<tt>#cccccc</tt>
 
|Rahmenfarbe für das Benutzer-Menü im Header
 
|Rahmenfarbe für das Benutzer-Menü im Header
 
|}
 
|}
Zeile 130: Zeile 136:
 
|-
 
|-
 
|1
 
|1
−
|#dddddd
+
|<tt>#dddddd</tt>
 
|
 
|
 
*Rahmenfarbe oben
 
*Rahmenfarbe oben
Zeile 137: Zeile 143:
 
|-
 
|-
 
|2
 
|2
−
|#dddddd
+
|<tt>#dddddd</tt>
 
|
 
|
 
*Hintergrundfarbe ohne Verlauf
 
*Hintergrundfarbe ohne Verlauf
Zeile 143: Zeile 149:
 
|-
 
|-
 
|3
 
|3
−
|#cccccc
+
|<tt>#cccccc</tt>
 
|
 
|
 
*Rahmenfarbe unten
 
*Rahmenfarbe unten
Zeile 151: Zeile 157:
 
|-
 
|-
 
|4
 
|4
−
|#cccccc
+
|<tt>#cccccc</tt>
 
|nicht belegt
 
|nicht belegt
 
|}
 
|}
Zeile 167: Zeile 173:
 
|-
 
|-
 
|Standard-Schriftfarbe
 
|Standard-Schriftfarbe
−
|#333333
+
|<tt>#333333</tt>
 
|
 
|
 
*Hauptschriftfarbe
 
*Hauptschriftfarbe
−
|f-color_basic
+
|<tt>f-color_basic</tt>
 
|-
 
|-
 
|2. Schriftfarbe
 
|2. Schriftfarbe
−
|#555555
+
|<tt>#555555</tt>
 
|
 
|
 
*Farbe für Hyperlinks mit &raquo;
 
*Farbe für Hyperlinks mit &raquo;
 
*Schriftfarbe des Reservieren-Buttons
 
*Schriftfarbe des Reservieren-Buttons
−
|f-color_color1
+
|<tt>f-color_color1</tt>
 
|-
 
|-
 
|3. Schriftfarbe
 
|3. Schriftfarbe
−
|#777777
+
|<tt>#777777</tt>
 
|
 
|
 
*allgemeine Hinweise im Footer
 
*allgemeine Hinweise im Footer
Zeile 186: Zeile 192:
 
*Hover-Farbe von hervorgehobenen Links
 
*Hover-Farbe von hervorgehobenen Links
 
*Label von Input-feldern
 
*Label von Input-feldern
−
|f-color_color2, f-color_light
+
|<tt>f-color_color2<br>f-color_light</tt>
 
|-
 
|-
 
|4. Schriftfarbe
 
|4. Schriftfarbe
−
|#888888
+
|<tt>#888888</tt>
 
|
 
|
 
*Breadcrumb
 
*Breadcrumb
 
*Herstellername
 
*Herstellername
−
|f-color_color3
+
|<tt>f-color_color3</tt>
 
|-
 
|-
 
|5. Schriftfarbe
 
|5. Schriftfarbe
−
|#aaaaaa
+
|<tt>#aaaaaa</tt>
 
|
 
|
 
*Schatten für Megamenü, Subnavi, Catblog
 
*Schatten für Megamenü, Subnavi, Catblog
−
|f-color_color4, f-color_lighter
+
|<tt>f-color_color4<br>f-color_lighter</tt>
 
|-
 
|-
 
|6. Schriftfarbe
 
|6. Schriftfarbe
−
|#dddddd
+
|<tt>#dddddd</tt>
 
|
 
|
 
*leeres Bewertungs-Sternchen
 
*leeres Bewertungs-Sternchen
 
*hr
 
*hr
 
*Tabellenrahmen
 
*Tabellenrahmen
−
|f-color_color5, f-color_lightest, f-color_disabled
+
|<tt>f-color_color5<br>f-color_lightest<br>f-color_disabled</tt>
 
|-
 
|-
 
|Wichtige Hinweise
 
|Wichtige Hinweise
−
|#cd0a0a
+
|<tt>#cd0a0a</tt>
 
|
 
|
 
*Hinweise auf Verkaufsaktionen
 
*Hinweise auf Verkaufsaktionen
 
*Pflichtfeld
 
*Pflichtfeld
 
*Fehlermeldungen
 
*Fehlermeldungen
−
|f-color_warning, f-color_prominent
+
|<tt>f-color_warning<br>f-color_prominent</tt>
 
|-
 
|-
 
|weiche Info
 
|weiche Info
−
|#008000
+
|<tt>#008000</tt>
 
|
 
|
 
*Speedbar
 
*Speedbar
Zeile 224: Zeile 230:
 
*Hinweise
 
*Hinweise
 
*Preise
 
*Preise
−
|f-color_notice
+
|<tt>f-color_notice</tt>
 
|-
 
|-
 
|Text in Eingabefeld
 
|Text in Eingabefeld
−
|#2f2f2f
+
|<tt>#2f2f2f</tt>
 
|
 
|
 
*Input-Felder
 
*Input-Felder
Zeile 233: Zeile 239:
 
|-
 
|-
 
|Grafikfarbe
 
|Grafikfarbe
−
|#333333
+
|<tt>#333333</tt>
 
|
 
|
 
|
 
|
  
 
|}
 
|}

Aktuelle Version vom 16. September 2019, 10:25 Uhr

zurück zur CSS-Doku

Templ att-blk.png
Die hier vorgestellten Daten gelten für Template-Versionen >= 8.0.0.0



Hintergrundfarben

Allgemeine Hintergrundfarben

Einstellungen im Shop-Management für Hintergrundfarben
Bezeichnung Farbwert Auswirkung CSS-Klasse
Hintergrundfarbe #ffffff
  • vertikales Menü ab zweiter Ebene
  • Bild in Artikel-Listung
  • Eingabefelder
  • Megamenü
  • Slidemenü auf Bildschirmen < 880 Pixel
  • Header auf Bildschirmen < 880 Pixel
  • Infobox
  • allgemeine Box mit Haupt-Hintergrundfarbe (Neuheiten, Bestseller, RDE, ...)
  • Rahmenfarbe 1
  • Tabs in Detailseite
  • Subnavigation
 bg-color_color1
bg-color_light
2. Hintergrundfarbe #f3f3f3
  • Daten in Artikel-Listung
  • Daten in Artikeldetail
  • Areas mit Hintergrund
  • Rahmenfarbe 2
  • allgemeine Box mit Neben-Hintergrundfarbe
 bg-color_color2
3. Hintergrundfarbe #eeeeee
  • vertikales Menü erste Ebene
  • Überschriften mit Box
  • Rahmenfarbe 3
  • Navigation 6 unter Topnavigation
 bg-color_color3
bg-color_smooth
4. Hintergrundfarbe #e2e2e2
  • Rahmenfarbe 4
 bg-color_color4
5. Hintergrundfarbe #dddddd
  • Rahmenfarbe des Headers
  • Rahmenfarbe des Hauptteils
  • Rahmenfarbe des Footers
  • Haupt-Rahmenfarbe
  • 5. Rahmenfarbe
  • Hintergrund Produktname in Catblog
  • Speedbar im Checkout
  • Einheit bei Warenkorbfeldern
  • Reservieren-Button
  • Suchvorschläge
  • Tabs:hover in Detailseite
 bg-color_color5
bg-color_strong
6. Hintergrundfarbe #dadada
  • 6. Rahmenfarbe
 bg-color_color6
7. Hintergrundfarbe #cccccc
  • 7. Rahmenfarbe
  • Rahmen um Eingabefelder
 bg-color_color7
8. Hintergrundfarbe #aaaaaa
  • Reservieren-Button:hover
  • modaler Hintergrund
  • 8. Rahmenfarbe
  • Schattenfarbe
 bg-color_color8
bg-color_dark


Die Hintergrundfarben werden auch für das Zeichnen von Rahmen verwendet. Die Standard-Rahmenfarbe ist die 5. Hintergrundfarbe (#dddddd).

Flächenfarben

Einstellungen im Shop-Management für Flächenfarben
Spezial-Fläche

Spezialflächen betreffen das Benutzer-Menü im Header mit Login, Merkzettel, Sprache, usw.

Feld Farbwert Auswirkung
1 #f3f3f3 erster Farbwert für den Hintergrundverlauf
2 #eeeeee zweiter Farbwert für den Hintergrundverlauf
3 #dddddd nicht belegt
4 #cccccc Rahmenfarbe für das Benutzer-Menü im Header
Fläche

Fläche 1 Die Flächen-Farben bestimmen das Aussehen der Standard-Buttons

Feld Farbwert Auswirkung
1 #dddddd
  • Rahmenfarbe oben
  • Rahmenfarbe rechts
  • erste Verlaufsfarbe
2 #dddddd
  • Hintergrundfarbe ohne Verlauf
  • zweite Verlaufsfarbe bei Hover
3 #cccccc
  • Rahmenfarbe unten
  • Rahmenfarbe links
  • zweite Verlaufsfarbe
  • erste Verlaufsfarbe bei Hover
4 #cccccc nicht belegt

Fläche 2 Nicht mehr verwendet.

Schriftfarben

Einstellungen im Shop-Management für Schriftfarben
Bezeichnung Farbwert Auswirkung CSS-Klasse
Standard-Schriftfarbe #333333
  • Hauptschriftfarbe
 f-color_basic
2. Schriftfarbe #555555
  • Farbe für Hyperlinks mit »
  • Schriftfarbe des Reservieren-Buttons
 f-color_color1
3. Schriftfarbe #777777
  • allgemeine Hinweise im Footer
  • Hover im Megamenü
  • Hover-Farbe von hervorgehobenen Links
  • Label von Input-feldern
 f-color_color2
f-color_light
4. Schriftfarbe #888888
  • Breadcrumb
  • Herstellername
 f-color_color3
5. Schriftfarbe #aaaaaa
  • Schatten für Megamenü, Subnavi, Catblog
 f-color_color4
f-color_lighter
6. Schriftfarbe #dddddd
  • leeres Bewertungs-Sternchen
  • hr
  • Tabellenrahmen
 f-color_color5
f-color_lightest
f-color_disabled
Wichtige Hinweise #cd0a0a
  • Hinweise auf Verkaufsaktionen
  • Pflichtfeld
  • Fehlermeldungen
 f-color_warning
f-color_prominent
weiche Info #008000
  • Speedbar
  • fröhlicher Link
  • Hinweise
  • Preise
 f-color_notice
Text in Eingabefeld #2f2f2f
  • Input-Felder
Grafikfarbe #333333
Abgerufen von „https://wiki.e-vendo.de/index.php?title=Farbverwaltung_Shop-Management&oldid=18101“