0 Kč s DPH

Vlastní motiv pro každou stránku

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ářů

  • vlastní motivy

    28. 5. 2012 18:45:29 | Alena Jirsová

    Dobrý den, nastavila jsem si vlastní motivy dle popisu, jak uvádíte, ale nedaří se mi je zobrazit. Jenom mi to vypne ten motiv, co jsem měla nastavený, ale nové obrázky se mi neobjeví. Zkuste se mi na to podívat. Nevím jestli mám dobře zapsané ty obrázky. www.dekor-shop.cz

    Odpovědět

  • RE: nefunguje třída na produkty e-shopu

    11. 4. 2012 13:09:10 | Hana Medková

    Dobrý den pane Herian, zkuste tu třídu zadat bez toho prvního slova "eshop" tedy pouze:

    #container.product-40498

    mělo by to takto fungovat.

    Odpovědět

  • nefunguje na produkty e-shopu

    11. 4. 2012 12:34:49 | Jiří Herian

    DD, nefunguje mi to na změnu u stránek detailu produktu v e-shopu. Problém bude možná v tom, že třída stránky je s mezerou: "eshop product-40498". Ani uvozovky tomu nepomohly...

    Odpovědět

  • RE: dopyt

    26. 3. 2012 16:49:37 | Hana Medkova

    Dobry den pane Jozef, pravdepodobne bude nutne upravit písmenko v URL a názvu /obrazek/ za slovenský výraz /obrazok/ - schválně to prosím vyzkouěšejte, věřím že toto pomůže. Ve chvíli kdy používáte jiný jazyk aplikace než češtinu, je potřeba některé pevně definované položky uvést ve Vašem jazyce. U anglického jazyka aplikace by se slovo /obrazek/ nahradilo slovem /picture/. A pokud by Vám tato rada nepomohla, obratte se na naši technickou podporu admin@zoner.cz, kde se Vam pokusime obratem poradit a pomoci.

    Odpovědět

  • Dopyt

    26. 3. 2012 16:21:58 | Jozef

    Dobrý deň, chcel by som zmeniť motív stránky, mám nahratý v administrácii obrázok hlavička, no podľa vyššie uvedeného návodu sa mi to nedarí, môžete mi poradiť kde robím chybu?
    Ďakujem
    Jozef

    Odpovědět

  • RE: průhlednost

    12. 3. 2012 16:45:57 | Hana Medkova

    Průhledné pozadí se nastaví tak, že se do CSS zápisu přidá zápis "transparent" což značí průhlednost, viz:
    #theme { background: url(/obrazek/3/motiv-1-jpg/) no-repeat 0 0 transparent !important; }

    Odpovědět

  • průhlednost

    12. 3. 2012 13:01:25 | Martin K.

    dobrý den, a co když chci udělat motiv průhledný, tak aby bylo vidět pozadí? děkuji, M.K.

    Odpovědět