Ú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:.

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 zkracené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 zkratit 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;
}