Weitere Flaggen im Template definieren

Lesezeit 3 min

Alle Templates beinhalten standardmäßig nur zwei Flaggen für deutsch und englisch. Möchte man seinen Shop um weitere Sprachen erweitern, so kommt man um eine Anpassung des CSS-Codes nicht herum.

Etwas Hintergrundwissen…

Beim Einbinden einer weiteren Sprache erzeugt der JTL-Shop im Frontend einen neuen Eintrag mit einer neuen CSS-Anweisung.

<a class="link_lang ger"...

Die Abkürzung „ger„, „eng“ usw. steht für den ISO, eine Normung für Namen von Sprachen und kann über CSS-Anweisung wie folgt angeprochen werden:

.link_lang.ger {
background: url("../base/images/flags/ger.png") left center no-repeat;
padding-left: 20px;
}
/* oder für Englisch */
.link_lang.eng {
background: url("../base/images/flags/eng.png") left center no-repeat;
padding-left: 20px;
}

Eine neue CSS-Anweisung definieren

Nehmen wir an, wir möchten im Shop polnische Sprache anzeigen und müssen die polnische Flagge einbinden. So kann die CSS-Anweisung wie folgt aussehen:

.link_lang.pol {
background: url("../base/images/flags/pol.png") left center no-repeat;
padding-left: 20px;
}

In welcher Datei speichert man den CSS-Code?

Der CSS-Code sollte im Child-Template abgelegt werden und zwar in der CSS-Datei des gewählten Themes.

/templates/DeinChildTemplate/themes/DeinTheme/style.css
/* oder, kann je nach Template varieren */
/templates/DeinChildTemplate/themes/DeinTheme/theme.css

Die Grafik mit der Flagge

Bitte kopiere zuerst die Grafik mit der Flagge in den Ordner deines Child-Templates (sollte den Ordner nicht geben, lege ihn an). Die Grafik sollte 16×12 px groß sein und die Erweiterung PNG haben.

/templates/DeinChildTemplate/base/images/flags/