CSS- und HTML-Dokumentation: Unterschied zwischen den Versionen

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
(Schatten)
(Kacheln)
(37 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 19: Zeile 19:
  
 
= allgemeine Klassen =
 
= allgemeine Klassen =
 +
 
== wichtige Breiten ==
 
== wichtige Breiten ==
 
'''w_100''' : 100%<br>
 
'''w_100''' : 100%<br>
Zeile 37: Zeile 38:
  
 
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.
 
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 ==
 
== Abstände ==
Zeile 82: Zeile 84:
 
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:<br>
 
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:<br>
 
m-l_s-r<span style="font-weight:bold">--neg</span> erzeugt einen Margin links von -0.8em.
 
m-l_s-r<span style="font-weight:bold">--neg</span> erzeugt einen Margin links von -0.8em.
 +
  
 
== Rahmen ==
 
== Rahmen ==
Zeile 118: Zeile 121:
 
</div>
 
</div>
 
<div style="clear:left"></div>
 
<div style="clear:left"></div>
 +
  
 
== Schatten ==
 
== Schatten ==
Zeile 185: Zeile 189:
  
 
Eine Kombination verschiedener Schatten ist nicht möglich.
 
Eine Kombination verschiedener Schatten ist nicht möglich.
 +
  
 
== Formulare ==
 
== Formulare ==
Zeile 204: Zeile 209:
 
</div>
 
</div>
 
<div style="clear:left;"></div>
 
<div style="clear:left;"></div>
 +
  
 
== Text ==
 
== Text ==
Zeile 251: Zeile 257:
 
</div>
 
</div>
 
<div style="clear:left;"></div>
 
<div style="clear:left;"></div>
 +
  
 
== Farben ==
 
== Farben ==
Zeile 267: Zeile 274:
  
 
Für besondere Texte:<br>
 
Für besondere Texte:<br>
 +
'''f-color_prominent''' : <span style="color:#cd0a0a;">Prominentere Texte</span> (im Standard Rot)<br>
 
'''f-color_warning''' : <span style="color:#cd0a0a;">Warnfarbe</span> (im Standard Rot)<br>
 
'''f-color_warning''' : <span style="color:#cd0a0a;">Warnfarbe</span> (im Standard Rot)<br>
 
'''f-color_notice''' : <span style="color:#008000;">Hinweisfarbe</span> (im Standard Grün)<br>
 
'''f-color_notice''' : <span style="color:#008000;">Hinweisfarbe</span> (im Standard Grün)<br>
Zeile 272: Zeile 280:
 
'''highlight''' : <span style="color:#fa6107; font-weight:bold;">In der Highlight-Farbe und fett</span><br>
 
'''highlight''' : <span style="color:#fa6107; font-weight:bold;">In der Highlight-Farbe und fett</span><br>
 
'''f-color_onhigh''' : <span style="color:#ffffff; background-color:#fa6107; padding:0 0.4em;">Für einem Hintergrund in der Highlight-Farbe</span> (am besten zusammen mit '''bg-color_high''' benutzen)
 
'''f-color_onhigh''' : <span style="color:#ffffff; background-color:#fa6107; padding:0 0.4em;">Für einem Hintergrund in der Highlight-Farbe</span> (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:<br>
 +
f-color_color1'''-hover'''
  
  
Zeile 301: Zeile 312:
 
'''b_color7'''<br>
 
'''b_color7'''<br>
 
'''b_color8''', '''b_dark'''<br>
 
'''b_color8''', '''b_dark'''<br>
 +
  
 
= Erste Strukturen =
 
= Erste Strukturen =
 +
 
== Floating ==
 
== Floating ==
 
Um Elemente nebeneinander auszurichten, wird das Floating benötigt. Die folgenden Klassen helfen bei einem sauberen Einsatz.
 
Um Elemente nebeneinander auszurichten, wird das Floating benötigt. Die folgenden Klassen helfen bei einem sauberen Einsatz.
Zeile 324: Zeile 337:
  
 
= Komplexere Strukturen =
 
= Komplexere Strukturen =
 +
 
== Catalog ==
 
== 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.
 
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 ===
 
=== HTML ===
 
&lt;div class="<span style="color:blue;">catalog grid design</span>"><br>
 
&lt;div class="<span style="color:blue;">catalog grid design</span>"><br>
Zeile 338: Zeile 354:
 
<br>
 
<br>
 
&lt;/div>
 
&lt;/div>
 +
  
 
=== Klassen ===
 
=== Klassen ===
Zeile 344: Zeile 361:
 
;.catalog.design
 
;.catalog.design
 
:Fügt Abstände und Hintergrundfarben hinzu
 
:Fügt Abstände und Hintergrundfarben hinzu
 +
  
 
=== Vorschau ===
 
=== Vorschau ===
Zeile 386: Zeile 404:
 
<div style="clear:left;"></div>
 
<div style="clear:left;"></div>
 
</div>
 
</div>
 +
  
 
== Kacheln (Catblog, Subnavi) ==
 
== Kacheln (Catblog, Subnavi) ==
 
Es werden bis zu fünf Kacheln automatisch nebeneinander dargestellt je nach vorhandener linken oder rechten Seite im Shop.
 
Es werden bis zu fünf Kacheln automatisch nebeneinander dargestellt je nach vorhandener linken oder rechten Seite im Shop.
 +
 +
 
=== HTML ===
 
=== HTML ===
 
&lt;div class="<span style="color:blue;">tiles grid design</span>"><br>
 
&lt;div class="<span style="color:blue;">tiles grid design</span>"><br>
Zeile 397: Zeile 418:
 
<br>
 
<br>
 
&lt;/div>
 
&lt;/div>
 +
  
 
=== Klassen ===
 
=== Klassen ===
Zeile 403: Zeile 425:
 
;.tiles.design
 
;.tiles.design
 
:Fügt Abstände und Hintergrundfarben hinzu
 
:Fügt Abstände und Hintergrundfarben hinzu
 +
 +
;tiles.big.grid
 +
:erzeugt breitere Kacheln
 +
  
 
=== Vorschau ===
 
=== Vorschau ===
Zeile 443: Zeile 469:
 
<div style="clear:left"></div>
 
<div style="clear:left"></div>
 
</div>
 
</div>
 
  
 
= Klassen zur speziellen Verwendung =
 
= Klassen zur speziellen Verwendung =
Zeile 467: Zeile 492:
  
 
= JavaScript-Funktionen =
 
= JavaScript-Funktionen =
 +
 
== Slider und Carousel ==
 
== Slider und Carousel ==
 
Der Shop verwendet das Plugin [http://kenwheeler.github.io/slick/ slick], um Slider darzustellen.
 
Der Shop verwendet das Plugin [http://kenwheeler.github.io/slick/ slick], um Slider darzustellen.
 +
  
 
=== Carousel ===
 
=== Carousel ===
Zeile 537: Zeile 564:
 
Über den '''Overseer''' binden wir das Script an das globale einmalige Event window.load, da wir auf eventuelle Bilder im Slider warten müssen.
 
Über den '''Overseer''' binden wir das Script an das globale einmalige Event window.load, da wir auf eventuelle Bilder im Slider warten müssen.
 
Da wir nicht wissen, ob das Plugin schon dem Shop bekannt gemacht worden ist, rufen wir die Funktion '''async''' auf und übergeben ihr den Pfad zum Script. Jetzt wird das Script automatisch asynchron geladen und wir können als Callback (done) den Slider endlich starten.
 
Da wir nicht wissen, ob das Plugin schon dem Shop bekannt gemacht worden ist, rufen wir die Funktion '''async''' auf und übergeben ihr den Pfad zum Script. Jetzt wird das Script automatisch asynchron geladen und wir können als Callback (done) den Slider endlich starten.
 +
  
 
=== Slider ===
 
=== Slider ===
Zeile 543: Zeile 571:
 
'''slidesToShow:1'''<br>
 
'''slidesToShow:1'''<br>
 
'''slidesToScroll:1'''
 
'''slidesToScroll:1'''
 +
 +
 +
== 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:
 +
 +
&lt;img src="@@@e-vendo_src@@@/bild1.jpg" alt="mein Bild 1">
 +
 +
 +
Das wird umgewandelt in ein figure-Element mit data-Attributen:
 +
 +
&lt;figure data-src="@@e-vendo_src@@@/bild1.jpg" data-alt="mein Bild 1">
 +
 +
 +
Jetzt noch die Klasse lazyload hinzufügen:
 +
 +
&lt;figure '''class="lazyload"''' data-src="@@e-vendo_src@@@/bild1.jpg" data-alt="mein Bild 1">
 +
 +
 +
Nun wird das Bild erst geladen, wenn es in den Sichtbereich gelangt.
 +
  
 
== weiteres JavaScript einbringen ==
 
== weiteres JavaScript einbringen ==
Zeile 556: Zeile 609:
  
 
Was passiert hier?<br>
 
Was passiert hier?<br>
'''overseer.add(Name, function())''' nimmt zwei Parameter entgegen: Einen frei gewählten Namen oder Leerstring und eine Funktion.
+
'''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
 
;Name
:Der Name dient dazu, auf eine spezielle schon registrierte Funktion zuzugreifen. In der Regel ist das nicht nötig und hier kann einfach &quot;&quot;(Leerstring) übergeben werden.
+
:Der Name dient dazu, auf eine spezielle schon registrierte Funktion zuzugreifen, um diese noch einmal auszuführen.
 
;Funktion
 
;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
 
: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(){ ... }
 
: myFunction(){ ... }
 
:Overseer.add(&quot;&quot;, myFunction);
 
:Overseer.add(&quot;&quot;, myFunction);
 +
 +
{{wichtig|Der Overseer führt alle übergebenen Funktionen automatisch aus!}}
  
  
 +
= Nützliche HTML-Bausteine =
 +
== Kacheln ==
 +
;4x4-Raster:
 +
{{wichtig|Ab Template Version 8.0.10.0}}
 +
;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").
  
<span style="color:red; font-weight:bold;">Achtung: Der Overseer führt alle übergebenen Funktionen automatisch aus!</span>
+
=== HTML-Code ===
 +
 
 +
&lt;div class="clear_l m-t_m-a m-l_s-a--neg"><br>
 +
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy1.jpg" class="block"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 1&lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a><br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy2.jpg" class="block"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 2&lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a><br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy3.jpg" class="block"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 3&lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a><br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy4.jpg" class="block"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 4&lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a><br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&lt;/div>
 +
 
 +
=== Vorschau ===
 +
 
 +
;bis 640px
 +
 
 +
<div>
 +
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div>
 +
</div>
 +
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative; margin-top:10px;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 2</div>
 +
</div>
 +
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative; margin-top:10px;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 3</div>
 +
</div>
 +
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative; margin-top:10px;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 4</div>
 +
</div>
 +
</div>
 +
 
 +
;ab 640px
 +
 
 +
<div>
 +
<div style="float:left; margin-right:10px;">
 +
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
</div>
 +
<div style="float:left;">
 +
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
</div>
 +
<div style="clear:left"></div>
 +
</div>

Version vom 18. Januar 2021, 07:57 Uhr


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-a : margin von 25px
m_m-a : margin von 15px
m_s-a : margin von 10px
m_ss-a : margin von 5px

m_b-r : margin von 2em
m_m-s : margin von 1,2em
m_s-r : margin von 0,8em
m_ss-r : margin von 0,4em

nach innen (padding)

p_b-a : padding von 25px
p_m-a : padding von 15px
p_s-a : padding von 10px
p_ss-a : padding von 5px

p_b-r : padding von 2em
p_m-s : padding von 1,2em
p_s-r : padding von 0,8em
p_ss-r : padding von 0,4em

Beispiele

<div class="m_s-r"></div>

Inhalt

<div class="p_s-r"></div>

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
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

<div class="b_"></div>

<div class="b_t"></div>

<div class="b_tub"></div>

<div class="b_hat"></div>

<div class="b_t b_l"></div>


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

<div class="shadow"></div>

<div class="shadow-t"></div>

<div class="shadow-b"></div>

<div class="shadow-t-l"></div>

<div class="shadow-b-r"></div>

<div class="shadow small-shadow"></div>

<div class="shadow-t small-shadow"></div>

<div class="shadow-b small-shadow"></div>

<div class="shadow-t-l small-shadow"></div>

<div class="shadow-b-r small-shadow"></div>


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

Aufsteigend heller werdend:
f-color_basic : Grund-Farbe (im Standard #333333)
f-color_color1
f-color_color2, f-color_light
f-color_color3
f-color_color4, f-color_lighter
f-color_color5, f-color_lightest

Für besondere Texte:
f-color_prominent : Prominentere Texte (im Standard Rot)
f-color_warning : Warnfarbe (im Standard Rot)
f-color_notice : Hinweisfarbe (im Standard Grün)
f-color_high : In der Highlight-Farbe
highlight : In der Highlight-Farbe und fett
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_color1-hover


Hintergrundfarben

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:
bg-color_main : Haupthintergrund
bg-color_high : Highlight-Farbe
bg-color_high-hover : Highlight-Farbe bei Mouseover


Rahmenfarben

Wie Hintergrundfarben aufsteigend dunkler werdend:
b_color1
b_color2, b_light
b_color3
b_color4
b_color5, b_standard
b_color6
b_color7
b_color8, 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_b : Beendet ein float, sodass die nächsten Elemente wieder der normalen Ausrichtung folgen. Muss dem Elternelement angehängt werden.

Beispiele

<div class="clear_b">
  <div class="float_l m-r_m-a">1</div>
  <div class="float_l">2</div>
</div>

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

<div class="catalog grid design">

  <article>
    <div class="pic"></div>
    <div class="desc">
      <div class="desc-left"></div>
      <div class="desc-right"></div>
    </div>
  </article>

</div>


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%
50%
ab 880px
20%
50%
50%


Kacheln (Catblog, Subnavi)

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


HTML

<div class="tiles grid design">

  <div>
    <div></div>
  </div>


</div>


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.


JavaScript-Funktionen

Slider und Carousel

Der Shop verwendet das Plugin slick, um Slider darzustellen.


Carousel

Das Grundlegende HTML

<div id="mySlider" class="carousel">
  <div class="carousel-slider">
    <div class="slider-item">Inhalt für Slider-Element 1</div>
    <div class="slider-item">Inhalt für Slider-Element 2</div>
    <div class="slider-item">Inhalt für Slider-Element 3</div>
    <div class="slider-item">Inhalt für Slider-Element 4</div>
  </div>
  <div class="carousel-button carousel-next"><span class="fa angle-r_icon"></span></div>
  <div class="carousel-button carousel-prev"><span class="fa angle-l_icon"></span></div>
</div>


Das benötigte JavaScript

Der Slider kann auf verschiedenste Weise konfiguriert werden. Hier ist ein Beispiel der Bestseller des Shops mit verschiedenen Breakpoints (Pixelgröße des Bildschirms).

Mehr Informationen zur Konfiguration sind in der slick-Dokumentation zu finden.


Optionen für den Slider festlegen:

mySliderOptions = {
  vertical:false
  ,slidesToShow:4
  ,slidesToScroll:4
  ,adaptiveHeight:true
  ,infinite:true
  ,responsive: [
    {
      breakpoint:700,
      settings: {
        slidesToShow:3
        ,slidesToScroll:3
      }
    }
    ,{
      breakpoint:560,
      settings: {
        slidesToShow:2
        ,slidesToScroll:2
      }
    }
    ,{
      breakpoint:450,
      settings: {
        slidesToShow:1
        ,slidesToScroll:1
      }
    }
  ]
};


Jetzt wird es etwas komplizierter, denn wir müssen den Slider über das hauseigene JS-Framework SEO-freundlich initialisieren:

overseer.add(function(){
  mySliderOptions = $.extend(mySliderOptions,mySliderOptions,{prevArrow:$('#mySlider .carousel-prev'),nextArrow:$('#mySlider .carousel-next')});
  async.register('slick', '{shop}/js/jquery/slick.js').done(function(){
    $('#mySlider .carousel-slider').slick(mySliderOptions);
  });
}, events.LOAD);


Über den Overseer binden wir das Script an das globale einmalige Event window.load, da wir auf eventuelle Bilder im Slider warten müssen. Da wir nicht wissen, ob das Plugin schon dem Shop bekannt gemacht worden ist, rufen wir die Funktion async auf und übergeben ihr den Pfad zum Script. Jetzt wird das Script automatisch asynchron geladen und wir können als Callback (done) den Slider endlich starten.


Slider

Ein Slider, wie auf der Startseite des Shops, wird genauso gebaut. Dazu müssen lediglich noch zwei Werte in der Konfiguration angepasst und die Breakpoints entfernt werden:

slidesToShow:1
slidesToScroll:1


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:

<img src="@@@e-vendo_src@@@/bild1.jpg" alt="mein Bild 1">


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

<figure data-src="@@e-vendo_src@@@/bild1.jpg" data-alt="mein Bild 1">


Jetzt noch die Klasse lazyload hinzufügen:

<figure class="lazyload" data-src="@@e-vendo_src@@@/bild1.jpg" data-alt="mein Bild 1">


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);
Templ att-blk.png
Der Overseer führt alle übergebenen Funktionen automatisch aus!


Nützliche HTML-Bausteine

Kacheln

4x4-Raster
Templ att-blk.png
Ab Template Version 8.0.10.0
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
Text 1
Text 1
Text 1