Grafická šablóna Barcelona posúva doterajšie možnosti nastavenia farieb systému BiznisWeb na vyšší level. Počet nastavovaných farieb v Design > Farba sa pre zjednodušenie znížil na 5 – zvýraznenie (akcent), jemné zvýraznenie, text, hlavné pozadie a farba rámčekov. Okrem týchto farieb sú systémové farby pre niektoré časti stránky alebo na zvýraznenie úlohy daného elementu, ako napr. výstražná farba pre chybové hlásenia, odstraňovacie tlačidlá a pod.
Hlavnou novinkou je automatická podpora pre tmavý / svetlý režim podľa nastavenia zariadenia. Doteraz videli farby nastavené v Design > Farba všetci návštevníci bez rozdielu. Ak je v šablóne povolené prepínanie režimov podľa nastavení používateľa a ak má tento používateľ na svojom mobile tmavé pozadie a biely text, potom sa zachová farba akcentu, no ostatné farby sa prepnú na tmavý režim. Alternatívne, ak je nastavená farebná kombinácia s tmavým pozadím, no tento používateľ na PC preferuje mať stále svetlú verziu stránky, tak sa opäť automaticky zmenia farby okrem akcentu. Ako sa tmavý / svetlý režim na vašej stránke prejaví, môžete vidieť v náhľade Ukážka vzhľadu grafických prvkov v Design > Farba.
Nastavované farby #
Sú to farby, ktoré si môžete nastaviť v administrácii v sekcii Design > Farba.
Farba Zvýraznenie (Accent): Farba bežných odkazov, zvýraznenie doležitých elementov, aktívnych polí a vybraných položiek ako checkboxy vo formulároch atp. Akcent je tiež použitý ako pozadie niektorých elementov alebo v čiastočne priehľadnej verzii (záleží na farbe pozadia – ak je tmavé, tak je čiastočne priehľadná verzia tmavšia, ak svetlé, tak svetlejšia) na odlíšenie v iných. Najdôležitejšia farba z nastavovaných, pretože zostáva rovnaká v tmavom aj svetlom režime stránky, preto by to mala byť farba relevantná vašej firemnej identite. Ideálne pre šablónu Barcelona (ale aj všeobecne) nastavovať výrazné, sýte farby. Elementy na stránke s pozadím v akcent farbe majú automaticky určenú dobre kontrastnú farbu textu / ikon (bielu alebo čiernu).
Farba pre Jemné zvýraznenie (Light accent): Používa sa na zvýraznenie menej dôležitých alebo viac početných elementov ako ich pozadie. Sú ňou sfarbené napr. pozadie formulárových polí, pozadie tabov a vyskakovacej časti hlavného menu. Mala by byť jemne odlišná od farby hlavného pozadia, no stále dostatočne kontrastná k farbe textu. V tmavom režime je použitá farba , vo svetlom .
Farba Text: Farba textu je použitá ako farba písma text, nadpisov, ikon a tlačidiel v elementoch, čo majú ako farbu pozadie Hlavné pozadie alebo Jemné zvýraznenie. Musí teda byť kontrastná k nim. Môže byť použitá aj ako farba niektorých odkazov v systémových elementoch, ako napr. menu produktových kategórií na stránke Kategória produktov. V tmavom režime je použitá farba , vo svetlom .
Farba Hlavné pozadie: Je to farba hlavného pozadia stránky. Niekedy použitá aj ako farba textu v elementoch, ktoré majú ako farbu pozadia farbu Text. Ak nastavujete Hlavné pozadie ako tmavé, ideálne je nedávať ho v plnej čiernej (), aby bolo odlišné od farby hlavného menu v hlavičke a od farby pätičky. V tmavom režime je použitá farba , vo svetlom .
Farba Rámčekov: Farba rámčeka niektorých elementov ako sú tabuľky a rôzne oddeľovacie čiary. V tmavom režime je použitá farba , vo svetlom .
Predvolené farebné schémy
Tak ako aj v ostatných grafických šablónach, ktoré podporujú zmenu farby, máte aj v šablóne Barcelona k dispozícii nami vymyslené farebné schémy, ak nechcete vymýšlať vlastné, alebo sa chcete inšpirovať. Predvolené schémy majú dobrý kontrast farieb.
Systémové farby #
Niektoré elementy majú farby pozadia a textu určené mimo Nastavených farieb. Takými je hlavné menu v hlavičke stránky a celá pätička stránky. Obe majú pozadie v plnej čiernej () a s bielym textom (), toto sa nemení ani pri prepínaní tmavého/svetlého režimu. Odporúčané je tieto farby nemeniť, no pre pokročilých používateľov, ktorí vedia pracovať s hexadecimálnym zápisom farieb, je možné úpravu zrealizovať v záložke CSS nasledovne – namiesto a doplníte vlastnú farbu:
Hlavné menu
:root {
/* Barcelona: zmena farby pozadia a textu hlavneho menu */
--barca-main-menu-bg: #000000;
--barca-main-menu-text: #ffffff;
}
Pätička
:root {
/* Barcelona: zmena farby pozadia a textu paticky */
--barca-footer-bg: #000000;
--barca-footer-text: #ffffff;
}
Ďalšou systémovou farbou je farba objednávacieho procesu. Sú ňou zafarbené tlačidlá súvisiace s nákupom – vkladanie produktu do košíka, hlavné tlačidlá nákupného košíka a objednávacieho formulára. Pre e-shopy je odporúčané mať jednoznačnú konverznú farbu, ktorá nakupujúceho zákazníka prevedie až k dokončeniu objednávky. Na tento účel používa šablóna Barcelona farbu . Opäť, odporúčané je ju nemeniť, no napr. v prípade prílišnej podobnosti s Akcentom je zmena na mieste. V takom prípade stačí nahradiť farbu #34c481 cez CSS záložku:
:root {
/* Barcelona: zmena objednavkovej farby */
--order-color: #34c481;
}
Niekedy je potrebné návštevníkovi stránky zobraziť informáciu alebo reakciu na nejaké jeho akcie alebo odoslanie formulárov. Na to sa používajú nasledovné systémové farby – Chyba: , Upozornenie: a Informácia: . Farba Chyba sa používa tiež na tlačidlá s odstraňovacou akciou, napr. odobratie produktu z nákupného košíka alebo zmazanie adresy v profile. Meniť tieto farby rozhodne neodporúčame.
Aj Systémové farby môžete vidieť na náhľade v Ukážka vzhľadu grafických prvkov, aby ste videli, ako ladia s Nastavovanými farbami.
Tmavý / Svetlý režim stránky #
Tmavý režim sa dá nastaviť na mobilných telefónoch a na desktopoch od verzie Windows 10 a macOS Mojave. Základné použitie v operačnom systéme je v prepnutí na tmavý režim, no moderné prehliadače majú aj vlastné nastavenie, väčšinou s 3 možnosťami zobrazenia webových stránok: Použiť nastavenie OS (Automatické), Svetlý režim, Tmavý režim. V každom prípade, webová stránka musí túto zmenu podporovať.
Grafická šablóna Barcelona podporuje tmavý / svetlý režim pomocou zmeny Nastavovaných farieb. Farba akcent sa zachová a ostatné štyri farby sa zmenia na nové hodnoty, nasledovným spôsobom:
Ak návštevník stránky preferuje tmavý režim
Jemné zvýraznenie
Text
Hlavné pozadie
Rámčeky
Ak návštevník stránky preferuje svetlý režim
Jemné zvýraznenie
Text
Hlavné pozadie
Rámčeky
Vypnutie režimov
Ak sa však rozhodnete, že nechcete umožniť návštevníkom vidieť vašu webovú stránku alebo e-shop v ich preferovanom tmavom alebo svetlom režime, je možné túto funkciu vypnúť v Design > Nastavenia šablóny, bod 1: Tmavý / svetlý režim podľa preferencie návštevníka. Zvoľte druhú možnosť, "Iba moje špecifikované farby".
Ukážka vzhľadu grafických prvkov #
Ako váš e-shop či webstránka vyzerá po nastavení farieb, vidíte v ukážke vzhľadu grafických prvkov v sekcii Design > Farba. Po zmene ľubovoľnej Nastavovanej farby sa vám vygeneruje nový náhľad farieb.
Kvôli možným komplikáciám, ktoré tmavý / svetlý režim prinášajú, sme pre tento náhľad doplnili prepínač náhľadov. Stačí prejsť myšou ponad zvolený náhľad a ukáže sa v ľavom hornom rohu. Tento prepínač nemá žiadny vplyv na zobrazenie vašej stránky alebo e-shopu návštevníkom, slúži len pre účely zmeny náhľadu. Má štyri hodnoty:
Farby: Ukážka je vygenerovaná priamo s Nastavenými farbami, ktoré ste zvolili, bez ohľadu na tmavý / svetlý režim.
Auto: Ukážka je vygenerovaná podľa nastavení vášho webu (Design > Farby a Design > Nastavenie šablóny) a nastavenia vášho systému. Ak nemáte nastavené žiadne nastavenia, tak je rovnaký ako v možnosti "Farby", inak je rovnaký ako jedna z možností "Svetlý" alebo "Tmavý".
Svetlý: Ukážka je vygenerovaná v svetlom režime, bez ohľadu na nastavenie v Design > Nastavenie šablóny. V týchto farbách uvidí vašu stránku návštevník, ktorý preferuje svetlý režim.
Tmavý: Ukážka je vygenerovaná v tmavom režime, bez ohľadu na nastavenie v Design > Nastavenie šablóny. V týchto farbách uvidí vašu stránku návštevník, ktorý preferuje tmavý režim.
Prepínač si pamätá vami zvolenú možnosť aj po obnovení náhľadu po zmene farieb.