0 Kč s DPH

Nastavte si vlastní motiv pro každou stránku

Tentokrát jsme pro vás připravili článek, kde si ukážeme, jak si nastavíte pro každou stránku odlišný motiv. Návod je vhodný pro uživatele šablony HANAMI a SLIDE, které ve výchozím stavu zobrazují stejný motiv na všech stránkách.

Přidání motivů do administrace inPage

Obrázky, které si přejeme použít pro motiv jednotlivých stránek, nahrajeme do administrace inPage. Přidání provedeme v administraci stránek v sekci OBRÁZKY, přes odkaz 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.

Viz tyto návody pro přidání fotografie:

Návod pro novou administraci

Návod pro starou administraci

Jakmile si obrázky nahrajete ve správném formátu, můžeme pokračovat dalším krokem.

Jak zjistíte třídu konkrétní stránky

Pro nastavení motivů budete potřebovat znát kód stránky, který je jedinečný pro každou stránku webu.

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 vybereme "prozkoumat". Ve zdrojovém kódu vyhledáme hned nahoře pod tagem <body> toto spojení:

<body id="vybrana-stranka" class="trida-stranky">

Pro změnu motivu na hlavní stránce vypadá zápis takto:

<body id="index">

Ukázku zápisu pro konkrétní článek si můžete prohlédnout níže:

<body id="article-261524" class="article-detail">

Jak vidíte na ukázce, každá stránka má své jedinečné číslo. 

Jak změnit nebo skrýt motiv

V administraci přejdeme do sekce VZHLED a zvolíme Vlastní styly CSS. Jako první si musíme zapnout vlastní CSS styly tím, že zaškrtneme políčko "zapnout vlastní CSS styly". Poté do Definice stylů zapíšeme hodnoty, které potřebujeme. Jednotlivé třídy a identifikátory vypíšeme v takovém pořadí, v jakém jsou obsažené na webu. Proto stránka bude vždy před prvkem.

Po zkopírování kódu ze zdrojového kódu stránky musíme doplnit znaky vyznačující atributy,

  • V HTML se třída vyznačuje atributem class="trida-stranky" a identifikátor se vyznačuje atributem id="id-stránky"
  • V CSS se před název třídy napíše tečka .trida-stranky a u identifikátoru se napíše hashtag #id-stránky

Zápis tohoto kódu tak bude vypadat následovně:

<body id="article-261524" class="article-detail">
#article-261524 .article-detail

Protože každá stránka má své jedinečné číslo, pro použití motivu na konkrétní stránce nám v zápisu CSS stylu stačí pouze označení stránky (její id). Níže si ukážeme, jak bude takový zápis vypadat.

Tabulka stránek a prvků

Pro usnadnění zápisu CSS stylu u jednotlivých stránek v šablonách HANAMI a SLIDE nám pomůže následující tabulka s kódy stránek:  

Stránky kód stránky Prvky  kód prvku
Hlavní strana #index Motiv #motive
Rubrika .rubric
Detail příspěvku .article-detail
Výpis galerií #galleries
Detail galerie .gallery-detail
Stránka obrázku .photo-detail    
Vstupní strana e-shopu #eshop    
Kategorie e-shopu .category-detail    
Detail produktu .product-detail    
Stránka košíku #order    
Dokončení objednávky #finish    
Stránka vyhledávání #search    
Stránka stahování #download    
Stránka složky .folder-detail    
Kontakt #support    
Mapa webu #webmap    

Na jednotlivých stránkách můžeme motiv jednoduše změnit pomocí kódu:

background-image: url("/obrazek/3/vas-obrazek/")

nebo ho úplně skrýt zápisem:

display: none

 

Ukázka zápisu pro skrytí motivu například na stránce eshop:

 #eshop #motive { display: none }

Na dalších příkladech vidíme webové stránky, které mají vlastní motiv pro každou stránku nastaven.

Motiv na stránce VÍTEJTE

Příklad zápisu pro změnu motivu na hlavní stránce:

 #index #motive { background-image: url("/obrazek/3/vas-obrazek/") }

Motiv na stránce CENÍK

Příklad zápisu pro změnu motivu na stránce námi zvoleného článku:

#article-261524 #motive { background-image: url("/obrazek/3/vas-obrazek/") }

Motiv na stránce FOTOGRAFIE

Příklad zápisu pro změnu motivu na stránce fotogalerie:

 #galleries #motive { background-image: url("/obrazek/3/vas-obrazek/") }

Nakonec vše uložíme a máme hotovo. 

Úpravu starších neresponzivních šablon najdete v tomto návodu.

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.