Úvod do kaskádových stylů (CSS)
Cascading Style Sheets neboli česky kaskádové styly jsou definice grafické podoby webových stránek. Definují například styl písma, barvy, pozici jednotlivých prvků na stránce a další.
Ve výchozích šablonách vkládáme soubor s kaskádovými styly automaticky pomocí tagu <head id="LayoutHead" runat=server>
. Laicky řečeno, vkládáme soubor s příponou .css do hlavičky hlavní šablony Layout.ascx mezi HTML tagy <header></header>. Jedná se o způsob, kdy veškeré úpravy vzhledu provádíš přímo z Managera. Vhodné zejména pro uživatele bez znalosti HTML a CSS. Další metodou vkládání css stylů je klasicky pomocí tagu link, kterou ale popíšu v jiném článku.
V současné chvíli je v Manageru možnost zvolit si ze 4 barevných schémat vzhledu (výchozí Blue, Red, Boutique, Technics). Najdeš je v Agendě Konfigurace webové části prodejny / Vzhled prodejny. U každého schéma je možnost zvolit si rozložení stránek. Pokud chceš nějakou položku změnit, Manager tě vyzve na vytvoření kopie barevného schéma, zadáte jen název a kopie schéma se automaticky vytvoří. V této fázi již můžeš upravit vzhled podle svých představ.
Po odeslání změn na server pomocí odkazu v horní liště Managera Synchronizace konfigurace webové části / Odeslat změny konfigurace webové části na server se díky výše popisovanému tagu <head id="LayoutHead" runat=server>
vygenerují ve zdrojovém kódu stránky 2 definice kaskádových souborů.
Příklad vložení obou CSS stylů
<link href="/inshop/layout/schemata/Blue/hlmrf.css" type="text/css" rel="stylesheet" />
<link href="/inshop/layout/schemata/MojeNoveSchema/hlmrf.css" type="text/css"
rel="stylesheet" />
První styl
Blue/hlmrf.css je výchozí styl, ze kterého byla vytvořena kopie. Obsahuje XML definici vlastností, které se objevují v Manageru v Agendě Vzhled prodejny jako dostupné prvky pro změnu (pravé okno, dolní polovina) a vlastní definici kaskádových stylů.
Druhý soubor
MojeNoveSchema/hlmrf.css je mnou vytvořená kopie, která obsahuje pouze změny provedené v Manageru. Jedná se o tzv. rozdílový soubor. Pokud jsem změnil pouze v základním nastavení barvu pozadí na černou, tak soubor hlmrf.css bude obsahovat pouze jednu definici ve tvaru body
{background-color: #000000;
}