Dein Warenkorb ist leer

Drops stylen

Lerne wie du das Styling deiner Drops anpassen kannst

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.

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

JTL Shop 4

Schreibe deine CSS Regeln in die custom.css deines aktiven Templates. Wenn du das Evo Template als Basis benutzt findest du diese Datei im Ordner [Shop-Root]/templates/Evo/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 Templates für unterschiedliche Shop-Templates (Tiny/Evo) mit. Die in deiner Installation verwendete Templatebasis 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 dieses Template überschreiben, kannst du wie schon beschrieben auch hier eine Custom-Datei anlegen:

template.evo_custom.tpl

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.