Motiv pro každou stránku jiný
Zkušenější uživatelé si mohou v rámci vlastních CSS stylů nastavit pro každou stránku jiný motiv. V článku vám ukážeme, jakým způsobem se toto dá provést. Návod platí pro všechny šablony, které mají motiv na každé stránce.
Každá stránka má svůj vlastní identifikátor nebo třídu. Každá skupina stránek má svou třídu (pouze responzivní šablony). Tedy lze si s obrázkem motivu vyhrát a zobrazovat jej například v rámci jedné rubriky.
Obrázky pro motiv
Obrázky, které si přejeme použít pro motiv jednotlivých stránek, nahrajeme do administrace inPage. Vhodné je si pro obrázky motivu vytvořit Fotogalerii, ať je máte na jednom místě a nemusíte je složitě hledat mezi ostatními obrázky. Přidání provedeme v administraci stránek v sekci Obrázky, přes tlačítko Hromadné přidání obrázků. Pro kvalitní zobrazení je nutné dodržet předepsanou velikost motivu, která je pro každou šablonu jiná. Přesný rozměr motivu vaší šablony zjistíte v administraci v sekci Vzhled → Šablona.
Zjištění identifikátoru
Nejdříve je nutné zjistit identifikátor či třídu stránek. V HTML zdrojovém kódu strány se třída vyznačuje atributem class="trida-stranky" a identifikátor se vyznačuje atributemid="id-stranky"
Pro zjištění této informace přejděte na vašem webu na stránku, kde chcete motiv změnit, a pravým tlačítkem myši klikněte do prostoru stránky. Zobrazí se nabídka možností, kde vyberete prozkoumat.
Ve zdrojovém kódu vyhledáte hned nahoře pod tagem <body> toto spojení:
Responzivní šablony (One, Slide, Hanami a další)
<body id="id-stranky" class="trida-stranky">
Ostatní šablony (Eris, Sirius, Pluto a starší)
Starší šablony nepoužívají pro jednotlivé stránky identifikátory ale pouze třídy. Ta je vždy uvedena v tagu div umístěným těsně za tagem body.
<body>
<div id="..." class="trida-stranky">
....
Podle vašeho záměru si zkopírujte buď identifikátor nebo třídu stránky, tedy definici umístěnou mezi úvozovkami. S tímto budeme pracovat dále ve vlastních CSS stylech.
CSS zápis
V administraci přejdete do sekce Vzhled → Vlastní styly CSS. Jako první si musíte zapnout vlastní CSS styly tím, že zaškrtnete políčko zapnout vlastní CSS styly. Poté do Definice stylů vložíte zkopírované definice.
V CSS se před název třídy píše tečka.trida-stranky a u identifikátoru se píše hashtag#id-stranky. K zápisu je třeba také přidat identifikátor motivu, který si přejeme změnit. Pořadí tříd a identifikátorů koresponduje s pořadím prvků na webové stránce. Tedy identifikátor či třída stránky je hierarchicky výše než identifikátor motivu. Musí být tedy v definici na prvním místě a poté následuje identifikátor motivu. Dále bude zápis obsahovat definici background-image s adresou k obrázku např. /obrazek/3/nazev-obrazku-png/. Případně lze motiv zcela skrýt kódem display:none;
Uvedené adresy k obrázku jsou určené pro českou verzi stránek. Používáte-li na stránce jiný jazyk, cesta se bude měnit dle jazyka. Například pro anglický jazyk je to /picture/3/nazev-obrazku-png/, pro německý /bild/3/nazev-obrazku-png apod.
Responzivní šablony
/*úprava pro úvodní stránku*/
#index #motive{
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*úprava pro konkrétní článek*/
#article-463376 #motive{
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*úprava pro články konkrétní rubriky*/
.rubric-34225 #motive{
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*skrytí motivu pro eshop*/
#eshop #motive{
display:none;
}
Responzivní šablona SLIDE
/*úprava pro úvodní stránku*/
#index {
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*úprava pro konkrétní článek*/
#article-463376 {
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*úprava pro články konkrétní rubriky*/
.rubric-34225 {
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*skrytí motivu pro eshop*/
#eshop {
background-image:none;
}
Ostatní šablony
/*úprava pro úvodní stránku*/
.index #theme{
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*úprava pro konkrétní článek*/
.article-463376 #theme{
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*úprava pro články konkrétní rubriky*/
.rubric-34225 #theme{
background-image:url(/obrazek/3/nazev-obrazku-png/)
}
/*skrytí motivu pro eshop*/
.eshop #theme{
display:none;
}
Tabulka identifikátorů a tříd stránek
Jsou třídy/identifikátory, které jsou stálé, viz naše tabulka. Poté jsou třídy a identifikátory automaticky vygenerované při jejich vytvoření a ty je nutné zjistit nahlédnutím do zdrojového kódu stránky.
| Stránky | Kód stránky (Responzivní šablony) |
Kód stránky (Ostatní) |
|---|---|---|
| Hlavní strana | #index | .index |
| Rubrika | .rubric | |
| Detail příspěvku | .article-detail | |
| Výpis galerií | #galleries | .galleries |
| Detail galerie | .gallery-detail | |
| Stránka obrázku | .photo-detail | |
| Vstupní strana e-shopu | #eshop | .eshop |
| Kategorie e-shopu | .category-detail | |
| Detail produktu | .product-detail | |
| Stránka košíku | #order | .order |
| Dokončení objednávky | #finish | .finish |
| Stránka vyhledávání | #search | .search |
| Stránka stahování | #download | .download |
| Stránka složky | .folder-detail | |
| Kontakt | #support | .support |
| Mapa webu | #webmap | .webmap |
Tabulka identifikátorů motivu
Identifikátor motivu se v průběhu vývoje inPage měnil. V tabulce si můžete najít ten svůj pro šablonu, kterou používáte.
| Šablony | Kód prvku |
|---|---|
| Eris, One, Slide, Hanami, Kyra | #motive |
| Sirius | #header-theme |
| Electra | #header-wrap |
| Ostatní | #theme |
Závěrem
Věříme, že tento článek pro vás bude užitečným pomocníkem, jak si upravit vaše stránky přesně dle vašich potřeb a představ. Samozřejmostí je, že pokud budete chtít s čímkoli pomoci a poradit, tak nás neváhejte kdykoli kontaktovat na e-mail info@inpage.cz, anbeo nám zanechte zprávu zde v komentářích.
Tým inPage
info@inpage.cz
Přidat komentář
Přehled komentářů