Jak změnit barvu tlačítka Přidat do košíku

CSS si můžete doplnit v nastavení vzhledu Vašeho eshopu v záložce Vaše doplňkové CSS, svůj kód pište do stejnojmenného pravého textového pole.

Níže Vám prakticky ukážu jak si změnit barvu tlačítka Přidat do košíku, nyní Vám zbežně představím syntaxi CSS.

CSS slouží zejména k upravování vzhledu stránek, základní syntaxe by se dala napsat takto:

selektor {
    vlastnost: hodnota;
    další_vlastnost: hodnota !important;
}

Selektor označuje na co se mají aplikovat pravidla napsaná uvnitř závorek. Vlastnost může být v podstatě cokoliv, co se týče vzhledu (velikost, barva, odsazení, ...). Hodnota se pak různí, je závislá na zvolené vlastnosti. Na konci jednoho řádku můžete vidět !important, je to nepovinný zápis, který řekne prohlížeči, aby upřednostnil hodnotu vlastnosti v tomto řádku před ostatními. Středník (;) poté rozděluje jednotlivé vlastnosti.

Pro změnu pozadí se používá vlastnost background, pro změnu barvy textu se používá color. Vizte níže.

Barva se musí zadávat buď slovně (například black, white, yellow, red, ... - seznam podporovaných barev) nebo v hexadecimálním formátu (ve formátu buď #xxx nebo #xxxxxx, kde x je číslo 0-9 nebo znak a-f) - stránka pro výběr barev v hexadecimálním formátu

Níže si můžete pro svou šablonu zkopírovat kousek kódu, který Vám přebarví tlačítko; místo VAŠE_BARVA napište Vámi vybranou barvu v jenom z formátů uvedenou výše.

Změna barvy pozadí

Klasický eshop

Classic, XXLShake, DoubleVision, Elegant, Fashion, Wonder, Hipster

.plus-button, .product-add-to-shopping-basket {
    background: VAŠE_BARVA !important;
}

Simple, Happiness

.product-detail .btn-primary, .add-to-cart-group .product-add-to-shopping-basket {
    background: VAŠE_BARVA !important;
}

Jednostránkový eshop

Classic, Modern, Miton, Clean, Simple

.plus-button {
    background: VAŠE_BARVA !important;
}

Změna barvy textu

Pro přebarvení textu se používá, jak jsem již výše zmiňoval, vlastnost color, chcete-li tedy této změny docílit například u Klasického eshopu u šablony Classic, kód bude vypadat následovně:

.plus-button, .product-add-to-shopping-basket {
    background: VAŠE_BARVA !important;
    color: VAŠE_BARVA !important;
}

Obdobně můžete přidat řádek s color: VAŠE_BARVA !important; i do kódů uvedených u ostatních šablon.

Příklad Klasický eshop - Classic

Uvádím zde ilustrativní příklad pro Klasický eshop šablonu Classic. Černá barva je #000000 a bílá je #ffffff, tedy pozadí tlačítka bude černé a text bílý.

.plus-button, .product-add-to-shopping-basket {
    background: #000000 !important;
    color: #ffffff !important;
}