Eigenes Theme¶
Was ist ein Theme?¶
Ein Theme ist kein eigenständiges Template, sondern ausschließlich die Design-Komponente, die zu einem Template
gehört.
In JTL-Shop steuern Themes das individuelle Aussehen und Design des Shops per CSS-Regeln.
Das Template stellt das XHTML-Ausgabedokument bereit, während das Theme die einzelnen Elemente des
XHTML-Ausgabedokumentes per Cascading Stylesheets (CSS) visuell für die Bildschirm- und Druckausgabe anpasst.
Wichtig
Wie auch für Ihr eigenes Template, gilt für ein eigenes Theme:
kopieren Sie sich das jeweilige Beispiel-Theme („my-evo“ oder „my-nova“) aus dem Verzeichnis themes/,
des entsprechenden Templates, welches Sie unter
Beispiel-Templates finden in Ihr Child-Template und
bennenen dieses Ihren Wünschen gemäß um, wenn Sie das erste Mal ein Theme erstellen.
Struktur eines Themes¶
Ein Theme besteht aus einem Verzeichnis, welches sich unterhalb von [Shop-Root]/templates/[Template-Name]/themes/
befindet, sowie aus der darin enthaltenen CSS-Datei bootstrap.css und den LESS-Dateien less/theme.less
sowie less/variables.less, sofern es sich um ein EVO-Child-Template handelt.
In einem NOVA-Child-Template hingegen beinhaltet das Verzeichnis [Theme-name]/sass/ alle Style-Dateien. Hier
wären das die Dateien sass/_allstyles.scss und sass/_variables.scss.
Optional kann in beiden Templates das Verzeichnis images/ zum Beispiel Hintergrundgrafiken enthalten.
Das Unterverzeichnis js/ kann Javascript-Dateien und das Unterverzeichnis php/ kann php-Funktionen enthalten.
Beispiel, EVO:
templates/Evo/
├── account/
├── ...
├── themes/
│ ├── base/
│ │ └── ...
│ ├── bootstrap/
│ │ └── ...
│ ├── ...
│ ├── myTheme/
│ │ ├── images/
│ │ │ ├── background.jpg
│ │ │ └── ...
│ │ ├── less/
│ │ │ ├── theme.less
│ │ │ └── variables.less
│ │ ├── bootstrap.css
│ │ ├── custom.css
│ │ └── preview.png
│ └── ...
Die Datei bootstrap.css wird durch das Theme-Editor-Plugin aus den Dateien theme.less und variables.less
kompiliert und beinhaltet alle CSS-Regeln für den JTL-Shop.
Vorsicht
Diese Datei sollte nicht verändert werden, weil sie beim Kompilieren überschrieben wird.
Beispiel, NOVA:
templates/NOVA/
├── account/
├── ...
├── themes/
│ ├── base/
│ │ └── ...
│ ├── myTheme/
│ │ ├── images/
│ │ │ ├── background.jpg
│ │ │ └── ...
│ │ ├── sass/
│ │ │ ├── _allstyles.scss
│ │ │ ├── _variables.scss
│ │ │ └── myTheme.scss
│ │ ├── myTheme.css
│ │ ├── myTheme.css.map
│ │ └── custom.css
│ └─ ...
variables.less / _variables.scss¶
Diese Datei beinhaltet vordefinierte Variablen mit Farbwerten, Abständen, Breiten etc.
theme.less¶
In dieser Datei werden das Aussehen und das Design des Shops beeinflusst. Dabei kann auf die Variablen
der variables.less bzw. der _variables.scss zurückgegriffen werden.
Achtung
Der Pfad zur base.less des Templates muss in Ihrer theme.less korrekt definiert sein,
Beispiel:
// Load core variables and mixins
// --------------------------------------------------
//
// include basic less files from EVO template
@import "../../../../Evo/themes/base/less/base";
CSS und JavaScript anpassen¶
Sie können, neben dem Ändern und Erweitern von Template-Dateien, auch das CSS des Templates erweitern oder überschreiben.
Um Ihre eigenen CSS- oder JavaScript-Dateien in Ihrem Child-Template zu laden, gehen Sie bitte in die template.xml
Ihres Child-Templates.
Passen Sie diese folgendermaßen an:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template isFullResponsive="true">
<Name>Mein-Shop-Template</Name>
<Author>Max Mustermann</Author>
<URL>https://www.mein-shop.de</URL>
<Parent>Evo</Parent>
<Preview>preview.png</Preview>
<Description>Mein erstes Child-Template</Description>
<Settings>
<Section Name="Theme" Key="theme">
<Setting Description="Mein Theme" Key="theme_default" Type="select" Value="mytheme">
<Option Value="mytheme">Mein erstes Theme</Option>
</Setting>
</Section>
</Settings>
<Minify>
<CSS Name="mytheme.css">
<File Path="../Evo/themes/evo/bootstrap.css"/>
<File Path="../Evo/themes/base/offcanvas-menu.css"/>
<File Path="../Evo/themes/base/pnotify.custom.css"/>
<File Path="../Evo/themes/base/jquery-slider.css"/>
<File Path="css/mytheme.css"/>
</CSS>
<JS Name="mythememini.js">
<File Path="js/mytheme.js"/>
</JS>
</Minify>
<Boxes>
<Container Position="right" Available="1"></Container>
</Boxes>
</Template>
Bei dieser Variante wird davon ausgegangen, dass Ihre CSS-Datei im Ordner
[Shop-Root]/templates/Mein-Shop-Template/css/ liegt und mytheme.css heißt und Ihre JavaScript-Datei
im Ordner [Shop-Root]/templates/Mein-Shop-Template/js/ liegt und mytheme.js heißt.
Selbstverständlich können Sie die Dateien auch benennen, wie Sie möchten, solange Sie Ihre Referenzierung
dementsprechend anpassen.
Wenn Sie verschiedene Themes anlegen möchten, z.B. ein Weihnachts-Theme und ein Oster-Theme, können Sie
Ihre template.xml folgendermaßen anpassen:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template isFullResponsive="true">
<Name>Mein-Shop-Template</Name>
<Author>Max Mustermann</Author>
<URL>https://www.mein-shop.de</URL>
<Parent>Evo</Parent>
<Preview>preview.png</Preview>
<Description>Mein erstes Child-Template</Description>
<Settings>
<Section Name="Theme" Key="theme">
<Setting Description="Mein Theme" Key="theme_default" Type="select" Value="mytheme">
<Option Value="weihnachtstheme">Mein Weihnachts-Theme</Option>
<Option Value="ostertheme">Mein Oster-Theme</Option>
</Setting>
</Section>
</Settings>
<Minify>
<CSS Name="weihnachtstheme.css">
<File Path="../Evo/themes/evo/bootstrap.css"/>
<File Path="../Evo/themes/base/offcanvas-menu.css"/>
<File Path="../Evo/themes/base/pnotify.custom.css"/>
<File Path="../Evo/themes/base/jquery-slider.css"/>
<File Path="css/weihnachtstheme.css"/>
</CSS>
<CSS Name="ostertheme.css">
<File Path="../Evo/themes/evo/bootstrap.css"/>
<File Path="../Evo/themes/base/offcanvas-menu.css"/>
<File Path="../Evo/themes/base/pnotify.custom.css"/>
<File Path="../Evo/themes/base/jquery-slider.css"/>
<File Path="css/ostertheme.css"/>
</CSS>
<JS Name="mythememini.js">
<File Path="js/mytheme.js"/>
</JS>
</Minify>
<Boxes>
<Container Position="right" Available="1"></Container>
</Boxes>
</Template>
Wenn Sie unserem Beispiel gefolgt sind, müsste demnach Ihr Child-Template mittlerweile so aussehen:
templates/
├── Evo/
├── NOVA/
└── Mein-Shop-Template/
├── css/
│ ├── ostertheme.css
│ └── weihnachtstheme.css
├── js
│ └── mytheme.js
├── layout
│ └── header.tpl
├── php
│ └── functions.php
├── themes/
│ └── meinTheme/
│ ├── images/
│ │ └── ...
│ ├── less/
│ │ ├── theme.less
│ │ └── variables.less
│ ├── background.jpg
│ ├── mytheme.css
│ ├── custom.css
│ └── preview.png
├── template.xml
└── preview.png
Bemerkung
Als Beispiel sind in diesem Child-Template CSS- und LESS-Files integriert. Wir empfehlen Ihnen, sich auf eine Variante festzulegen.
Manche Dateien, wie z.B.
functions.php»» sind nur exemplarisch in dieser Struktur abgebildet und nicht obligatorisch. Das soll an dieser Stelle nur aufzeigen, dass Sie auch Funktionen überschreiben können.
Arbeiten mit LESS¶
Das EVO- wie auch das NOVA-Template arbeiten mit LESS-Dateien.
LESS kann als sprachliche Erweiterung von CSS verstanden werden und bietet gegenüber alleinigem CSS einige Vorteile.
So können CSS-Angaben beispielsweise verschachtelt und wiederverwendet werden.
Dadurch können Sie Ihre Styles besser und übersichtlicher strukturieren.
Bemerkung
LESS setzt einen Pre-Prozessor voraus, welcher die Sprachkonstrukte von LESS in CSS übersetzt.
Dieser Pre-Processor wird über das JTL-Plugin „JTL Theme-Editor“ bereitgestellt.
Hier sehen Sie den Unterschied zwischen CSS und LESS:
CSS
header {
padding: 5px;
}
header #header-branding {
padding: 15px 0;
}
LESS
header {
padding: 5px;
#header-branding {
padding: 25px;
}
}
Weitere Informationen dazu, was LESS Ihnen bieten kann, finden Sie auf lessscss.org
Im NOVA-Template gehen wir noch einen Schritt weiter.
Dieses Template verwendet die modernere Technologie Sass, die noch mehr Möglichkeiten bietet als LESS. Die
Sprachdateien von Sass sind an der Erweiterung .scss zu erkennen.
Mehr zu Sass finden sie auf sass-lang.org
Eigene LESS-Dateien im Theme¶
Wenn Sie in Ihrem Child-Template auch mit LESS arbeiten möchten, empfiehlt es sich, den Ordner mytheme/ aus dem
themes/-Order des Example-Child-Templates zu kopieren und entsprechend umzubenennen, z.B. in meinTheme/.
templates/
├── Evo/
├── NOVA/
└── Mein-Shop-Template/
├── themes/
│ ├── base
│ └── meinTheme/
│ ├── images/
│ │ └── background.jpg
│ ├── less/
│ │ ├── theme.less
│ │ └── variables.less
│ ├── mytheme.css
│ ├── custom.css
│ └── preview.png
├── template.xml
└── preview.png
Sie können nun in Ihrer theme.less LESS- oder CSS-Code einfügen und Ihren Shop individuell gestalten. Wenn Sie
Variablen in der Datei variables.less ändern, werden diese für alle Styles in Ihrem Shop geändert. Sie
können z. B. die Variable @brand-primary verändern und eine eigene Farbe eintragen. @brand-primary wird für
viele Elemente in JTL-Shop verwendet. Das Ändern dieser Variable hat also starken Einfluss auf das Aussehen
von JTL-Shop.
Probieren Sie es aus!
Anschließend müssen Sie Ihr Theme noch kompilieren!
(siehe Eigenes Theme mit dem Theme-Editor kompilieren)
Bemerkung
LESS-Dateien müssen nicht in die template.xml eingefügt werden. Der Theme-Editor erkennt LESS-Files
automatisch.
Eigenes Theme mit dem Theme-Editor kompilieren¶
Gehen Sie hierfür in das Backend von JTL-Shop.
Falls noch nicht geschehen, aktivieren Sie das Plugin „Evo Editor“ (Shop 4.x) bzw. das Plugin „JTL Theme-Editor“
(ab Shop 5.0).
Anschließend öffnen Sie das Plugin über seinen „Einstellungen“-Button in der Pluginverwaltung.
Wählen Sie nun in der Select-Box unter Theme Ihr Theme aus und klicken anschließend rechts auf den
Button Theme kompilieren.
Nun ist Ihr Template fertig kompiliert.
Wichtig
Ihr theme-Ordner benötigt Schreibrechte.
Weitere Möglichkeiten um Ihr Theme zu bearbeiten, finden Sie im Abschnitt „Themes editieren“.
Updatesicherheit¶
Um sicherzugehen, dass Ihre Änderungen in der Datei template.xml nicht durch ein Update rückgängig gemacht werden,
empfehlen wir, das eigene Theme in einem Child-Template abzulegen.