0 Kč s DPH

Vlastní motiv pro každou stránku v šabloně ERIS

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.

V nedávné době jsme přidali do inPage nenápadnou, ale velmi užitečnou funkci, se kterou můžete vzhledové možnosti vašeho webu posunout zase o kousek dále. Můžete si nyní pro každou stránku webu nastavit odlišný motiv (hlavní obrázek webové prezentace). Jak na to, se dozvíte v následujícím návodu.

Jako příklad uvádíme webové stránky www.vasesvatebnifotografka.cz, které mají vlastní motiv pro každou stránku nastaven.

Motiv na stránce VÍTEJTE
vlastní motiv na stránce VÍTEJTE

Motiv na stránce CENÍK
vlastní motiv na stránce CENÍK

Motiv na stránce FOTOGRAFIE
vlastní motiv na stránce FOTOGRAFIE

Chcete-li si na svých stránkách také nastavit odlišné motivy, postupujte krok za krokem podle návodu.

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 u aktuálně zvolené šablony.

Jakmile budou obrázky nahrány, můžeme pokračovat dalším krokem.

Zjištění třídy stránky

Pro nastavení motivů budeme muset znát třídu stránky, která je jedinečná pro každou stránku webu.

Pro zjištění třídy, přejděte na webu na stránku, pro kterou 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 "zobrazit zdrojový kód stránky". Ve zdrojovém kódu vyhledáme hned nahoře pod tagem <body> toto spojení:

<div id="container" class="trida-stranky">

Např. stránka www.vasesvatebnifotografka.cz/inpage/svatebni-fotografka/ má třídu article-65219
(ukázka na obrázku)
.

Identifikace třídy stránky

Třídu vaší stránky, kterou najdete mezi uvozovkami atributu class="", si poznamenejte, budete ji potřebovat v dalším kroku. Budeme-li nastavovat odlišné motivy pro více stránek, je třeba zjistit třídu pro každou stránku u chteré chceme motiv měnit.

Pokud se na konkrétní třídu odkážete ve Vlastním CSS stylu, můžete měnit jakýkoliv prvek u dané stránky, např. nastavit vlastní motiv. Úprava bude následně platná pouze pro vybranou stránku.

  • V HTML se třída vyznačuje atributem class="trida-stranky"
  • V CSS se před název třídy napíše tečka .trida-stranky

Třída titulní stránky webu: <div id="container" class="index">

Zápis třídy do Vlastního CSS stylu: #container.index

Přiřazení motivu ke konkrétní stránce

Posledním krokem je přiřazení nahraných obrázků ke konkrétní stránce. Je potřeba upravit Vlastní CSS styl v administraci inPage v sekci Vzhled -> Vlastní CSS styl.

V případě, že jste zatím nepoužívali vlastní CSS styl, zaškrtněte políčko "Nastavit styl jako aktivní". Do pole definice stylů vložte nové CSS definice, jejichž součástí je třída vaší stránky, kterou jste si poznamenali a adresa nahraného motivu v administraci inPage. Před název třídy je vždy důležité doplnit tečku.

CSS definice:

.trida-stranky #theme { background-image: url("/obrazek/3/nazev-motivu/") !important; }

V uvedené CSS definici si všiměte přidaného atributu #theme, pokud potřebujete nastavit odlišný motiv pro konkrétní stránku, musí v CSS zápisu kromě třídy být i tento atribut. Pokud bychom jej v zápisu nepoužili, motiv na stránce by se zobrazil, ale v nesprávné poloze.

Upozornění pro šablonu ERIS

V šabloně ERIS je nutné "#theme" nahradit "#motive". Jinak vše platí stejně jako u ostatních šablon.

Definice pro změnu motivu u stránky //www.vasesvatebnifotografka.cz/inpage/svatebni-fotografka/
s třídou article-65219 a názvem motivu motiv-1-jpg zní takto:

.article-65219 #theme { background-image: url("/obrazek/3/motiv-1-jpg/") !important; }

Kompletní přehled vlastních CSS stylů u webu www.vasesvatebnifotografka.cz

.article-65219 #theme { background-image: url("/obrazek/3/motiv-1-jpg/) !important; }
.article-65221 #theme { background-image: url("/obrazek/3/edita) important; }
.article-65222 #theme { background-image: url("/obrazek/3/motiv-2-jpg/") !important; }
.gallery-12994 #theme { background-image: url("/obrazek/3/motiv-3-jpg/") !important; }
.support #theme { background-image: url("/obrazek/3/motiv-5-jpg/") !important; }

V příkladech je uvedena URL cesta (adresa obrázku) vloženého do administrace, tj. /obrazek/3/... -> více informací najdete v článku Práce s Vlastním CSS stylem v části "Využíváme vlastní obrázky"

