0 Kč s DPH

Individuální úprava vzhledu každé stránky

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.

Do nové aktualizace inPage jsme přidali nenápadnou, ale velmi užitečnou funkci, se kterou můžete vzhledové možnosti vašeho webu posunout zase o kousek dále. Jakoukoliv stránku lze nyní jedinečně identifikovat. Můžete si tak pro každou stránku nastavit odlišný vzhled.

Tip: Individuálně skryjte postraní sloupec a roztáhněte hlavní obsah. Odlišně nastylujete jednotlivé fotogalerie nebo si pro konkrétní stránku/y nastavte Vlastním CSS stylem efektivně nová pravidla, atd.

Jedinečná identifikace stránky

inPage při generování stránky, přidává k <div id="container"> vždy zároveň i třídu, která je jedinečná pro každou stránku. Aby jste ji zjistili, musíte si zobrazit zdrojový kód příslušné stránky. Pokud se následně na tuto stránku odkážete ve Vlastním CSS stylu, můžete přímo upravit jakýkoliv globálně zapsaný prvek. Úprava bude následně platná pouze pro vybranou stránku.

Př. HTML kódu titulní stránky <div id="container" class="index">

Př. Zápisu HTML kódu do Vlastního CSS stylu #container.index

Roztažení obsahu

Pro vybranou stránku (v našem příkladu se jedná o titulní stránku) skryje postraní sloupec a roztáhne obsah. Grafické prvky v obsahové části jsme v příkladu skryli.

Šablona MIRA

#container.index #lcolumn { display: none; }
#container.index #rcolumn { float: left; width: auto; background: none; }
#container.index #content { background: none; padding: 20px 10px; }

Šablona ATLAS

#container.index #lcolumn { display: none; }
#container.index #rcolumn { float: left; width: auto; }
#container.index #content { width: auto; padding: 20px; }

Šablona MEDIA

#container.index #lcolumn { display: none; }
#container.index #rcolumn { float: left; width: auto; }

Šablona VEGA

#container.index #lcolumn { width: auto; }
#container.index #rcolumn { display: none; }

Šablona ZETA

#container.index #lcolumn { width: auto; }
#container.index #rcolumn { display: none; }

Šablona POLARIS

#c1.index #lcolumn { display: none; }
#c1.index #content { float: left; width: auto; background: none; }
#c1.index #c3 { width: auto; background: none; }
#c1.index #c4 { width: auto; background: none; padding: 15px; }

Definice nových CSS pravidel

Pro vybranou stránku (v našem příkladu se jedná o fotogalerii) upraví rodinu písem, barvu a velikost u nadpisu a změní pozadí stránky.

#container.gallery-3818 h1 { font-family: Gill Sans / Gill Sans MT, sans-serif; font-size: 200%; color: #ac0000; }
#container.gallery-3818 #content { background: #eee; }

Další úpravy jsou na vaší fantazii. Zkoušejte se styly experimentovat.

Vojtěch Štursa
vojtech.stursa(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Vlastní css styl mých web stránek

    25.11.2011 12:59:25 | Martina Mahdalová

    Dobrý den,
    potřebovala bych Vaši radu ohledně mých webových stránek www.decoree.cz. Po změně fotografií i úvodního loga s obrázkem se rozhodila jak v horní příkazové lince, která začíná O nás, domů... šířka pozadí pod textem a tak stejně na hlavní stránce pod nadpisem Katalog zboží. Nevím si rady jak pozadí upravit aby sahalo do předepsané tabulky a aby se do ní vešel i text, který se zde nachází. Již několik možností jsem zkoušela, ale zatím se mi podařilo jen přidat (bohužel ani nevím jak, další pozadí pod obrázek s textem na úvodní stránce)Děkuji Martina Mahdalová

    Odpovědět

  • RE: vlastní CSS styl

    29.11.2011 12:40:19 | Hana Medkova

    Dobrý den paní Mahdalová, opravili jsme vám zápis ve vlastních CSS stylech, který nastavuje odsazení jednotlivých polí v menu od sebe. Původní hodnota pro odsazení menu byla - padding: 0 25px. Nyní jsme to odsazení snížili na: 0 18px.
    Ještě píšete, že bohužel nevíte jak jste přidala pozadí pod obrázek s textem, domnívám se, že ten obrázek samotný text již obsahuje, jestli je to tento: http://www.decoree.cz/obrazek/2/dscn0656ab-jpg-664/
    Když si nevíte rady s vkládáním obrázů do textů na stránce, zkuste to s tímto jednoduchým návodem - Vkládání textů do stránky: http://www.blog.inpage.cz/inpage/vkladani-obrazku-do-textu/ a nebo nás kontaktujte telefonicky, rádi Vám poradíme a navedeme Vás jak na to.

    Odpovědět

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