Grafická šablona Barcelona posouvá dosavadní možnosti nastavení barev systému ByznysWeb na vyšší úroveň. Počet nastavitelných barev v Design > Barva byl zjednodušen na 5 – zvýraznění (akcent), jemné zvýraznění, text, hlavní pozadí a barva rámečků. Kromě těchto barev jsou systémové barvy určeny pro některé části stránky nebo pro zdůraznění úkolu daného prvku, například výstražná barva pro chybová hlášení, tlačítka pro odstranění apod.
Hlavní novinkou je automatická podpora pro tmavý / světlý režim podle nastavení zařízení. Dosud viděli všichni návštěvníci barvy nastavené v Design > Barva stejně. Pokud je v šabloně povoleno přepínání režimů podle nastavení uživatele a pokud má uživatel na svém mobilním zařízení tmavé pozadí a bílý text, zachová se barva akcentu, ale ostatní barvy se přepnou do tmavého režimu. Alternativně, pokud je nastavena barevná kombinace s tmavým pozadím, ale tento uživatel na PC preferuje stále světlou verzi stránky, barvy se opět automaticky změní kromě akcentu. Jak se tmavý / světlý režim na vaší stránce projeví, můžete vidět v náhledu v Design > Barva Ukázka vzhledu grafických prvků.
Seznam témat:
Nastavované barvy #
Jsou to barvy, které si můžete nastavit v administraci v sekci Design > Barva.
Barva Zvýraznění (Accent): Barva běžných odkazů, zvýraznění důležitých prvků, aktivních polí a vybraných položek jako zaškrtávací políčka ve formulářích atp. Akcent je také nastaven jako pozadí některých prvků nebo v částečně průhledné verzi (závisí na barvě pozadí - pokud je tmavé, je částečně průhledná verze tmavší, pokud světlé, je světlejší) pro odlišení od ostatních. Je to nejdůležitější barva ze všech nastavitelných, protože zůstává stejná v tmavém i světlém režimu stránky, a měla by tedy být relevantní pro vaši firemní identitu. Ideální je nastavit výrazné, syté barvy nejen pro šablonu Barcelona (ale i obecně). Elementy na stránce s pozadím v akcent barvě mají automaticky určenou vhodnou kontrastní barvu textu/ikon (bílou nebo černou).
Barva pro Jemné zvýraznění (Light accent): Používá se k zvýraznění méně důležitých nebo více početných prvků než je jejich pozadí. Touto barvou jsou například pozadí polí ve formulářích, pozadí záložek a vyskakovacího menu. Měla by být jemně odlišná od barvy hlavního pozadí, ale stále dostatečně kontrastní k barvě textu. V tmavém režimu je použita barva farba , ve světlém .
Barva Text:Tato barva se používá jako barva písma textu, nadpisů, ikon a tlačítek v prvcích, které mají jako pozadí Hlavné pozadí nebo Jemné zvýraznění. Musí tedy být kontrastní k nim. Může být použita také jako barva některých odkazů v systémových prvcích, například v menu produktových kategorií na stránce Kategorie produktů. V tmavém režimu je použita , ve světlém .
Barva Hlavní pozadí: Je to barva hlavního pozadí stránky. Někdy se také používá jako barva textu v prvcích, které mají jako pozadí barvu Textu. Pokud nastavujete Hlavní pozadí jako tmavé, je ideální nepoužívat plně černou (#000000), aby se lišilo od barvy hlavního menu v záhlaví a od barvy zápatí. V tmavém režimu je použita barva , ve světlém .
Barva Rámečků: Barva rámečku některých prvků, jako jsou tabulky a různé oddělovací čáry. V tmavém režimu je použita barva , ve světlém .
Předvolené barevné schéma
Stejně jako v ostatních grafických šablonách, které podporují změnu barev, máte k dispozici předdefinovaná barevná schémata, pokud nechcete vytvářet vlastní nebo se nechat inspirovat. Předvolené schémata mají již nastaven dobrý kontrast barev.
Systémové barvy #
Některé prvky mají barvy pozadí a textu určeny mimo Nastavených barev. Patří sem hlavní menu v záhlaví stránky a celé zápatí stránky. Oba mají pozadí plně černé () a s bílým textem (), což zůstává nezměněno při přepínání tmavého/světlého režimu. Doporučuje se tyto barvy neměnit, ale pro pokročilé uživatele, kteří pracují s hexadecimálním zápisem barev, je možné úpravu provést v záložce CSS následujícím způsobem – místo a doplníte vlastní barvu:
Hlavní menu
:root {
/* Barcelona: zmena barvy pozadi a textu hlavniho menu */
--barca-main-menu-bg: #000000;
--barca-main-menu-text: #ffffff;
}
Patička
:root {
/* Barcelona: zmena barvy pozadi a textu paticky */
--barca-footer-bg: #000000;
--barca-footer-text: #ffffff;
}
Další systémovou barvou je barva objednávkového procesu. Touto barvou jsou zbarvena tlačítka související s nákupem – vložení produktu do košíku, hlavní tlačítka nákupního košíku a objednávkového formuláře. Pro e-shopy je doporučeno mít jasnou konverzní barvu, která zákazníka přivede k dokončení objednávky. Šablona Barcelona používá pro tento účel barvu . Opět se doporučuje ji neměnit, ale v případě přílišné podobnosti s Akcentem je možné zrealizovat změnu abrvy #34c481 přes CSS záložku:
:root {
/* Barcelona: zmena objednavkove barvy */
--order-color: #34c481;
}
Někdy je potřeba návštěvníkovi stránky zobrazit informaci nebo reakci na jeho akce nebo odeslání formulářů. K tomu se používají následující systémové barvy – Chyba: , Upozornění: a Informace: . Barva Chyba se také používá pro tlačítka s odstraňovací akcí, například odstranění produktu z nákupního košíku nebo smazání adresy v profilu. Doporučujeme tyto barvy rozhodně neměnit.
Systémové barvy můžete také vidět v náhledu v Ukázka vzhledu grafických prvků, abyste viděli, jak ladí s Nastavovanými barvami.
Tmavý / Světlý režim stránky #
Tmavý režim lze nastavit na mobilních telefonech a na počítačích od verze Windows 10 a macOS Mojave. Základní použití v operačním systému spočívá v přepnutí na tmavý režim, ale moderní prohlížeče mají také vlastní nastavení, obvykle s 3 možnostmi zobrazení webových stránek: Použít nastavení OS (Automatické), Světlý režim, Tmavý režim. V každém případě musí webová stránka tuto změnu podporovat.
Grafická šablona Barcelona podporuje tmavý / světlý režim změnou Nastavovaných barev. Barva akcentu zůstane zachována a ostatní čtyři barvy se změní na nové hodnoty následujícím způsobem:
Pokud návštěvník stránky preferuje tmavý režim
Jemné zvýraznění
Text
Hlavné pozadí
Rámečky
Pokud návštěvník stránky preferuje světlý režim
Jemné zvýraznění
Text
Hlavní pozadí
Rámečky
Vypnutí režimů
Pokud se však rozhodnete, že nechcete umožnit návštěvníkům vidět vaši webovou stránku nebo e-shop ve svém preferovaném tmavém nebo světlém režimu, tuto funkci lze vypnout v Design > Nastavení šablony, bod 1: Tmavý / světlý režim podle preference návštěvníka. Zvolte druhou možnost, „Jen mé specifikované barvy".
Ukázka vzhledu grafických prvků #
Jak váš e-shop nebo webová stránka vypadá po nastavení barev, můžete vidět v ukázce vzhledu grafických prvků v sekci Design > Farba. Po změně libovolné Nastavované barvy se vám vygeneruje nový náhled barev.
Kvůli možným komplikacím, které tmavý / světlý režim může přinést, jsme pro tento náhled přidali přepínač náhledů. Stačí přejet myší nad vybraný náhled a objeví se v levém horním rohu. Tento přepínač nemá žádný vliv na zobrazení vaší stránky nebo e-shopu návštěvníkům, slouží pouze k změně náhledu. Má čtyři hodnoty:
Barvy: Ukázka je generována přímo s Nastavenými barvami, které jste vybrali, bez ohledu na tmavý / světlý režim.
Auto: Ukázka je generována podle nastavení vašeho webu (Design > Barvy a Design > Nastavení šablony) a nastavení vašeho systému. Pokud nemáte nastavena jiná nastavení, je stejná jako možnost „Barvy", jinak je stejná jako jedna z možností „Světlý" nebo „Tmavý".
Světlý: Ukázka je generována ve světlém režimu, bez ohledu na nastavení v Design > Nastavení šablony. V těchto barvách uvidí vaši stránku návštěvník, který preferuje světlý režim.
Tmavý: Ukázka je generována v tmavém režimu, bez ohledu na nastavení v Design > Nastavení šablony. V těchto barvách uvidí vaši stránku návštěvník, který preferuje tmavý režim.
Přepínač si pamatuje vaši zvolenou možnost i po obnovení náhledu po změně barev.