Přizpůsobení vzhledu prodejního formuláře pomocí CSS

Tento návod je pro službu: SimpleShop

Máte již na svém webu prodejní formulář, ale jeho výchozí barevné podání se k vašemu webu nehodí? V tom případě můžete využít tohoto návodu.

TIP: Pro jednoduché změny barevnosti můžete použít editor na záložce Formulář.

Kde změny provádět

Otevřete si produkt, u kterého chcete úpravy provést, a přejděte na záložku OstatníJS, CSS a jiné kódy.

JS, CSS a jiné kódy

Změna vzhledu tlačítka

Pro příklad si určíme, že bychom chtěli mít tlačítko pro dokončení nákupu modré, aby se nám formulář více hodil ke vzhledu našich stránek. Pro výběr barvy můžeme využít například color picker přímo od Googlu.

Do zmíněného pole JS, CSS a jiné kódy vložíme následující text:

<style>.btn.positive.fill {background: #306bf4;}</style>

Hodnotu za textem background: Vložíme dle color pickeru, kde jsme si vybrali požadovanou barvu.

Google color picker

Zelené okraje tlačítka se ale k modré barvě nehodí, takže je také změníme. Tentokrát na tmavě modrou. Doplníme tedy atribut border-color s námi zvolenou barvou.

Celý kód, který do pole budeme vkládat, vypadá takto:

<style>.btn.positive.fill {background: #306bf4; border-color: #1400f7;}</style>

Náhled:

Prodejni_formular_vzhled_6

Samotné zakulacení tlačítek můžeme kompletně odebrat nebo změnit atributem border-radius, tlačítko tedy bude hranaté. Výsledný kód je tento:

<style>.btn.positive.fill {background: #0078d7!important; border-radius: 0px!important;}</style>

Náhled:

Prodejni_formular_vzhled_7

Pro případ, kdy bychom chtěli ještě změnit barvu písma tlačítka, tak využijeme atribut color. Zapisujeme jej stejným způsobem jako v předchozích případech.

Výchozí tmavě zelená barva tlačítka po jeho najetí myší se nám pravděpodobně nebude hodit k růžové nebo jiné zásadně odlišné barvě. I tu lze jednoduše ve formuláři změnit ve třídě btn.positive.fill:hover. Zápis provádíme stejným způsobem jako standardní změnu barvy. Jako vzor můžete využít kód níže, který po najetí myší jej změní na zářivě červenou.

<style>.btn.positive.fill:hover {background: red!important; border-color: maroon!important;}</style>

Náhled:

Prodejni_formular_vzhled_8

Změna barev varianty

Samozřejmě jen barvou pozadí tlačítka to nekončí. Můžeme také změnit ohraničení a barvu ikonky u vybrané varianty produktu. Například pokud budeme chtít červenou fajfku a modré ohraničení, tak využijeme tento kód:

<style>
.ss-page-form .table-wrapper .table.decPrice .tr .td .cover .line1 .itemLabel .ss-ok{color:red;}
.ss-page-form .table-wrapper .table.decPrice .tr.sel .td .cover{border:1px solid blue !important;}
</style>

Náhled:

Prodejni_formular_vzhled_9

Změna barev nadpisů

Vzhled nadpisů můžeme měnit stejně jako tlačítko. Formulář využívá třídu header-main, kterou můžeme upravit přidáním tohoto kódu:

<style>.header-main {color: #f70000;}</style>

Náhled:

Prodejni_formular_vzhled_10

Barvu si stejně jako v předchozím případě vybereme v color pickeru od Googlu. Zápis do pole JS, CSS a jiné kódy bude vypadat takto:

<style>h2 {color: #f70000;}</style>

Náhled:

Prodejni_formular_vzhled_11

V našem příkladu máme nadpisy červené. Ještě si ukážeme změnu hlavního nadpisu, který bude fialový. Jako celek vložíme tento kód, kde jsou oba typy nadpisů:

<style> h2 {color: #f70000;} .header-main {color: #9400f7;}</style>

Kombinace obou uvedených možností

Samozřejmě obě možnosti můžeme zkombinovat, postup se liší pouze zápisem do zmíněného pole, kdy je vhodné za každým prvkem udělat mezeru a za ni vložit další prvek.

Celý příklad, který máme v předchozích částech, bychom tedy vložili takto:

<style>.btn.positive.fill {background: #306bf4; border-color: #1400f7; color: #ffffff;} h2 {color: #f70000;} .header-main {color: #9400f7;}</style>

Formulář bude po provedení změn vypadat takto:

Vzhled prodejního formuláře

Související články

Jindra

Tento návod pro vás napsal Jindřich Bobek, vývojář aplikací v Redbit s. r. o.

S radostí ladí mobilní aplikace a do systémů Vyfakturuj.cz i SimpleShop doplňuje žádaná vylepšení. Volné chvíle věnuje hře Minecraft.

Chcete se k článku na něco zeptat?

Napište nám