Inhaltsverzeichnis

1 Vorwort
2 Allgemeines
3 allgemeine Klassen
4 Erste Strukturen
- 4.1 Floating
5 Komplexere Strukturen
- 5.1 Catalog
- 5.2 Kacheln (Catblog, Subnavi)
6 Klassen zur speziellen Verwendung
7 Slidergröße ändern
8 JavaScript-Funktionen
9 Nützliche HTML-Bausteine
- 9.1 Kacheln
  - 9.1.1 HTML-Code
  - 9.1.2 Vorschau

Vorwort

Mit den hier aufgeführten CSS-Klassen können eigene HTML-Inhalte einfacher gestaltet werden. Sie dienen als Ergänzung zu den bereits vorhandenen tp-Klassen. Diese Klassen dürfen nicht mit eigenem CSS überschrieben werden, da sie vom Shop selbst genutzt werden.

Als Leitfaden dient das mobile-first-Konzept. Das heißt, dass Inhalte zuerst für die kleinsten gängigen Mobilgeräte (ca. 320px) erstellt und dann mittels Media-Queries für größer werdende Bereiche optimiert werden.

Allgemeines

box-sizing:border-box

Alle Elemente im e-vendo-Shop sind mit box-sizing:border-box voreingestellt. Das heißt, dass bei Größenangaben Rahmen und Innenabstände mit einberechnet werden. Außenabstände kommen weiterhin extra dazu. Wichtig wird dies beim Floating. So werden zwei Boxen mit je 50% Breite und Innenabstand sowie Rahmen auch nebeneinander angezeigt, da Ihre Gesamtbreite bei 100% liegt. Nimmt man noch einen Außenabstand dazu, übersteigt die Gesamtbreite 100% (50% + Außenabstand) und die Boxen werden umbrechen.

allgemeine Klassen

wichtige Breiten

w--100 : 100%
w--90 : 90%
w--80 : 80%
w--75 : 75%
w--70 : 70%
w--66 : 66%
w--60 : 60%
w--50 : 50%
w--40 : 40%
w--33 : 33%
w--30 : 30%
w--25 : 25%
w--20 : 20%
w--10 : 10%

Die Breiten können mit dem Zusatz -480, -640 und -880 versehen werden und wirken dann erst ab erreichen der entsprechenden Größe in Pixeln.

Abstände

Abstandsklassen gibt es in zwei Formen: Absolut mit festen Pixeln oder relativ an der Schriftgröße ausgerichtet. Erkennbar sind diese an dem letzten Buchstaben: "a" für absolut und "r" für relativ. Relative Abstände sind gut geeignet, wenn Texte mehr getrennt werden sollen, sodass diese bei Vergrößerung der Schrift im selben Verhältnis mitwachsen. Absolute Abstände werden eher bei Containern eingesetzt, wo der Abstand unabhängig von der Schrift immer gleich groß ist.

nach außen (margin)

m--b : margin von 25px
m--m : margin von 15px
m--s : margin von 10px
m--xs : margin von 5px

m--b-r : margin von 2em
m--m-s : margin von 1,2em
m--s-r : margin von 0,8em
m--xs-r : margin von 0,4em

nach innen (padding)

p--b : padding von 25px
p--m : padding von 15px
p--s : padding von 10px
p--xs : padding von 5px

p--b-r : padding von 2em
p--m-s : padding von 1,2em
p--s-r : padding von 0,8em
p--xs-r : padding von 0,4em

Beispiele

Inhalt

Inhalt

Alle Abstände lassen sich auch für nur eine Seite festlegen. Dazu wird dem Klassennamen nach dem ersten "m" oder "p" der Zusatz "-t" für oben (top), "-r" für rechts (right), "-b" für unten (bottom) oder "-l" für links (left) angehangen. Zum Beispiel für einen Margin von 0,8em auf der linken Seite: m-l--s-r

Ab Template-Version 8.0.5.0
Zu den Margin-Klassen für eine Seite gibt es auch Negationsklassen, falls ein negativer Margin benötigt wird. Dazu wird der Klasse das Suffix --neg angehangen:
m-l--s-r--neg erzeugt einen Margin links von -0.8em.

Rahmen

Rahmen können fast jedem Element beliebig gegeben werden:

b_ : Kompletter Rahmen (bis Templateversion 8.0.13.x)
border : Kompletter Rahmen (ab Templateversion 8.0.14.0)
b-t : Nur oben
b-b : Nur unten
b-l : Nur links
b-r : Nur rechts
b-h : Horizintaler Rahmen oben und unten
b-v : Vertikaler Rahmen links und rechts
b-tub : Badewanne links, unten, rechts
b-hat : Hut links, oben ,rechts