Je třeba pamatovat, že odlišný motiv bude pouze na stránkách, na které jej nastavíme. Na všech ostatních stránkách bude motiv univerzální, tedy ten který máte zvolený v administraci v sekci VZHLED -> OBRÁZEK MOTIVU.

Vladimír Souš
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • motiv jen na titulní straně

    2.11.2016 7:54:38 | Roman

    Dobrý den. Mám dotaz ohledně zobrazení motivu jen pro titulní stranu. Při zobrazení formuláře a dalších stránek nechci aby motiv posouval náplň strany dolů. Konkrétně se mi jedná o ponechání vlastního motivu (měnící se motivy) v prvcích stránek - vlastní motiv.
    Děkuji

    Odpovědět | Zobrazit odpovědi

    • Re: motiv jen na titulní straně

      4.11.2016 15:38:41 | Tým inPage

      Dobrý den, prosím o sdělení webové stránky nebo alespoň šablony, které se dotaz týká. Toto nastavení je není pro všechny šablony stejné. Odkaz na Vaše stránky/šablonu můžete zaslat sem na email admin@zoner.cz. Děkujeme.

      Odpovědět

  • RE: Motiv pro skupinu stránek v rámci jedné Rubriky

    9.6.2016 13:59:45 | tým inPage

    Dobrý den,
    bohužel, id se vytváří u konkrétních stránek, nikoliv rubrik.

    Odpovědět

  • Motiv pro skupinu stránek v rámci jedné Rubriky

    18.11.2015 16:30:09 | jakub

    Dobrý den,
    Zajímalo by mne, zda se dá jednoduše nastavit jeden motiv pro celou skupinu stránek najednou, které mají společnou Rubriku?
    Tím "jednoduše nastavit" myslím, že zadám jeden řádek do Vlastního CSS stylu, aniž bych musel měnit každou stránku samostatně.
    Předem díky za odpověď.

    Odpovědět

  • RE: Odkaz vyhledávání

    16.2.2015 8:05:30 | Ondřej Jonáš

    Dobrý den,

    pomocí vlastních stylů můžete přímo nadefinovat umístění prvku pro překlad stránek, tedy umístit jej vedle vyhledávání. Pokud si nevíte rady, můžete nás kontaktovat na adrese admin@zoner.cz, kde doladíme detaily.

    Odpovědět

  • Odkaz vyhledávání

    15.2.2015 21:02:30 | Lada

    Dobrý den, potřebuji vědět, jestli je možné vložit před odkaz "vyhledávání" obrázek s odkazem na překlad stránek pomocí Google. Bude tento jeden odkaz fungovat pro všechny stránky nebo se musí vkládat do každé zvlášť? Nemůžu nikde najít kde se dostanu k editaci této části hlavní stránky. Děkuji. www.mochov-ts.cz a zkouším na www.demo-215...

    Odpovědět

  • RE: Sirius

    30.7.2014 12:22:25 | Vladimír Souš

    Dobrý den Richarde,
    návod jak změnit motiv v šabloně SIRIUS najdete zde: http://www.blog.inpage.cz/inpage/sirius-uprava-motivu-stranek/. Před CSS zápisem tam uvedeným musí být vždy třída té určité stránky, jak je popsáno zde. Případně napište na admin@zoner.cz a společně vše odladíme.

    Odpovědět

  • Sirius

    30.7.2014 6:45:36 | richard

    Jak má vypadat zápis pro změnu motivu každé stránky u šablony Sirius?Podle vašich návodů vše funguje u jiných šablon ale u Sirius ne.Zkuste mi poradit jak nato.Děkuji.

    Odpovědět

  • RE: Chybně zobrazená velikost motivu

    16.4.2014 17:35:32 | Ivo Bílý

    Vyřešeno, netušil jsem, že číslovka v zadání obrázku určuje velikost a použil jsem text z jiného odkazu. Po opravě z chybného .../2/... na .../3/... (=originální velikost) je vše v pořádku.

    Odpovědět

  • RE: Chybně zobrazená velikost motivu

    16.4.2014 12:51:49 | Ivo Bílý

    Děkuji za reakci, v šabloně ERIS úprava funguje, v šabloně ZARA stále ne. Ověřte na stránce http://www.divadlo.bubec.cz/inpage/kde-hrajeme/
    Vlastní styl, generující chybu, nechám nějakou dobu zapnutý.

    Odpovědět

  • RE: Chybně zobrazená velikost motivu

    16.4.2014 9:51:45 | Vladimír Souš

    Dobrý den pane Bílý,
    návod jsem již upravil tak, aby zůstala zachována funkce zvětšování obrázků pro šablonu ERIS. Současně by to mělo řešit i problém s ostatními šablonami.

    Odpovědět

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