Close

Jak upravit barvy ve formuláři podle svých představ

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.

Kde změny provádět

V případě, že již máte vytvořený produkt, stačí jej otevřít a přejít k samotným úpravám v poli JS, CSS a jiné kódy úplně dole v záložce Ostatní.

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.

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>

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.

Změna barev nadpisů

Vzhled nadpisů můžeme měnit stejně jako tlačítko. Nadpisy jsou rozděleny na jednotlivé úrovně. Nadpis úrovně 1 (h1) má ve výchozím text „Objednávka“ a další nadpisy úrovně 2 (h2) jsou vždy nad jednotlivými částmi formuláře.

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>

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

<style> h2 {color: #f70000;} h1 {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;} h1 {color: #9400f7;}</style>

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

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *