Úprava tlačítek v popupu po přidání do košíku

Budu využívat některé pojmy z předchozího návodu.

Změna barvy
Pro podrobnější vysvětlení se podívejte na předchozí návod.

Pokud nechcete měnit obě vlastnosti, stačí vynechat jeden z řádků background-color: a color:.

Vybral jsem si barvu #b50a16 pro pozadí a #ffffff pro text.
Levé tlačítko (Zpět do obchodu)
Pro levé tlačítko se používá selektor .added_to_cart_popup .btn.btn-default.

.added_to_cart_popup .btn.btn-default {
    background-color: #b50a16;
    color: #ffffff;
}

Pravé tlačítko
Pro pravé tlačítko se používá selektor .added_to_cart_popup .btn.btn-primary

.added_to_cart_popup .btn.btn-primary {
    background-color: #b50a16;
    color: #ffffff;
}

Odsazení
Pro odsazení uvnitř prvku se používá vlastnost padding, pro odsazení vně prvku se používá vlastnost margin

U tlačítka vlevo i vpravo je výchozí vnitřní odsazení nahoře i dole 6px, vpravo i vlevo 12px.

Syntaxe
Obě vlastnosti mají velmi podobnou syntaxi, u obou Vám ukážu odsazení pomocí jednotky px. Odsazení se může psát jak pro každou stranu zvlášt, tak i pro všechny najednou. Povšimněte si, že mezi velikosti odsazení a jednotkou px nesmí být mezera.

Místo VELIKOST_ODSAZENI_NAHOŘE (analogicky i u ostatních) napište určitou hodnotu, na kolik pixelů chcete dané odsazení nastavit, například vnitřní odsazení od horního okraje 5 pixelů se napíše jako padding-top: 5px;.

Každá strana zvlášť

selektor {
    padding-top: VELIKOST_ODSAZENI_NAHOŘEpx;
    padding-right: VELIKOST_ODSAZENI_VPRAVOpx;
    padding-bottom: VELIKOST_ODSAZENI_DOLEpx;
    padding-left: VELIKOST_ODSAZENI_VLEVOpx;
}

Pro margin se používá analogicky:

selektor {
    margin-top: VELIKOST_ODSAZENI_NAHOŘEpx;
    margin-right: VELIKOST_ODSAZENI_VPRAVOpx;
    margin-bottom: VELIKOST_ODSAZENI_DOLEpx;
    margin-left: VELIKOST_ODSAZENI_VLEVOpx;
}

Všechny strany najednou

selektor {
    padding: VELIKOST_ODSAZENI_NAHOŘEpx VELIKOST_ODSAZENI_VPRAVOpx VELIKOST_ODSAZENI_DOLEpx VELIKOST_ODSAZENI_VLEVOpx;
}
selektor {
    margin: VELIKOST_ODSAZENI_NAHOŘEpx VELIKOST_ODSAZENI_VPRAVOpx VELIKOST_ODSAZENI_DOLEpx VELIKOST_ODSAZENI_VLEVOpx;
}

Pokud máte všechny velikosti stejné, tak můžete i využít zkráceného zápisu, kde napíšete pouze jednu velikost a ta se použije na všechny strany.

selektor {
    padding: VELIKOST_ODSAZENIpx;
}
selektor {
    margin: VELIKOST_ODSAZENIpx;
}

Pokud máte stejné velikosti odsazení pro dvojice nahoře-dole a vpravo-vlevo, tak si můžete zápis zkrátit takto:

selektor {
    padding: VELIKOST_ODSAZENI_NAHORE_DOLEpx VELIKOST_ODSAZENI_VPRAVO_VLEVOpx;
}
selektor {
    margin: VELIKOST_ODSAZENI_NAHORE_DOLEpx VELIKOST_ODSAZENI_VPRAVO_VLEVOpx;
}

Příklad – pravé tlačítko
V tomto příkladu Vám ukážu jak změnit barvu pozadí, textu, vnitřní odsazení u všech stran na 10 pixelů a vnější odsazení vlevo na 15 pixelů.

.added_to_cart_popup .btn.btn-primary {
    background-color: #b50a16;
    color: #ffffff;
    padding: 10px;
    margin-left: 15px;
}

Autor: Jan Pokštefl

Jsem agentem v ExitShopu. Připravím Vám kompletně eshop, včetně pomoci nebo zaučení přímo u Vás ve firmě.