Wir entwickeln Drops immer mit dem Anspruch, dass diese in jedem JTL Shop - und somit in jedem Template - eine gute Ausgabe erzeugen. Ebenso sind Drops darauf optimiert, in jeder Breite zu funktionionieren, was sie somit responsive macht. Als Orientierung und Testfall dient uns stets das Standard Template Evo (JTL-Shop 4) bzw. Tiny (JTL-Shop 3).
Ein Drop kann sich natürlich nicht automatisch an den individuellen Stil und Anforderungen deines Shops anpassen. Hier musst du mit CSS (und evtl. auch Smarty) selbst eingreifen, um die für dich besten Ergebnisse zu erzielen. Aber keine Sorge: wir haben die Methoden zur Anpassungen für dich denkbar einfach gestaltet.
Drop Container
In den meisten Drops kannst du den optionalen Drop Container aktivieren.
Dieser Container umspannt die Inhalte deiner Drops und ermöglicht dir - neben der Aktivierung von
Lazy Loading
- die Definition von Außen- und Innenabständen (margin
und
padding). Auch die Ausrichtung der Inhalte (via
text-align) und zusätzliche CSS Klassen (class
Attribut) des Containers kannst du bestimmen.
Anpassungen per CSS
Wenn Drops Ausgaben erzeugen, sind diese meist mit CSS Regeln formatiert. Was aber, wenn du diese Regeln überschreiben oder erweitern möchtest?
JTL Shop 5 (NOVA Template)
Schreibe deine CSS- oder
SASS-Regeln
in die
custom.css
bzw.
/scss/theme.scss
deines Theme-Ordners ([ShopRoot]/templates/[DEIN-TEMPLATE]/themes/[DEIN-THEME]/).
Bitte beachte
hierbei die Empfehlung von JTL, mit
Child-Templates
zu arbeiten.
Im 'my-nova' Theme des
Demo-Child-Template 'Nova-Child'
kannst du deine Regeln in der
custom.css
bzw.
/sass/my-nova.scss
im Ordner
[Shop-Root]/templates/NOVAChild/themes/my-nova/
platzieren.
dropper.scss
Für mehr Übersicht und Ordnung empfehlen wir dir, CSS- und SASS-Regeln für deine Drops in separate Dateien, z.B. einer
dropper.scss, auszulagern. Platziere diese im gleichen Ordner wie deine
theme.scss
und importiere diese dann entsprechend:
// imports
// -----------------------------------------------------
[...]
@import "dropper.scss";
[...]
// 'my-theme' style rules
// -----------------------------------------------------
[...]
Kompilieren nicht vergessen!
Wenn du SASS verwendest, müssen alle Änderungen mit einem SCSS-Compiler (z.B. dem JTL-Theme-Editor Plugin) kompiliert werden.
JTL Shop 4 (Evo Template)
Schreibe deine CSS- oder LESS-Regeln in die
custom.css
bzw.
theme.less
deines Themes. Auch hier gelte die Empfehlunge für
Child-Templates.
Wenn du ein Child-Template namens
Evo-Child
verwendest, findest du die
theme.less
bspw. im Ordner
[Shop-Root]/templates/Evo-Child/themes/[Dein-Theme]/less/.
dropper.less
Um für etwas mehr Übersicht zu sorgen, lagere die CSS Regeln für deine Drops in eine separate
dropper.less
Datei aus. Platziere diese im gleichen Ordner wie deine
theme.less
und importiere diese dann entsprechend in der
theme.less:
[...]
@import "dropper";
[...]
// Navbar =======================================================
navbar {
[...]
}
Kompilieren nicht vergessen!
Wenn du Less Dateien verwendest, denk bitte daran, diese nach einer Änderung neu zu kompilieren. Das kannst du bspw. mit dem Evo Theme Editor erledigen.
CSS via Plain Drop
Du kannst CSS Regeln auch mit einem Plain Drop einfügen. Der Inhalt eines solchen Plain Drops würde wie folgt aussehen:
<style type="text/css">
.kk-powerslide .kk-my-slide {
[...]
}
</style>
Wir empfehlen dir, das Plain Drop in den
head
Bereich deiner Seite einzuhängen. Tipp: du kannst zusätzlich - wie für jedes andere Drop - auch Darstellungsfilter nutzen, um bspw. CSS Regeln nur für bestimmte Kundengruppen oder Zeiträume auszuspielen.
Für größere, allgemeinere CSS Anpassungen solltest du allerdings den oben beschriebenen Weg über das Template bzw. Theme gehen.
JTL Shop 3
Schreibe deine CSS Regeln in die
theme.css
deines aktiven Templates. Wenn du das Tiny Template als Basis benutzt findest du diese Datei im Ordner
[Shop-Root]/templates/JTL-Shop3-Tiny/themes/[Dein-Theme].
CSS Regeln überschreiben
Du solltest auch auf die Verwendung von
!important
Statements in deinen Regeln verzichten können, denn Dropper fügt den CSS Code der Drops immer vor den Stylesheets des Templates ein.
Deine CSS Regeln werden
also nach den Dropper Regeln ausgeführt und sind daher bei gleichen Selektoren
höher priorisiert. Guten Lesestoff zu CSS
findest du übrigens hier.
Custom Templates
Manchmal reicht es nicht, Elemente deiner Drops mit CSS zu stylen. Dann kommen Custom Templates ins Spiel.
Jedes Drop bringt eine Templatedatei
template.tpl
mit, die du im Ordner des Drops findest. Diese bestimmt wie sich das Drop anhand der von eingegebenen Daten rendert. Bei unserem Plain Drop findest du bspw. die Datei
template.tpl
im Ordner
[Shop-Root]/includes/plugins/kk_dropper/drops/Plain.
Wenn du die Templatedatei des Drops ändern möchtest, tue das bitte
nicht
direkt in der ausgelieferten Datei. Erstelle vorher ein Kopie der Datei und hänge ein
_custom
an den Dateinamen an. Aus
template.tpl
wird also
template_custom.tpl. Diese Datei wird dann anstelle der originalen Datei geladen.
Übgrigens: Custom Templates nutzen sowohl JTL Shop Templates als auch viele unserer Plugins. In unserer Plugin Dokumentation erklären wir das Prinzip in einem kurzen Screencast anhand eines Beispielplugins.
Besonderheiten
Einige Drops liefern angepasste Templatedateien für unterschiedliche Shop-Templates (Tiny/Evo) oder Frameworks (Bootstrap) mit. Die in deiner Installation verwendete Templateintegration kannst du in den Dropper Einstellungen festlegen.
Die Templatedateien für spezielle Shop-Templates haben folgende Form:
template.<base>.tpl
für das Evo-Template des JTL-Shop 4 beispielsweise:
template.evo.tpl
Möchtest du diese Templatedatei überschreiben, kannst du - wie schon beschrieben - auch hier eine Custom-Datei anlegen:
template.evo_custom.tpl
Templateintegrationen können übrigens auch
mehrere
<base>
Templates unterstützen: für das Evo-Template greifen bspw.
evo
und
bs3.
Der Hintergrund: viele JTL-Shop Templates nutzen das Frontend-Framework Bootstrap. Eine
template.bs3.tpl
führt so mitunter gleich in mehreren Templates zu einer optimierten Ausgabe des Drops.
Custom Templates und Drop Updates
Der Einsatz von Custom Templates führt im Falle von Drop Updates leider zu einem gewissen Mehraufwand.
Custom Templates werden bei einem Update zwar nicht überschrieben, werden dafür allerdings auch nicht mit aktualisiert. Relevante Änderungen der Orignaldateien könnten dir so entgehen. Vergleiche daher nach einem Update die Originaldateien mit deinen angepassten Dateien und ziehe Änderungen ggf. manuell nach.
Nur für Kenner
Änderungen am CSS einer Webseite erzeugen selten schwere Fehler. Änderungen an Templatedateien sind da durchaus kritischer. Bitte ändere Templatedateien nur, wenn du weißt, was du tust. Auch empfehlen wir gute Smarty Kenntnisse.
Ein Blick in unsere Entwicklerdokumentation ist ebenfalls empfehlenswert.