Použití vlastního zvýraznění

Webgarden od nynějška nabízí kromě 4 předpřipravených zvýraznění také možnost vytvořit si libovolné množství vlastních zvýraznění. To ocení především náročnější tvůrci stránek na Webgarden.
Opakování - použití zvýraznění
obr1.png
Pokud máme na stránce prvek, který chceme uživateli více zviditelnit, je vhodné použít jedno ze zvýraznění. Nad konkrétní prvek najedeme myší a zobrazí se nám jeho ovládací tlačítka. Klikneme na žluté ozubené kolečko pro editaci, následně zvolíme záložku rozšířené a vybereme jedno ze zvýraznění.
TIP: Doporučujeme nejdřív vyzkoušet všechna zvýraznění, a až poté se rozhodnout, které je nejvhodnější pro daný prvek.
obr2.png
obr3.png
Vlastní zvýraznění
Pokud nám ani jedno ze zvýraznění nevyhovuje, můžeme si vytvořit naše vlastní. Nejprve opět najedeme myší nad požadovaný prvek, klikneme na žluté editační ozubené kolečko a vstoupíme na záložku rozšířené. Následně u položky zvýraznění vybereme Vlastní a do přilehlého políčka zadáme název zvýraznění.
obr4.png
Pomocí editace CSS kódu
Nejdříve si ukážeme jak postupovat, pokud rozumíme CSS kódu. Přejdeme na záložku Vzhled a vstoupíme do Editace CSS. Na konec CSS umístíme kód pro zvýraznění našeho prvku. Nastavíme černou barvu pozadí a bílou barvu písma:
obr5.png
obr6.png
Pozn.: Zadaný název zvýraznění je v HTML jméno třídy. V CSS k němu tedy budeme přistupovat pomocí .mojeZvyrazneni.
.mojeZvyrazneni{
  background: rgb(0,0,0);
  color: rgb(255,255,255);
}
Na stránce se poté přesvědčíme o výsledku.
obr7.png
Bez použití CSS
Pokud neovládáme CSS, můžeme našemu zvýraznění nastavit styl pomocí Editoru vzhledu. Přejdeme na záložku Vzhled a zvolíme Editor vzhledu. Následně najedeme myší nad požadovaný prvek, který se nám žlutě podbarví.
obr8.png
Na žlutě označený prvek klikneme a otevře se nám dialogové okno s jednotlivými vrstvami. Najdeme vrstvu s názvem, který jsme zadali u vlastního zvýraznění, a přejdeme do jeho editace. V té nastavíme černou barvu pro pozadí prvku a bílou barvu pro písmo. Změny uložíme.
obr9.png
obr10.png
O výsledku se můžeme přesvědčit buď přímo v editoru vzhledu, nebo na samotné stránce.
obr11.png
obr7.png
Pozn.: Tento postup je demonstrován na vzhledových šablonách ze série 157f. Jiné vzhledové šablony mohou vyžadovat trošku jinou úpravu CSS, případně výsledná zvýraznění mohou na stránce vypadat jinak. Pokud budete potřebovat s nastavením zvýraznění pomoct, napište nám na podpoře.
22.09.2016 10:47:02
Redakce
Name
Email
Comment
Or visit this link or this one