Druhý sloupec
(Pro novou verzi eStránek)
Podle tohoto návodu si můžete udělat druhý postranní sloupec na opačné straně, než máte ve vaši šabloně. Prosím, pokud si chcete i rozšířit stránku, tak ji nejdříve rozšiřte.
Kompatibilita
Současná verze eStránek: |
NE | - Jiná struktura CSS a XHTML šablon. |
Nová verze eStránek: | ANO |
Testováno 7. listopadu 2009
Šablona D
1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS).
2. Najděte si tam toto:
#content{width:555px;overflow:hidden;line-height:160%;float:right;} |
555px - Změňte na 350px. Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.
3. Úplně na konec vložte toto:
.levy {float:left;width:555px;} .pravy {float:right;width:200px;} |
555px - Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.
4. Otevřete si XHTML (Nastavení - Vzhled - Design - Upravit XHTML).
5. V Hlavní šabloně najděte toto:
<div id="body"> <div id="nav-column"> <div class="column"> <div class="inner-column inner_frame"> <!--/ u_m_portrait /--> <!--/ u_m_languages /--> </div> </div> <!--/ u_m_menu /--> <!--\ adv_sqr \--> <div id="clear2" class="clear"> </div> <hr /> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_photos /--> <!--/ u_m_lastphoto /--> <!--/ u_m_contact /--> <!--\ adv_mess \--> <!--/ u_m_code /--> <!--/ u_m_maillist /--> <!--/ u_m_links /--> <!--/ u_m_search /--> <!--/ u_m_archive /--> <!--/ u_m_rss /--> <!--/ u_m_stats /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- end of first column --> </div> <!-- main page content --> <div id="content"> <!--/ u_m_breadcrumbs /--> <!--/ u_content /--> </div> <!-- /main page content --> <div id="clear3" class="clear"> </div> <hr /> <div id="decoration1" class="decoration"> </div> <div id="decoration2" class="decoration"> </div> <!-- /Meant for additional graphics inside the body of the page --> </div> |
6. Změňte na:
<div id="body"> <div class="levy"> <div id="nav-column"> <div class="column"> <div class="inner-column inner_frame"> <!--/ u_m_portrait /--> <!--/ u_m_languages /--> </div> </div> <!--/ u_m_menu /--> <!--\ adv_sqr \--> <div id="clear2" class="clear"> </div> <hr /> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_photos /--> <!--/ u_m_lastphoto /--> <!--/ u_m_contact /--> <!--\ adv_mess \--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- end of first column --> </div> <!-- main page content --> <div id="content"> <!--/ u_m_breadcrumbs /--> <!--/ u_content /--> </div> <!-- /main page content --> <div id="clear3" class="clear"> </div> <hr /> <div id="decoration1" class="decoration"> </div> <div id="decoration2" class="decoration"> </div> <!-- /Meant for additional graphics inside the body of the page --> </div> <div class="pravy"> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_code /--> <!--/ u_m_maillist /--> <!--/ u_m_links /--> <!--/ u_m_search /--> <!--/ u_m_archive /--> <!--/ u_m_rss /--> <!--/ u_m_stats /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> </div> </div> |
modře - Obsah levého sloupce, můžete si tam dát, co chcete.
červeně - Obsah pravého sloupce.
7. Uložte a máte hotovo.
Šablona H
1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS).
2. Najděte si tam toto:
#content { width: 570px; float: left; margin-left:5px; } |
570px - Změňte na 385px. Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.
3. Úplně na konec vložte toto:
#levy {float:left;width:180px;} #pravy {float:right;width:590px;} |
590px - Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.
4. Otevřete si XHTML (Nastavení - Vzhled - Design - Upravit XHTML).
5. V Hlavní šabloně najděte toto:
<hr /> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_portrait /--> <!--/ u_m_languages /--> <!--\ adv_sqr \--> <!--/ u_m_photos /--> <!--/ u_m_lastphoto /--> <!--/ u_m_contact /--> <!--\ adv_mess \--> <!--/ u_m_code /--> <!--/ u_m_maillist /--> <!--/ u_m_links /--> <!--/ u_m_search /--> <!--/ u_m_archive /--> <!--/ u_m_rss /--> <!--/ u_m_stats /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- konci first column --> </div> <!-- main page content --> <div id="content"> <!--/ u_m_breadcrumbs /--> <!--/ u_content /--> </div> <!-- /main page content --> <div id="clear3" class="clear"> </div> <hr /> <div id="decoration1" class="decoration"> </div> <div id="decoration2" class="decoration"> </div> <!-- /Meant for additional graphics inside the body of the page --> </div> |
6. Změňte na:
<hr /> <div id="pravy"> <div id="nav-column"> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_portrait /--> <!--/ u_m_languages /--> <!--\ adv_sqr \--> <!--/ u_m_photos /--> <!--/ u_m_lastphoto /--> <!--/ u_m_contact /--> <!--\ adv_mess \--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- konci first column --> </div> <!-- main page content --> <div id="content"> <!--/ u_m_breadcrumbs /--> <!--/ u_content /--> </div> <!-- /main page content --> <div id="clear3" class="clear"> </div> <hr /> <div id="decoration1" class="decoration"> </div> <div id="decoration2" class="decoration"> </div> <!-- /Meant for additional graphics inside the body of the page --> </div> <div id="levy"> <div id="nav-column"> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_code /--> <!--/ u_m_maillist /--> <!--/ u_m_links /--> <!--/ u_m_search /--> <!--/ u_m_archive /--> <!--/ u_m_rss /--> <!--/ u_m_stats /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- konci first column --> </div> </div> |
modře - Obsah levého sloupce, můžete si tam dát, co chcete.
červeně - Obsah pravého sloupce.
7. Uložte a máte hotovo.
Šablona J
1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS).
2. Najděte si tam toto:
#content { background: white; float: right; display: inline; width: 484px; overflow: hidden; margin: 0 20px 0 0; } |
484px - Změňte na 208px. Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.
3. Úplně na konec vložte toto:
.levy {float:left;width:509px;} .pravy {float:right;width:200px;} |
509px - Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.
4. Otevřete si XHTML (Nastavení - Vzhled - Design - Upravit XHTML).
5. V Hlavní šabloně najděte toto:
<div id="body"> <div id="nav-column"> <!--/ u_m_menu /--> <div id="clear2" class="clear"> </div> <hr /> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_portrait /--> <!--/ u_m_languages /--> <!--\ adv_sqr \--> <!--/ u_m_photos /--> <!--/ u_m_lastphoto /--> <!--/ u_m_contact /--> <!--\ adv_mess \--> <!--/ u_m_code /--> <!--/ u_m_maillist /--> <!--/ u_m_links /--> <!--/ u_m_search /--> <!--/ u_m_archive /--> <!--/ u_m_rss /--> <!--/ u_m_stats /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- konci first column --> </div> <!-- main page content --> <div id="content"> <!--/ u_m_breadcrumbs /--> <!--/ u_content /--> <div id="decoration1" class="decoration"> </div> <div id="decoration2" class="decoration"> </div> <!-- /Meant for additional graphics inside the body of the page --> </div> <!-- /main page content --> <div id="clear3" class="clear"> </div> <hr /> </div> |
6. Změňte na:
<div id="body"> <div id="nav-column"> <!--/ u_m_menu /--> <div id="clear2" class="clear"> </div> <hr /> </div> <div class="levy"> <div id="nav-column"> <!-- Side column left/right --> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--/ u_m_portrait /--> <!--/ u_m_languages /--> <!--\ adv_sqr \--> <!--/ u_m_photos /--> <!--/ u_m_lastphoto /--> <!--/ u_m_contact /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> <!-- konci first column --> </div> <!-- main page content --> <div id="content"> <!--/ u_m_breadcrumbs /--> <!--/ u_content /--> <div id="decoration1" class="decoration"> </div> <div id="decoration2" class="decoration"> </div> <!-- /Meant for additional graphics inside the body of the page --> </div> <!-- /main page content --> <div id="clear3" class="clear"> </div> <hr /> </div> <div id="pravy"> <div class="column"> <!-- Inner column --> <div class="inner_frame inner-column"> <!--\ adv_mess \--> <!--/ u_m_code /--> <!--/ u_m_maillist /--> <!--/ u_m_links /--> <!--/ u_m_search /--> <!--/ u_m_archive /--> <!--/ u_m_rss /--> <!--/ u_m_stats /--> </div> <!-- /Inner column --> <div id="clear4" class="clear"> </div> </div> </div> </div> |
modře - Obsah levého sloupce, můžete si tam dát, co chcete.
červeně - Obsah pravého sloupce.
7. Uložte a máte hotovo.
Komentáře
Přehled komentářů
ahoj aj ja mam stranku o radach a je aktualizovana 11.2011 :http://www.hacky-na.estranky.cz/
Jarda - druhý sloupec
Ahoj Tomáši, musím tě pochválit a poděkovat za moc užitečné informace na tvých stránkách. Chci se zeptat, jestli by nešel udělat návod na druhý sloupec pro šablonu "C" v nové verzi stránek???
kangarko - kangarko