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

  • 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

  • Chybně zobrazená velikost motivu

    15. 4. 2014 13:47:35 | Ivo Bílý

    Omlouvám se za rozdrobení dotazu na více zápisů.
    V demo verzi, tentokrát pro šablonu ERIS, mám stejný problém, stejný obrázek se zobrazí zmenšeně při použití vlastního CSS:
    .article-187795 #motive { background: url(/obrazek/2/motiv-kavarna-jpg/) no-repeat 0 0!important; }
    viz: http://www.demo-4114.inpage.cz/inpage/klub/
    na ostatních stránkách z menu je zobrazení správné. Testováno na IE a Chrome.

    Odpovědět

  • Chybně zobrazená velikost motivu

    15. 4. 2014 11:43:46 | Ivo Bílý

    opravuji překlep:
    divadlo.bubec.cz

    Odpovědět

  • Chybně zobrazená velikost motivu

    15. 4. 2014 11:42:09 | Ivo Bílý

    Dobrý den,
    nastavil jsem zkušebně zobrazení individuálních motivů pro různé stránky, ale obrázky se zobrazí jen v asi dvoutřetinové velikosti. Při použití jako hlavní motiv fungují správně. Šablona ZARA, požadovaná velikost 820x184px. Doména divadlo.bubc.cz, v tuto chvíli je vlastní CCS styl vypnutý.

    Odpovědět

  • RE: nejde změnit vlastní motiv

    28. 2. 2014 18:43:03 | Vladimír Souš

    Dobrý den,
    chyba byla ve vlastním stylu, že před vámi vkládanám kódem chyběla "}" - poslední zápis nebyl korektně uzavřen a tedy vše za ním bylo bráno jako chyba - neprojevilo se. Opravil jsem zápis správně, ale je třeba ještě opravit adresu k obrázku.

    Odpovědět

  • nejde změnit vlastní motiv

    27. 2. 2014 12:08:54 | Stone Art

    Dobrý den,
    postupovala jsem přesně podle Vaše návodu a přesto se mi nedaří obrázek změnit. Můžete se mi prosím podívat, kde dělám chybu?

    http://www.stone-art.info/inpage/dlazby-stone-art-humpolec-materialy-z-prirodniho-kamene/

    Odpovědět

  • re: zijsteni tridy stranky/vlastni motiv

    20. 7. 2012 14:45:04 | Hana Medkova

    Dobrý den, třída stránky http://www.aboutrelaxprague.eu/fotogalerie/he-joga-u-more-photo/ je podle zdrojového kodu:
    .gallery-21568

    Tzn. že celý zápis pro zobrazení vlastního motivu na této stránce musí vypadat následovně a musí být vložen v administraci stránek do sekce VZHLED - VLASTNÍ CSS STYL, s tím že funkce vlastního CSS musí být AKTIVNÍ.:

    .gallery-21568 #theme { background: url("/obrazek/3/nazev-vaseho-motivu-jpg/") no-repeat 0 0 !important; }

    Odpovědět

  • zijsteni tridy stranky/vlastni motiv

    19. 7. 2012 23:53:13 | Vendy

    www.aboutrelaxprague.eu
    jedna se o fotogalerii ON/joga photo....nemuzu na to prijit.udelala jsem hodne sama, bez rady, ale s tim nemuzu hnout.dekuji za radu.

    Odpovědět

  • re: zijsteni tridy stranky/vlastni motiv

    19. 7. 2012 11:08:27 | Hana Medkova

    Milá Vendy, zašlete nám název domény at Vám můžeme blíže poradit, potřebujeme nejlépe přímo odkaz na tu hlavní fotogalerii, kde chcete ten motiv změnit, obratem Vám poradím třídu stránky .)

    Odpovědět

  • zijsteni tridy stranky/vlastni motiv

    18. 7. 2012 22:42:00 | Vendy

    Dobry den, chtela bych pridat vlastni motiv na stranku fotogalerie On/Joga/photo...ale pod tahem body nemam zadny ciselny article...mam tam jen toto:<body><div id="container"><div id="main" a nic potom...jak mam dal postupovat?Dekuji, Vendy.

    Odpovědět