Wechseln zu: Navigation, Suche

FAQ zu den Templates für JTL-Shop


Verwandte Themen:


Hinweis: Diese Seite bezieht sich auf das Tiny-Template von JTL-Shop 3.

Welche CSS-Dateien werden für mein Theme geladen und wo nehme ich Änderungen vor?

JTL-Shop3 nutzt die Bibliothek minify, um mehrere zu einem Theme gehörige CSS-Dateien zu einer einzigen komprimierten CSS-Datei zusammenzufassen. Die Vorteile dieser Kompression werden auf der Minify-Projektseite erläutert. Für die Template-Entwicklung mit Tools wie Firebug ist es jedoch hilfreich, Minify zu deaktivieren. Minify kann über das Admin-Backend unter Darstellung->Template->JTL-Shop3-Tiny Einstellungen an oder ausgeschaltet werden.

Die vom Theme zu ladenden CSS-Dateien werden in der Datei JTL-Shop3-Tiny/template.xml definiert.

Abhängig davon, welches Theme Sie im JTL-Shop3-Tiny Template aktiviert haben, werden die folgenden CSS-Dateien geladen:

    1. Theme Tiny
      1. themes/base/base.css
      2. themes/base/page.css
      3. themes/base/boxes.css
    2. Theme Blue
      1. themes/base/base.css
      2. themes/base/page.css
      3. themes/base/boxes.css
      4. themes/blue/theme.css
    3. Theme Lucid
      1. themes/base/base.css
      2. themes/base/page.css
      3. themes/base/boxes.css
      4. themes/lucid/theme.css
    4. Theme Dark
      1. themes/base/base.css
      2. themes/base/page.css
      3. themes/base/boxes.css
      4. themes/dark/theme.css
    5. Theme Retro
      1. themes/base/base.css
      2. themes/base/page.css
      3. themes/base/boxes.css
      4. themes/retro_shop2/theme.css
    6. Theme Benutzerdefiniert
      1. themes/base/base.css
      2. themes/base/page.css
      3. themes/base/boxes.css
      4. themes/custom/theme.css

Wie Sie anhand der obigen Auflistung erkennen können, basiert jedes Theme auf den Basis-CSS-Dateien des Tiny-Themes (base.css, page.css, boxes.css). In jedem Theme außer Tiny wird zuletzt eine CSS-Datei theme.css bzw. custom.css geladen, welche individuelle CSS-Regeln für das Theme hinzufügt. In dieser Datei nehmen Sie individuelle Anpassungen vor.

Für komplexere Theme-Anpassungen ist es sehr empfehlenswert, diese im Custom-Theme ("Benutzerdefiniert") vorzunehemen. So sind Ihre eigenen CSS-Änderungen von den Shop-CSS-Regeln getrennt und Sie müssen bei einem Template-Update nicht jede Änderung einzeln nachziehen.

Natürlich können Sie auch Ihr eigenes Theme erstellen: Spezifizieren Sie dazu in der Datei template.xml im Template-Ordner Ihren Theme-Namen, der im Admin-Backend angezeigt werden soll sowie die zu ladenden CSS-Dateien.

Kategoriebox: Wie hebe ich die aktuell gewählte Kategorie optisch hervor?

Bitte fügen Sie folgende CSS-Zeile in die CSS-Datei Ihres Themes hinzu:

.sidebox .categories .active > a { font-weight: bold; }

Hinweis: Wird in einem der nächsten Updates standardmäßig im JTL-Shop3-Tiny gesetzt sein.

Artikelübersicht: Wie kann ich Rahmen um die einzelnen Artikel ziehen?

Bitte fügen Sie folgende CSS-Zeile in die CSS-Datei Ihres Themes hinzu:

#styled_view .article_wrapper { border: 1px solid #ccc; }

Wie ändere ich das Favicon?

Das Standard-Favicon des Templates JTL-Shop3-Tiny liegt im Verzeichnis templates/JTL-Shop3-Tiny/themes/base/images/favicon.ico.
Sie können es durch ein eigenes Favicon ersetzen ( 16x16px, Dateiformat .ico ).


Wie geht es weiter?