0 Kč bez DPH

Zrušení postranního sloupce a roztažení obsahu

V případě, že postranní sloupec nijak nevyužíváte, vás určitě napadlo, zda není možné obsahovou část roztáhnout na plnou šířku stránky. inPage takové změny umožňuje a to právě úpravou vlastního CSS stylu. Je třeba se napřed podívat na strukturu HTML kódu a následně na zápis jednotlivých bloků v CSS. Dalším krokem je již zápis vlastního CSS stylu, který doplní případně upraví již použitá pravidla.

Jak na to?

Řešení je poměrně jednoduché a ukážeme si ho v praxi u šablony ATLAS. Nejprve je nutné se přihlásit do administrace vašeho webu a následně v menu zvolit Vzhled -> Vlastní CSS styl.

V obsahové části administrace zaškrkněte volbu Nastavit aktivní a do textového pole vepište následující CSS pravidla:

Šablona ATLAS

#lcolumn { display: none; }
#rcolumn { float: none; width: 100%; }
#content { width: 750px; padding: 15px; }

Šablona MEDIA - horizontální menu

#lcolumn { display: none; }
#rcolumn { float: none; width: 100%; }
#content { width: 790px; padding: 15px; }

Šablona VEGA

#rcolumn { display: none; }
#lcolumn { float: none; width: 100%; }
#content { width: 810px; padding: 15px; }

Šablona ZETA

#rcolumn { display: none; }
#lcolumn { float: none; width: 100%; }

Šablona ELECTRA

#rcolumn { display: none; }
#lcolumn { float: none; width: 100%; }

Šablona NAVI

#content {width: 770px; float: none;}
#sidebar {display:none;}

Šablona SIRIUS

#main-column {float: none; width: 945px;}
#side-column {display:none;}

Šablona ERIS

#content-wrap {width: 100%; float: none;}
#lcolumn {display:none;}
#content {width:97%; padding0 1% 20px 1%; float: none;}
#rcolumn {display:none;}

Zápisem #lcolumn { display: none; } skryjete celý postranní sloupec, to ale nestačí, je potřeba obsahovou část roztáhnout. K tomu slouží další dva zápisy, v prvním #rcolumn { float: none; width: 100%; } rušíte původní pravidlo o obtékání bloku a šířku z absolutně nadefinovaných px měníte na relativní hodnotu 100%. V posledním zápise #content { width: 750px; padding: 15px; } definujete již vlastní obsahovou část, protože používáme padding, aby byl text lehce odlepen od stran, je vhodné šířku definovat právě v absolutních jednotkách, tj. pixelech.

A výsledek?

Úpravou se nám roztáhla obsahová část po celé šíři stránky, jak můžete vidět na obrázku níže:


Obr. Šablona ATLAS před a po úpravě.

Přidat komentář

