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%; padding: 0 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