Pro úpravu stylů v grafice e-shopu přejděte do sekce Grafika / Editor kódu, oddíl Styles.

Technická specifika

  • Šablony jsou navrženy v CSS3.
  • Základem je upravený framework Bootstrap 4.5.
  • Grafika je plně responzivní.
  • Je vytvářená metodou mobile first.
  • Dále se používá vlastních specifických tříd.

Vlastní styly

Vlastní styly můžete vytvářet v souboru _custom.scss. Kód je možné psát v jazyku CSS nebo v jeho preprocesorové syntaxi SCSS. V případě změny verze designu na novější verzi se tento soubor promaže. Více zde.

Doporučení:

  • Nepřeformátovávat systémové třídy (class). Raději si vytvořte v HTML vlastní a tu následně definujte.
  • Nikdy nenavazujte vlastní styly na attributy data-designer. Tyto attributy se z kódu po překlopení na ostrou doménu smažou!

Systémové styly

Tyto styly jsou již vytvořené a můžete je dle vlastní potřeby upravovat.

Variables

Styly systému grafiky upravovat nelze. Je možné měnit pouze jejich SCSS proměnné v souboru _variables.scss. Pomocí těchto proměnných jednoduše upravíte grafická nastavení systému, aniž byste jakkoli zasahovali do stylopisu.

Doporučení:

  • Používá se syntaxe SCSS s $ před názvem proměnné.
  • Proměnné nikdy nemažte, protože styly vyhodí chybu a zruší se kompletně formátování. Je možné pouze upravovat jejich hodnoty.
  • U hodnot neměňte jednotky.

V případě zapsání špatné syntaxe se zobrazí chyba. Její definici najdete v hlavičce zdrojového kódu stránky. V tom případě použijte původní soubor ze zálohy.

Theme

V designerovi si můžete nastavit Motiv grafiky. Jeho styly najdete v oddílu Theme v souboru _theme.scss. Obsahuje:

  • Definici scss mixinu, který generuje samotné theme. Jedná se o factory, do kterého nemáte přístup.
  • A další speciální styly pro daný motiv.

Doporučení:

  • Atributy mixinu nikdy nemažte, protože styly vyhodí chybu a zruší se kompletně formátování. Je možné pouze upravovat jejich hodnoty.
  • U hodnot neměňte jednotky.

Nepomohla Vám tato nápověda?

Požádejte o radu zkušené eshopery v UPgates poradně.

UPgates poradna