Přehled komentářů

  • ERIS

    1. 12. 2013 1:48:20 | Václav P.

    OK, ještě si s tím trošku pohraji, ale zrušení postranních sloupců mi na ERIS proběhlo úspěšně viz : www.prycsesnehem.cz

    Odpovědět

  • díky

    27. 11. 2013 21:23:18 | Václav P.

    Pane Souši, díky, jdu to zkusit sbastlit. V.

    Odpovědět

  • RE: ERIS - zrušení postranního sloupce

    27. 11. 2013 16:37:16 | Vladimír Souš

    Dobrý den Václave,
    připravil jsem návod na našem blogu jak si upravit postranní sloupce i pro šablonu ERIS. Více info zde: http://www.blog.inpage.cz/inpage/zruseni-postranniho-sloupce-a-roztazeni-hlavniho-obsahu/

    Odpovědět

  • ERIS - zrušení postranního sloupce

    27. 11. 2013 0:44:24 | Václav P.

    Dobrý den, líbí se mi nová šablona Eris a rád bych ji použil na své weby, které u inpage mám. Rád bych ale komplet ustřelil levý sloupec a roztáhl tak hlavní pole. Výše píšete, že je to složité, a proto to zde neuvádíte. Nezkusíme to přeci jen? :-) Díky moc Václav

    Odpovědět

  • RE: Roztažení obsahu

    11. 7. 2013 10:59:06 | Vladimír Souš

    Dobrý den pane Holečku, šablonou SIRIUS se zabývá samostatná rubrika, kam jsem právě doplnil i návod na práci s postranním a hlavním panelem. Odkaz na stránku s rubrikou SIRIUS je: http://www.blog.inpage.cz/rubrika/sablona-sirius/

    Odpovědět

  • Roztažení obsahu

    4. 7. 2013 23:04:52 | Roman Holeček

    Dobrý den, chtěl bych se zeptat, jak zruším postranní sloupec a roztáhnu obsah u šablon Sirius
    Děkuji za pomoc.

    Odpovědět

  • RE: vlastni sirka sloupce

    25. 3. 2013 14:15:56 | Hana Medkova

    Dobrý den, pokud potřebujete zvětšit šířku levého sloupce, musíte ubrat na šířce sloupce pravého - vše přes vlastní styly CSS.
    Pokud tedy levý sloupec rozšíříte o 50px musíte z pravého sloupce logicky 50px ubrat - aby se vše vlezlo do celkové šíře šablony.

    Odpovědět

  • Vlastní šířka sloupce

    24. 3. 2013 15:08:18 | Miroslav Ziegler

    Dobrý den, chci změnit layout stránek a zkouším to na demo verzi. Potřebuju zvětšit šířku levého sloupce u šablony ZARA. Podle návodu jsem vypnul zobrazení levého sloupce a vložil dva tagy DIV. U pravého tagu se mi ale obsah nezarovnává doleva.
    Můžete mi prosím napsat, v čem je chyba?
    Děkuji
    Miroslav Ziegler

    Odpovědět

  • RE: zrušení postranního sloupce

    15. 3. 2013 11:25:22 | Hana Medkova

    roztažení obsahu u této šablony je problematické, z důvodu použití většího množství obrázků, které tvoří orámování vnitřního obsahu šablony.

    Můžete si zkusit vložit do vlastního CSS stylu následující zápis a uvidíte sám, zda to je to co potřebujete.

    #lcolumn {display: none;}
    #content {background: white; width: 100%;}
    #c3 {background: transparent; width: 100%;}
    #c4 {background: transparent; padding: 25px; width: 94%;}

    Odpovědět

  • Zrušení postranního sloupce

    15. 3. 2013 10:44:47 | Jirka

    Dobrý den, můžete mi poradit jak zrušit postranní sloupec u šablony POLARIS?
    Děkuji

    Odpovědět

  • Re: Zrušenie postranného stľpca a roztiahnutie obsahu.

    27. 10. 2011 12:23:46 | Vojtěch Štursa

    Elektra - skryje pravý sloupec, roztáhne levý.
    #lcolumn { width: 960px; }
    #rcolumn { display: none; }

    Odpovědět

  • Zrušenie postranného stľpca a roztiahnutie obsahu.

    26. 10. 2011 22:49:07 | Dušan

    Zdravím Vás, chcem Vás požiadať o CCS pravidlo pre rozšírenie obsahovej časti na plnú šírku stránky pre šablónu ELECTRA.

    Odpovědět

  • RE: vlozeni obrazku pod kontakty

    17. 1. 2011 16:12:02 | Hana Medková

    Dobrý den pane Honzo, v první řadě si můžete zkusit vytvořit stránku s vlastním obsahem, do které např. vložíte QR kód. Následně přes sekci Nastavení -> Prvky stránek -> zvolíte tuto stránku jako tzv. Vlastní box. Váš QR kód se následně zobrazí v postranním boxu. Může se stát, že nebude umístěn pod kontaktem jak požadujete, protazím v inPage není možné jednoduše přehazovat prvky (boxy) v postranním menu, ale i toto se dá s trochou šikovnosti obejít. Budete-li chtít poradit jak na to, kontaktujte nás prosím emailem na admin@zoner.cz. Pokud na Vás uvedete telefonní kontakt, budeme Vás přímo kontaktovat.

    Odpovědět

  • vlozeni obrazku pod kontakty

    16. 1. 2011 18:16:14 | Honza

    Nechci postranni sloupec odstranit, ale chtel bzch ho doplnit o dalsi polozky. Chtel bych pod kontakty vlozit svuj obrazek s qr kodem. Prosim muzete poradit jak na to?

    Odpovědět