Farbe im Template anpassen

Lesezeit 3 min

Um Anpassungen am Template vorzunehmen muss man die Farb-Codes der CSS-Klassen abändern. Doch wie lauten diese und was bewirken sie? 

Die CSS-Klassen haben Namen, wie z.B.  .text-primary womit die Farbe des Primärtextes gemeint ist. Hinter dem Namen steht eine Klammer mit einem Farb-Code. Das ganze sieht dann so aus:

.text-primary {
   color: #ff0000;
}

Der Farbcode #ff0000 gibt die Farbe an, in unserem Falle rot und kann beliebig durch den Farbcode Ihrer Wahl ersetzt werden. 

Generell empfehlen wir für Anpassungen die Entwickler-Funktion des Browsers zu nutzen.

Die Datei um eigene CSS-Klassen zu definieren findest du unter: 

/templates/DEIN-TEMPLATEChild/themes/mytheme/theme.css

Nachfolgend geben wir dir eine Auflistung mit ein paar CSS-Klassen mit an die Hand, deren Farbe du im Template anpassen kannst: 

#shop-nav .cart-menu > a > span.icon-handbag,
.slick-prev, .slick-next,
#shop-nav-xs.navbar-default, .main-wrapper.boxed .affix 
.navbar-default, .main-wrapper.fluid .navbar-default:not
(.navbar-offcanvas) {
    background-color: #ff0000;
}
.progress-bar,
.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-color: #ff0000;
}
.stepwizard .wizard-dot, .noUi-handle {
    background: #ff0000 !important;
}
#faq-accordion .menu:hover,
.button_edit, .btn-default:hover:not(.dropdown-toggle), 
.btn-default:focus:not(.dropdown-toggle), .btn-default:active:not
(.dropdown-toggle), .btn-default.active:not(.dropdown-toggle),
.btn-primary {
    background-color: #ff0000;
    border-color: #ff0000;
}
.image-gallery ul.image-thumbs li.active,
aside .panel-heading > span {
    border-color: #ff0000;
}
a:hover, a:focus,
.offer-slider h5,
header #top-bar .dropdown li a:hover, header #top-bar a:hover,
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus,
.nav-panel .active > a,
.text-primary,
#footer .panel a:hover,
.price, .special-price {
    color: #ff0000;
}
#logo a img {
    max-height: 68px;
    margin-top: -5px;
}
.offer-slider h4,
.offer-slider .body {
    color: #fff;
}