0 Kč bez DPH

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.

Přidání obrázků motivu

Zjištění velikosti motivu

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.

Zobrazení zdrojového kódu stránky

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">

Identifikátor pro responzivní šablony

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">
....

Třída stránky pro ostatní šablony

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

Web s doménou ZDARMA

Přidat komentář

Přehled komentářů