Beispiele

Schatten

Ähnlich wie Rahmen können auch Schatten vergeben werden:

shadow : Kompletter Schatten
shadow-t : Nur oben
shadow-b : Nur unten
shadow-l : Nur links
shadow-r : Nur rechts
shadow-t-l : Oben und links
shadow-t-r : Oben und rechts
shadow-b-l : Unten und links
shadow-b-r : Unten und rechts

Alle Schatten gibt es auch in einer kleineren Version. Diese wird durch die zusätzliche Klasse small-shadow erzeugt.

Beispiele

Eine Kombination verschiedener Schatten ist nicht möglich.

Formulare

Formulargestaltung passend zu den Shopformularen (z.B. Loginmaske). Der Feldtitel befindet sich im Eingabebereich und wird bei Aktivierung des Feldes sanft an den oberen Rand geschoben. Dadurch sind Formulare automatisch vom Design her für kleine Bildschirme optimiert. Es wird um jedes Eingabefeld und dem dazugehörige Label ein Element mit der Klasse input-field gelegt.

<form>
  <div class="input-field">
    <label for="Feld-ID">Feldtitel</label>
    <input type="text" id="Feld-ID" name="Feld-Name">
  </div>
</form>

Feldtitel

|

Feldtitel

Text

Texte können unterschiedlich ausgerichtet werden

acenter : Zentriert
aleft : Linksbündig
aright : Rechtsbündig
up : Hochgestellt

Texte können dekoriert werden

italic : Kursiv
bold : Fett
underline : Unterstrichen
crossline : Durchgestrichen
upper : Alles in Großbuchstaben
style-0 : Kursiv und fett zurücksetzen
no-deco : Alle Striche entfernen

Beispiel

<span class="italic">Text</span>
Text

<span class="bold">Text</span>
Text

<span class="underline">Text</span>
Text

<span class="crossline">Text</span>
Text

<span class="upper">Text</span>
Text

<span class="italic bold underline upper">Text</span>
Text

Farben

Es werden alle wichtigen Farben aus dem Shop-Management zur Verfügung gestellt. So bleiben die eigenen Inhalte auch farblich flexibel.

❯Eine ausführliche Erläuterung zu den Farben ist hier zu finden.

Schriftfarben (ab Templateversion 8.0.14.0)

