Individuelle Theme Anpassung

Was ist ein Theme?

CSS-Themes im JTL-Shop3

Im JTL-Shop3 steuern Themes das individuelle Aussehen und Design des Shops per CSS-Regeln.
Ein Theme ist kein eigenständiges Template, sondern ausschließlich die Design-Komponente, die zu einem Template gehört.
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.

Struktur eines Themes

Ein Theme besteht aus einem Ordner, der sich im Verzeichnis <Shop-Root>/templates/JTL-Shop3-Tiny/themes/ befindet, sowie aus einer darin enthaltenen CSS-Datei theme.css sowie optional aus Hintergrundgrafiken in einem Unterordner images.

Themes Datei- und Ordnerstruktur

Die Datei theme.css enthält CSS-Regeln, die das Aussehen des Themes beeinflussen. Die Grafiken, die im Theme unter images liegen, können per CSS-Regel als Hintergrundgrafiken für Seitenelemente gesetzt werden.

Dadurch, dass die theme.css als letztes Stylesheet geladen wird, können Sie jede Style-Regel mit dem gleichen CSS-Selektor überschreiben.

Beispiel:

In der base.css ist die folgende CSS-Regel definiert:

h1 {
   margin : 0 0 0.5em 0;
   font : 2em "Trebuchet MS", sans-serif;
   color : #333;
}

Angenommen, Sie möchten für h1-Überschriften eine andere Schriftart setzen, dann fügen Sie folgende neue CSS-Regel in die theme.css Ihres Themes ein:

h1 { font: 2em "Verdana", sans-serif; }

Wie lege ich ein eigenes Theme an?

Möglichkeit 1: Custom-Theme nutzen

Für eigene Theme-Anpassungen basierend auf dem Tiny-Theme können Sie das custom-Theme nutzen, welches im Admin-Bereich unter Darstellung -> Templates -> Einstellungen -> Theme "Benutzerdefiniert" gesetzt werden kann.

Das custom-Theme finden Sie ausgehend vom Shop-Wurzelverzeichnis im Ordner templates/JTL-Shop3-Tiny/themes/custom/.
In der CSS-Datei theme.css im Custom-Theme Ordner können Sie Ihre eigenen CSS-Regeln definieren und so jedes Design-Element im Shop individuell anpassen.

Für das Custom-Theme werden die folgenden CSS-Dateien im Head-Bereich der Seite geladen:

  • themes/base/base.css
  • themes/base/page.css
  • themes/base/boxes.css
  • themes/custom/*theme.css*

Eigene Hintergrundgrafiken legen Sie am besten unter templates/JTL-Shop3-Tiny/themes/custom/images/ ab und binden diese in der theme.css mit der entsprechenden CSS-Regel ein.

Beispiel für die theme.css (setzt ein eigenes Header-Hintergrund, das man unter templates/JTL-Shop3-Tiny/themes/custom/images/header.jpg gespeichert hat):

#header { background: transparent url(images/header.jpg) top left no-repeat; }

Falls Sie Ihr Custom-Theme basierend auf einem anderen Theme wie z.B. "Lucid" oder "Blue" aufbauen möchten, so gehen Sie am besten folgendermaßen vor:
  • Inhalt der theme.css aus dem Theme z.B. Lucid übernehmen in die theme.css des Custom-Themes.
  • images-Ordner ebenfalls in das custom-Theme kopieren
  • CSS-Regeln in der custom/theme.css anpassen, neue eigene CSS-Regeln ergänzen...

Möglichkeit 2: Eigenes Theme erstellen und in Template einbinden

In der XML-Datei template.xml werden grundlegende template-spezifische Einstellungen sowie Themes definiert, die im Template zur Verfügung stehen. Die dort definierten Einstellungen werden im Admin-Backend unter Darstellung -> Template -> Einstellungen angezeigt und beim Klick auf speichern in die Datenbank geschrieben.

Falls Sie ein also vom Custom-Theme unabhängiges Theme erstellen-möchten (z.B. ohne die Basis-CSS-Dateien des JTL-Shop3-Tiny zu inkludieren), sind die folgenden Schritte notwendig:

Suchen Sie in ter template.xml zunächst nach folgendem XML-Block:

<Section Name="Theme" Key="theme">
  <Setting Description="Standard-Theme" Key="theme_default" Type="select" Value="tiny">
    <Option Value="tiny">Tiny</Option>
    <Option Value="blue">Blue</Option>
    <Option Value="lucid">Lucid</Option>
    <Option Value="dark">Dark</Option>
    <Option Value="retro_shop2">Retro</Option>
    <Option Value="custom">Benutzerdefiniert</Option>
  </Setting>
</Section>

Fügen Sie in diesen Block eine neue Zeile ein, die den Namen Ihres Themes (Theme-Ordnername) sowie den Anzeigenamen im Template definiert:

    <Option Value="meinEigenesTheme">Mein Eigenes Theme (Anzeigename)</Option>

Die XML-Datei template.xml im Stammordner des JTL-Shop3-Tiny Templates beinhaltet einen XML-Block <Minify>...</Minify> welcher pro Theme die zu ladenden CSS-Dateien enthält.
Fügen Sie in den <Minify>-Block die Gruppe der zu ladenden CSS-Dateien ein:

<CSS Name="meinEigenesTheme.css">
  <File Path="themes/base/base.css" />
  <File Path="themes/base/page.css" />
  <File Path="themes/base/boxes.css" />
  <File Path="themes/meinEigenesTheme/theme.css" />
</CSS>

In dem o.g. Beispiel definieren wir für das Theme, das unter themes/meinEigenesTheme/ liegt und eine Datei theme.css enthält, also die folgenden zu ladenden CSS-Dateien:
  • themes/base/base.css
  • themes/base/page.css
  • themes/base/boxes.css
  • themes/meinEigenesTheme/theme.css

Wichtig: Der Name der CSS-Gruppe, der unter <CSS Name="meinEigenesTheme.css"> definiert wurde, muss mit dem Value-Parameter übereinstimmen, der weiter oben in der Theme-Sektion gesetzt wurde.

shop_themes_overview_small.png - CSS-Themes im JTL-Shop3 (100,804 KB) D. Hannappel, 07.12.2010 11:50

themes_struktur.png - Themes Datei- und Ordnerstruktur (55,935 KB) D. Hannappel, 07.12.2010 16:04