YOOtheme šablony a CSS

Jedním z důvodů, proč mám v takové oblibě YOOtheme šablony je jejich inteligentní struktura CSS souborů, která umožňuje velmi snadné a elegantní doplnění vlastních stylů.

Pro ty z vás, kteří pouze vědí, že nějaké to CSS existuje, si zde dovolím uvést pár informací, které jim umožní porozumět...

CSS čili Cascading Style Sheets, česky obvykle Kaskádové styly je soubor metod pro grafickou úpravu webových stránek. Nerozumíte? Tak jinak, CSS je nějaký zápis, který určuje vzhled (barvy, dekorační obrázky, rozmístění prvků, atd) HTML dokumentu, tedy webové stránky.

Kaskádový styl je nazýván proto, že lze na sebe mohou vrstvit definice stylu, ale vždy platí jenom ta poslední a to je přesně to, oč mi zde jde.

V rámci CSS rozeznáváme tři základní formy přiřazení stylu:

1. Styl umístěný v externím souboru - jedná se o deklarace stylu, umístěné v souboru s příponou .css, soubor samozřejmě musí být provázán s dokumentem, který styluje, to, jak se to dělá ovšem není obsahem tohoto textu - z hlediska tvorby webu je toto řešení považováno za nejčistší.
2. Styl umístěný v hlavičce dokumentu - deklarace jsou zapisovány jako obsah elementu head přímo do stránky, kterou stylují.
3. Řádkové (inline) styly - ty jsou zapisovány formou deklarace přímo u jednotlivých HTML prvků.

Při použití těchto metod pak kaskádový styl funguje jako přebíjená - nejslabší kartou je externí soubor, uvedený nejvýše v hlavičce dokumentu, každý pod ním uvedený soubor (většina kvalitních šablon nahrává několik souborů) má vyšší hodnotu a může jeho deklarace přebít.

Deklarace uvedené v hlavičce souboru pak přebíjí deklarace jakéhokoliv externího souboru a úplně nejvyšší hodnotu má inline styl, který dokáže přebít veškeré předchozí deklarace - z pohledu CSS je to takové eso, i když, často spíš záchranná brzda...

A nyní zpět k šablonám YOOtheme - v rámci jejich konstrukce je to uděláno tak, že jako poslední externí CSS soubor je vždy nahráván soubor custom.css. O jeho účelu hovoří už jeho název - jedná o soubor, do kterého můžete uvést vlastní deklarace jakýchkoliv stylů CSS které, právě vzhledem k tomu, že se jedná v rámci externích css souborů o soubor s nejvyšší prioritou, přebíjí deklarace ostatních css souborů šablony. Stejně tak lze do tohoto souboru doplnit jakékoliv deklarace, které v šabloně postrádáte a právě o tom, jak do šablony doplnit třeba styly pro tlačítka či vstupní pole si povíme příště.

Jo, málem bych zapoměl, před každou aktualizací šablony je dobré si tento soubor zazálohovat, jinak máte po žížalkách - pardon, po deklaracích vlastního stylu :-))