/
Terra Theme

Terra Theme

Jun 05, 2018

Um das neue Theme benutzen zu können, musst du dein easyTemplate-Plugin auf die Version 1.2.3 updaten. Erst dann kannst du in deinem JTL Shop Backend unter Template > easyTemplate360 > Einstellungen > Theme auf das neue Theme umswitchen:

 

 

In der folgenden ausführlichen Dokumentation erfährst du alles zu den Einstellungsmöglichkeiten im Terra-Theme: Das sind mehr als 400 Farben, die du in deinem easyTemplate-Backend unter 'Farben' ganz individuell für jedes aktuelle easyTemplate360-Widget und für viele weitere Elemente aus dem Template anpassen kannst. Die Farbvariablen sind in Bereiche eingeteilt und gliedern sich nach den easyTemplate360-Widgets oder einzelnen Shopbereichen. In der Dokumentation haben wir diese Einteilung übernommen. Unter Punkt 10 erfährst du zusätzlich Infos zu den vordefinierten CSS-Klassen.

 

1. Einführung

 

Profitipp: Setze Farbwerte, die du nicht sehen möchtest, auf 'Transparent', da das Löschen der Farbwerte sonst zu Kompilierungsfehlern führt.
Bei einigen Elementen empfiehlt es sich auch, den Farbvariablen die verschwinden sollen, dieselbe Farbe wie dem Hintergrund des betreffenden Elements zu geben.

1.1 Globale Farben und Bugreport

Globale Farben wie Error-Messages, Bewertungssterne, Primäre-, Sekundäre-Farben oder globale Buttons sollten gleich zu Anfang definiert werden.
So kannst du sehen, welche Elemente im Theme nicht einzeln definiert werden können und entsprechend ein passendes Farbschema für deinen Onlineshop wählen.

 

Die Farbe 'Auffällige Farbe für Bugreport' definierst du am besten mit einer Farbe, die nicht in deinem gewünschten Farbschema vorkommt.
Diese Farbvariable ist mit einigen Elementen im Theme verknüpft, die unbekannt sind.
Du kannst der Entwicklung des Themes helfen, indem du einen Screenshot des Elements mit dieser Farbe machst und berichtest, an welcher Stelle und unter welchen Umständen diese Farbe erscheint:



Nicht alle Elemente sind definierbar.

 

Zu beachten ist auch, dass bei optional einstellbaren Elementen, wie z.B. der unteren Linie des Hauptbereichs oder Produkt-Variationen, die Farbwerte erst nach Aktivierung der jeweiligen Elemente greifen.
Sollte das Setzen einer Farbvariable also mal keinen Effekt haben, überprüfe bitte erst, ob du entsprechende Einstellungen im Backend oder in der Wawi aktiviert hast.
Entdeckst du aber Farbwerte, auf die du vermeintlich keinen Einfluss hast, könnte es auch an den von dir gesetzten Primär- bzw. Sekundärfarben liegen.

1.2 Globale Systemnachrichten

Globale Nachrichten sind Systemmeldungen des Shops und werden z.B. bei Fehlern oder Hinweisen genutzt.
Im folgenden Bild sind die beiden Variablen 'Information (Gelber Status)' und 'Gefahr! (Roter Status)' zu sehen:

Ähnliche Meldungen können z.B. bei erfolgreicher Registrierung oder dem Löschen des Benutzerkontos erscheinen.


Profitipp: Systemnachrichten sollten immer lesbar sein. Achte deshalb darauf, dass wichtige Kundeninformationen bei ungünstig gewählten Farben nicht verloren gehen.

1.3 Globale Variablen

Mit den globalen Variablen können globale Farben z.B. für den Hintergrund oder die Bewertungssterne definiert werden.
Zu beachten ist hierbei, dass die Definition nicht zwingend alle anderen Variablen überschreibt.
Soll z.B. die Hintergrundfarbe auf der kompletten Startseite einheitlich werden, müssen die Hintergrundfarben der aktiven Widgets mit derselben Farbe definiert werden.

 

Soll der Hintergrund der kompletten Startseite einheitlich sein, muss der Hintergrund für das News Widget entsprechend angepasst werden.

Info: Beachte bei der Wahl der Hintergrundfarbe, dass die Hintergrundfarbe für die Bilder vor einem Komplettabgleich im JTL Backend definiert werden muss.

 

1.4 Globale Tab-Navigation (Vertikales Menü)

Die Tab-Navigation findet sich z.B. in der Produkt-Detailansicht oder in der Kontoübersicht wieder.

Hier können die Farbwerte für die Texte, die Hintergrundfarbe der Tabs und deren jeweilige Hover-Effekte festgelegt werden.

1.5 Globale Bootstrap Dropdowns

Bootstrap ist ein vom easyTemplate360 benutztes Framework zur einfachen Bedienung und Umsetzung von Webprojekten. In diesem Bereich können einige in unserem Template genutzten Dropdown-Menüs farblich individuell gestaltet werden.

Diese Dropdowns finden sich zum Beispiel im JTL-Konfigurationsmodul wieder:

 

 

Back to Top

1.6 Globale Buttons

Da auch nicht alle Buttons im Template einzeln definierbar sind, gibt es die Möglichkeit Buttons global farblich zu definieren.
Diese Farbvariablen greifen dort, wo sonst kein Zugriff ist. Deshalb sollten sie gleich zu Beginn definiert werden, um evtl. Überschneidungen mit später definierten Farbwerten zu vermeiden.

Button-Style: In den globalen Einstellungen des easyTemplate360 Plugins, können vier verschiedene Buttons für Deinen Shop ausgewählt werden.

Typ 1 - Einfarbig mit Pfeil

 

Typ 2 - Einfarbig ohne Pfeil

 

Typ 3 - Verlauf mit Pfeil

 

Typ 4 - Verlauf ohne Pfeil

 

Wichtig: Bei einfarbigen Buttons gilt die obere Verlaufsfarbe als Hintergrundfarbe und die untere Verlaufsfarbe als Hover-Farbe.
Wird ein Button-Typ mit Verlauf gewählt, werden lediglich die Verlaufsfarben um 10% verdunkelt.