Nastavte si pro každou stránku vlastní motiv
Návod pro šablony HANAMI a SLIDE
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:
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.
Příklad zápisu pro změnu motivu na hlavní stránce:
#index #motive { background-image: url("/obrazek/3/vas-obrazek/"); }
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/"); }
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
info(zav)inpage.cz