Template-Farben anpassen

Lesezeit 6 min

Die Anpassungen des Templates, ob Farben oder bestimmte Elemente der Struktur, erfolgen im Child-Template, um das Haupt-Template updatefähig zu halten und die gemachten Anpassungen später leichter nachvollziehen zu können.

Nachfolgend ist ein Beispiel der CSS-Datei um die bestehenden Farben des Templates in hellgrün einzufärben. Das Ganze sieht wie folgt aus:

Beispiel der Anpassung

Die CSS-Datei des Themes erweitern

Der nachfolgende CSS-Code sollte im ausgewählten Theme in der CSS-Datei <theme.css> gespeichert werden. Nehmen wir an, du hast unter den Template-Einstellungen das Theme „Nutri (Eigenes Theme)“ ausgewählt.

Nutri-Theme

So lautet der Pfad zum Theme: /templates/FlexChild/themes/mynutri/theme.css.

Ein Beispiel des CSS-Codes

Füge diesen CSS-Code in die Datei ein und speichere sie ab.

/* Hauptfarbe, Navigation */
#shop-nav-xs.navbar-default,
#evo-main-nav.navbar-default {
    background: #6C9F2F;
}
/* etwas hellere Variante der Hauptfarbe um bestimmete Elemente hervorzuheben. Aktiver Element der Navigation, Pfeile der Slider */
.slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background: #93C02E;
}
/* Kopbereich in weiß */
header.container-block {
    background-color: #fff;
}
/* Topbar in hellgrau */
header #top-bar {
    background-color: #EEEEEE;
    border-bottom: 0;
}
/* Linkfarbe */
a:hover, a:focus,
.text-primary,
.pagination > li > a, .pagination > li > span,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
header #top-bar .dropdown li a:hover, header #top-bar .active > a, header #top-bar a:hover, header #top-bar .list-inline > li.cart-menu i,
#footer .panel a:hover {
    color: #6C9F2F;
}
/* Hintergrundfarbe der Suche (optional) */
header .input-group-addon {
    color: #999;
    background-color: #eee;
    border-color: transparent;
}
/* Primary-Button */
.btn-primary,
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus,
.btn-default:active:not(.dropdown-toggle), .btn-default.active:not(.dropdown-toggle) {
    background: #6C9F2F;
    border-color: #6C9F2F;
}
/* Farbe des Preis-Sliders */
.noUi-connect {
    background: #6C9F2F !important;
}
/* Farbe der Linie bei Überschriften */
.topArtikel .panel-heading::before, #content .panel-heading::before {
    background: #6C9F2F;
}
/* Aktiver Element der seitlicher Kategorienavigation + Badges */
aside .box-categories .nav > li.active > a:not(.nav-sub),
aside .box-categories nav > .nav > li.active > a,
.box-filter-special .nav > li > a:hover .badge, .box-filter-characteristics .nav > li > a:hover .badge, .box-filter-priceslider .nav > li > a:hover .badge {
    background-color: #6C9F2F;
    color: #fff;
}
/* Reiter-Menü / Tabs (optional) */
.nav-tabs > li > a:hover, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background-color: #444;
}
/* Button, in den Warenkorb (optional) */
.choose_quantity .btn-primary {
    background: #6C9F2F;
    border-color: #6C9F2F;
}
/* Swatches / Variationen (optional) */
.swatches.imgswatches .variation {
    background: #eee !important;
    padding: 0 5px;
    border: 1px solid transparent;
}
/* Swatches / Variationen, aktiver Element (optional) */
.swatches.imgswatches .variation.active {
    border-color: #6C9F2F;
}
/* Hintergrundfarbe im Fussbereich (optional) */
#footer .container-block, #footer.container-block {
    background-color: #f8f8f8;
}
/* Farbe der Linie im Fussbereich (optional) */
#footer {
    border-top-color: #eee;
}
/* Hintergrundfarbe des Newsletter-Feldes (optional) */
#footer .input-group .form-control, .input-group .twitter-typeahead:first-child .tt-input, .input-group .twitter-typeahead:first-child .tt-hint {
    border: 0;
    background-color: #EEEEEE !important;
}
/* Copyright-Bereich im Fuss, Hintergrundfarbe (optional) */
#footer #copyright.container-block {
    background-color: #fff;
    border-top: 1px solid #eee;
}
/* Schriftfarbe im Copyright-Bereich (optional) */
#footer #copyright a, #footer #copyright {
    color: #444;
}