Jak na to: Úprava widgetů pomocí vlastního CSS

Každý widget je možné přizpůsobit pomocí různých nastavení přímo v našem editoru. Nebojte se vše prozkoumat a různá nastavení proklikat. Pokud ale potřebujete upravit vzhled nad rámec nabízených možností, je možné sáhnout k úpravě pomocí vlastního CSS kódu. K těmto úpravám je sice potřeba znát alespoň základy kódování, flexibilita je pak ale obrovská.

Celý obsah pole Vlastní CSS bude vložen do hlavičky generovaného widgetu. Vaše CSS pravidla tedy musí být obalena <style>...</style> tagem.

Pro úpravy pomocí vlastních CSS se doporučujeme obrátit na kodéra nebo správce vašich stránek.

Příklady

Změna písma

Jiný font a velikost písma u názvu produktu

<style>
  .title {
    font-family: Arial;
    font-size: 20px;
  }
</style>

Pokud chcete upravit písmo nebo jiné atributy u dalších elementů, je potřeba na ně vždy cílit dle jejich CSS tříd. Vetšinou používáme následující třídy.

• title pro název produktu
• price pro cenu produktu
• original-price pro původní cenu produktu, pokud je v akci
• action-price pro akční cenu produktu, pokud je v akci
• description pro popis produktu

Font z Google Fonts

Následující část kódu musí být vložena do hlavičky samotné stránky, na kterou widget vkládáte:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet">
    

Tento kód potom ve vlastních kódech u widgetu:

<style>
  .pwjs {
    font-family: 'Goldman', cursive;
  }
</style>

Pozor, úspěšnou změnu fontu je potřeba kontrolovat až na vaší cílové stránce s vloženým widgetem. U nás v editoru nebo náhledu widgetu nemusí být změna fontu vidět.

Změna barvy tlačítka při najetí myší(hover efekt)

<style>
  .btn:hover {
    background-color: darkgreen;
  }
</style>