Aufsteigend heller werdend:
f-color--0, f-color--basic : Grund-Farbe (im Standard #333333)
f-color--1
f-color--2, f-color--light
f-color--3
f-color--4, f-color--lighter
f-color--5, f-color--lightest

Für besondere Texte:
f-color--warning : Warnfarbe (im Standard Rot)
f-color--high : In der Highlight-Farbe
f-color--onhigh : Für einem Hintergrund in der Highlight-Farbe (am besten zusammen mit bg-color-high benutzen)

Alle Textfarben gibt es auch als Hover-Version (Text bekommt die Farbe, wenn man mit der Maus drüber geht). Dazu wird er Suffix -hover angehangen:
f-color--1-hover

Hintergrundfarben, Klassennamen ändern sich in Kürze

Aufsteigend dunkler werdend:
bg-color_color1, bg-color_light
bg-color_color2
bg-color_color3, bg-color_smooth
bg-color_color4
bg-color_color5, bg-color_strong
bg-color_color6
bg-color_color7
bg-color_color8, bg-color_dark

Besondere Hintergründe (Klassennamen ändern sich in Kürze):
bg-color_main : Haupthintergrund
bg-high--full : Highlight-Farbe
bg-high--full---hover : Highlight-Farbe bei Mouseover

Rahmenfarben (Klassennamen ab Templateversion 8.0.14.0)

Wie Hintergrundfarben aufsteigend dunkler werdend:
b-color--0
b-color--1, b_light
b-color--2
b-color--3
b-color--4, b_standard
b-color--5
b-color--6
b-color--7, b_dark

Erste Strukturen

Floating

Um Elemente nebeneinander auszurichten, wird das Floating benötigt. Die folgenden Klassen helfen bei einem sauberen Einsatz.

float-l : Das Element richtet sich links vom nächsten Nachbarn aus
float-r : Das Element richtet sich rechts vom nächsten Nachbarn aus
clear-both : Beendet ein float, sodass die nächsten Elemente wieder der normalen Ausrichtung folgen. Muss dem Elternelement angehängt werden.

Beispiele

1

2

Komplexere Strukturen

Catalog

Bei Catalog handelt es sich um eine Darstellung nebeneinander. Dabei wird die Box in zwei Bereiche zu 20% und 80% geteilt. Der größere Bereich ist noch einmal zur Hälfte geteilt.

HTML

Klassen

.catalog.grid: erzeugt die Formatierung als Catalog
.catalog.design: Fügt Abstände und Hintergrundfarben hinzu

Vorschau

kleiner 480px

ab 480px

20%

ab 640px

20%

50%

ab 880px

20%

50%

Kacheln (Catblog, Subnavi)

Es werden bis zu fünf Kacheln automatisch nebeneinander dargestellt je nach vorhandener linken oder rechten Seite im Shop.

HTML

Klassen

.tiles.grid: erzeugt die Formatierung als Kacheln
.tiles.design: Fügt Abstände und Hintergrundfarben hinzu

tiles.big.grid: erzeugt breitere Kacheln

Vorschau

kleiner 480px

ab 480px

ab 640px

ab 880px

Eine Hauptspalte

Zwei oder drei Hauptspalten

Klassen zur speziellen Verwendung

Die folgenden Klassen erfüllen spezielle Funktionen, wie das Ausblenden von Elementen, wenn bestimmte Bedingungen erfüllt sind.

show_with_login: Element wird nur angezeigt, wenn der Kunde eingeloggt ist.
show_with_url: Element wird nur angezeigt, wenn das Attribut 'href' vorhanden ist und keinen Leerstring enthält.
show_with_src: Element wird nur angezeigt, wenn das Attribut 'src' vorhanden ist und keinen Leerstring enthält.
no-print: Element wird nur angezeigt, wenn es sich nicht um eine Druckausgabe handelt.
show_with_order: Element wird nur angezeigt, wenn wir uns im Bestellprozess befinden.
indivdual_box: Element wird nur angezeigt, wenn folgendes nicht zutrifft:; Es gibt ein Kind-Element mit der Klasse individual_content, welches leer ist.
anchor: Modifiziert den Link-Anker, sodass die Topnav (Navigation 1, 5) nicht darüber liegt und ihn verdeckt.; Das Anker-Element muss ein Block-Element sein oder die Klasse block bzw. inline-block bekommen.

Slidergröße ändern

Da Google seine Richtlinien zu den Core Web Vitals mit in das Ranking aufgenommen hat, muss der Slider in einen Container mit fester Größe geladen werden.

Das CSS hat verschiedene Umbruchpunkte für die verschiedenen Bildschirmgrößen und ist von klein nach groß angeordnet. Dabei ist #slideshow.slider_big die grße Slideshow auf der Startseite und #slideshow.slider_normal die kleine in Unterthemen. Um die Größe zu verändern müssen die Werte für #slideshow.slider_* und #slideshow.slider_* img gleichmäßig verändert werden. Das Bild wird dann automatisch skaliert bis zum nächsten Umbruchpunkt. Wichtig ist, dass man ein gutes Gleichgewicht zwischen den Umbruchpunkten und dem reservierten Platz findet. Das kann man testen, indem man zum Beispiel die Breite des Browserfensters ändert.

 #slideshow.slider_big { height:90px; }
 #slideshow.slider_normal { height:90px; }
 #slideshow.slider_big img { max-height:90px; max-width:100; }
 #slideshow.slider_normal img { max-height:90px; max-width:100%; }

 @media (min-width:480px){
   #slideshow.slider_big { height:130px; }
   #slideshow.slider_normal { height:130px; }
   #slideshow.slider_big img { max-height:130px; }
   #slideshow.slider_normal img { max-height:130px; }
 }

 @media (min-width:640px){
   #slideshow.slider_big { height:200px; }
   #slideshow.slider_normal { height:200px; }
   #slideshow.slider_big img { max-height:200px; }
   #slideshow.slider_normal img { max-height:200px; }
 }

 @media (min-width:880px){
   #slideshow.slider_big { height:300px; }
   #slideshow.slider_normal { height:270px; }
   #slideshow.slider_big img { max-height:300px; }
   #slideshow.slider_normal img { max-height:270px; }
 }

JavaScript-Funktionen

Bilder mit lazyloading einbinden

Templates: 8.0.5.0

Wenn Sie in Ihrer PageSpeed-Auswertung die Meldung "nicht sichtbare Bilder aufschieben" bekommen, kann es helfen, diese über ein sogenanntes lazy loading einzubinden. Dabei werden die Bilder erst geladen, wenn sie in den Sichtbereich gescrollt werden.

Die normale Einbindung im Thementext sieht so aus:

Das wird umgewandelt in ein figure-Element mit data-Attributen:

Jetzt noch die Klasse lazyload hinzufügen:

Nun wird das Bild erst geladen, wenn es in den Sichtbereich gelangt.

weiteres JavaScript einbringen

JavaScript kann generell überall genutzt werden.

Der Shop bringt die Bibliothek JQuery mit, welche vieles vereinfacht. Um diese nutzen zu können muss mit dem e-vendo-Framework overseer gearbeitet werden, welches Scripte, die JQuery benötigen, ausführt, sobald die Bibliothek nach dem HTML geladen worden ist.

Overseer

Der Overseer lässt sich nutzen, indem man ihm das eigene JavaScript in einer Funktion übergibt und an ein Event bindet:

overseer.add('MeineFunktion', function(){ Mache JQuery-Dinge und so ... });

Was passiert hier?
overseer.add(Name, function()), overseer.add(function()) nimmt eine oder zwei Parameter entgegen: Einen frei gewählten Namen oder Leerstring und eine Funktion oder nur die Funktion.

Name: Der Name dient dazu, auf eine spezielle schon registrierte Funktion zuzugreifen, um diese noch einmal auszuführen.
Funktion: In der Funktion befindet sich das gesamte JavaScript, welches mit JQuery arbeitet. Am besten schreibt man die Funktion außerhalb vom Overseer und übergibt dann nur noch den Namen; myFunction(){ ... }; Overseer.add("", myFunction);

Swiper (ab Template-Version 8.0.13.0)

Mit dem Plugin Swiper lassen sich Slider und Carousels erstellen

Integration eines Sliders (ein sichtbares Element mit voller Breite)

HTML

</div>

JavaScript

Integration eines Carousels (mehrere sichtbare Elemente nebeneinander)

HTML

JavaScript

Weitere Optionen und Erklärungen findet Ihr in der Swiper API

Migration von Slick zu Swiper

Wer sich schon einen Slider oder Carousel angelegt hat mit einer Template-Version vor 8.0.13.0 muss ein paar Kleinigkeiten anpassen

wird entfernt

wird eingefügt

Slider

alt

neu

</div>

Carousel

alt

neu

Das JavaScript muss entsprechend der Anleitung oben neu erstellt werden

Nützliche HTML-Bausteine

Kacheln

4x4-Raster

Ab Template Version 8.0.10.0 bis 8.0.13.x

Ein Raster aus Bildern mit einem darüber gelegten Text am unteren Bereich.
Die minimale Höhe wird von verwendeten Bild bestimmt. Sollten die Bilder größer sein, werden sie automatisch skaliert.
Bei Mouse-Over wird ein Hover-Effekt angewendet (Klasse "hover").

HTML-Code

<div class="clear_l m-t_m-a m-l_s-a--neg">
  <div class="float_l p-l_s-a p-b_s-a w_100 w_50-640">
    <a class="pos_r block hover-effect" href="#">
      <img src="@@@e-vendo_src@@@/fantasy1.jpg" class="block">
      <div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 1</div>
    </a>
  </div>
  <div class="float_l p-l_s-a p-b_s-a w_100 w_50-640">
    <a class="pos_r block hover-effect" href="#">
      <img src="@@@e-vendo_src@@@/fantasy2.jpg" class="block">
      <div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 2</div>
    </a>
  </div>
  <div class="float_l p-l_s-a p-b_s-a w_100 w_50-640">
    <a class="pos_r block hover-effect" href="#">
      <img src="@@@e-vendo_src@@@/fantasy3.jpg" class="block">
      <div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 3</div>
    </a>
  </div>
  <div class="float_l p-l_s-a p-b_s-a w_100 w_50-640">
    <a class="pos_r block hover-effect" href="#">
      <img src="@@@e-vendo_src@@@/fantasy4.jpg" class="block">
      <div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 4</div>
    </a>
  </div>
</div>

Vorschau

bis 640px

Text 1

Text 2

Text 3

Text 4

ab 640px

Text 1

CSS- und HTML-Dokumentation

Inhaltsverzeichnis

Vorwort

Allgemeines

allgemeine Klassen

wichtige Breiten

Abstände

Rahmen

Schatten

Formulare

Text

Farben

Erste Strukturen

Floating

Komplexere Strukturen

Catalog

HTML

Klassen

Vorschau

Kacheln (Catblog, Subnavi)

HTML

Klassen

Vorschau

Klassen zur speziellen Verwendung

Slidergröße ändern

JavaScript-Funktionen

Bilder mit lazyloading einbinden

weiteres JavaScript einbringen

Swiper (ab Template-Version 8.0.13.0)

Integration eines Sliders (ein sichtbares Element mit voller Breite)

HTML

JavaScript

Integration eines Carousels (mehrere sichtbare Elemente nebeneinander)

HTML

JavaScript

Migration von Slick zu Swiper

Slider

Carousel

Nützliche HTML-Bausteine

Kacheln

HTML-Code

Vorschau

Navigationsmenü

Suche