Individuální úprava vzhledu každé stránky

Následující informace jsou určeny převážně pro zkušenější uživatele, kteří se orientují v HTML kódu a k úpravě vzhledu webu využívají Vlastní CSS styl.

Do nové aktualizace inPage jsme přidali nenápadnou, ale velmi užitečnou funkci, se kterou můžete vzhledové možnosti vašeho webu posunout zase o kousek dále. Jakoukoliv stránku lze nyní jedinečně identifikovat. Můžete si tak pro každou stránku nastavit odlišný vzhled.

Jedinečná identifikace stránky

inPage při generování stránky, přidává k <div id="container"> vždy zároveň i třídu, která je jedinečná pro každou stránku. Aby jste ji zjistili, musíte si zobrazit zdrojový kód příslušné stránky. Pokud se následně na tuto stránku odkážete ve Vlastním CSS stylu, můžete přímo upravit jakýkoliv globálně zapsaný prvek. Úprava bude následně platná pouze pro vybranou stránku.

Př. HTML kódu titulní stránky <div id="container" class="index">

Př. Zápisu HTML kódu do Vlastního CSS stylu #container.index

Roztažení obsahu

Pro vybranou stránku (v našem příkladu se jedná o titulní stránku) skryje postraní sloupec a roztáhne obsah. Grafické prvky v obsahové části jsme v příkladu skryli.

Šablona MIRA

#container.index #lcolumn { display: none; }
#container.index #rcolumn { float: left; width: auto; background: none; }
#container.index #content { background: none; padding: 20px 10px; }

Šablona ATLAS

#container.index #lcolumn { display: none; }
#container.index #rcolumn { float: left; width: auto; }
#container.index #content { width: auto; padding: 20px; }

Šablona MEDIA

#container.index #lcolumn { display: none; }
#container.index #rcolumn { float: left; width: auto; }


Šablona VEGA

#container.index #lcolumn { width: auto; }
#container.index #rcolumn { display: none; }


Šablona ZETA

#container.index #lcolumn { width: auto; }
#container.index #rcolumn { display: none; }


Šablona POLARIS

#c1.index #lcolumn { display: none; }
#c1.index #content { float: left; width: auto; background: none; }
#c1.index #c3 { width: auto; background: none; }
#c1.index #c4 { width: auto; background: none; padding: 15px; }

Definice nových CSS pravidel

Pro vybranou stránku (v našem příkladu se jedná o fotogalerii) upraví rodinu písem, barvu a velikost u nadpisu a změní pozadí stránky.

#container.gallery-3818 h1 { font-family: Gill Sans / Gill Sans MT, sans-serif; font-size: 200%; color: #ac0000; }
#container.gallery-3818 #content { background: #eee; }

Další úpravy jsou na vaší fantazii. Zkoušejte se styly experimentovat.