Úvodní stránka » Hrajeme si s CSS » Nastavte si vlastní motiv pro každou stránku

Nastavte si 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: url(/obrazek/3/nazev-motivu/) no-repeat 0 0!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.

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

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

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

.article-65219 #theme { background: url(/obrazek/3/motiv-1-jpg/) no-repeat 0 0!important; }
.article-65221 #theme { background: url(/obrazek/3/edita) no-repeat 0 0!important; }
.article-65222 #theme { background: url(/obrazek/3/motiv-2-jpg/) no-repeat 0 0!important; }
.gallery-12994 #theme { background: url(/obrazek/3/motiv-3-jpg/) no-repeat 0 0!important; }
.support #theme { background: url(/obrazek/3/motiv-5-jpg/) no-repeat 0 0!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.

 

Přejeme vám úspěšné nastavení vlastní patičky stránek.

 

 

Hanka Medková
hana.medkova(zav)zoner.cz

Přidat komentář

Zvýrazněné položky jsou povinné.

Přehled komentářů

  1. průhlednost (Martin K., 12.3.2012 13:01:25)

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

  2. RE: průhlednost (Hana Medkova, 12.3.2012 16:45:57)

    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; }

  3. Dopyt (Jozef, 26.3.2012 16:21:58)

    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

  4. RE: dopyt (Hana Medkova, 26.3.2012 16:49:37)

    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.

  5. nefunguje na produkty e-shopu (Jiří Herian, 11.4.2012 12:34:49)

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

  6. RE: nefunguje třída na produkty e-shopu (Hana Medková, 11.4.2012 13:09:10)

    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.