Jdi na obsah Jdi na menu
Úvod >> Rady na Estránky >> Rady pro novou verzi >> Rozšíření stránky

Rozšíření stránky

(Pro novou verzi eStránek)

Připadá vám vaše šablona příliš úzká? Tak si ji podle tohoto návodu rozšiřte:

 

Kompatibilita

Současná verze eStránek:  NE - Jiná struktura CSS šablon. Návod pro současnou verzi eStránek zde.
Nová verze eStránek:  ANO  

Testováno 16. září 2009

 

Šablona B

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

2. Najděte si tam toto:

#whole-page {
    width: 780px;
    margin: 10px auto;
    text-align: left;
}

780px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

3. Dále najděte:

#header .inner_frame{
    width: 760px;
    height: 199px;
    background: #3aa8f4 url(<!--/ logo_url /-->) top left no-repeat;
}

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

4. Dále najděte:

#content {
    /*position: relative;*/
    float: right;
    width: 570px;
    _width: 585px;
    padding: 0 10px;
    margin-top: -45px;
    background-color: #FFF;
    overflow: hidden;
    z-index: 5;
}

570px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

5. Dále najděte:

#footer {
    clear: both;
    width: 780px;
    padding-top: 10px;
    background-color: #FFF;
}

780px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

6. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

7. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona Byznys - aqua

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

2. Najděte si tam toto:

#document #in-document {
    position: relative;
    width: 800px;
    text-align: left;
    padding: 0 0 70px 0;
    margin: 0 auto;
    background: white;
}

800px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

3. Dále najděte:

#header-decoration.decoration {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 535px;
    height: 100%;
z-index: 120;
    background: url('<!--/ logo_url /-->') right top no-repeat;
}

535px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

4. Dále najděte:

#navigation {
    float: left;
    width: 800px;
    background: #12A8C0  url('<!--/ img_root /-->nav-bg.jpg') left top repeat-x;
        border-top: 2px solid #fff;
}

800px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

5. Dále najděte:

#content {
    position: relative;
    width: 470px;
    padding: 0 30px 0 35px;
    float: left;
    overflow: hidden;
    font-size: 95%;
    =font-size: 90%;
}

470px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

6. Dále najděte:

#perex {
    background: #f4f6f5;
    width: 450px;
    _width: 470px;
    margin: 10px 0;
    padding: 5px 10px;
    overflow: hidden;
}

450px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

7. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

8. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona C

1. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Oranžový - http://www001.esitex.cz/resources/userServers/design_1000000030/img/03e_bg_body.gif

Hnědý - http://www001.esitex.cz/resources/userServers/design_1000000031/img/03c_bg_body.gif

Modrý - http://www001.esitex.cz/resources/userServers/design_1000000032/img/03m_bg_body.gif

Růžový - http://www001.esitex.cz/resources/userServers/design_1000000033/img/03r_bg_body.gif

Černý - http://www001.esitex.cz/resources/userServers/design_1000000034/img/03s_bg_body.gif

Zelený - http://www001.esitex.cz/resources/userServers/design_1000000035/img/03bg_body.gif

2. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

3. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

4. Najděte si tam toto:

#whole-page { width: 742px; margin: 0 auto; text-align: left;  }

a.accessibility-links { position: absolute; left: -10000em; }

#document { float: left; width: 100%; }
#document #in-document { width: 100%; background: white url('<!--/ img_root /-->03e_bg_body.gif') repeat-y; }

742px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

<!--/ img_root /-->03e_bg_body.gif - Změňte na URL upraveného obrázku z druhého bodu.

5. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Oranžový - http://www001.esitex.cz/resources/userServers/design_1000000030/img/03e_bg_header.jpg

Hnědý - http://www001.esitex.cz/resources/userServers/design_1000000031/img/03c_bg_header.jpg

Modrý - http://www001.esitex.cz/resources/userServers/design_1000000032/img/03m_bg_header.jpg

Růžový - http://www001.esitex.cz/resources/userServers/design_1000000033/img/03r_bg_header.jpg

Černý - http://www001.esitex.cz/resources/userServers/design_1000000034/img/03s_bg_header.jpg

Zelený - http://www001.esitex.cz/resources/userServers/design_1000000035/img/03bg_header.jpg

6. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

7. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

8. Najděte si tam toto:

#header { height: 150px; position: relative; margin-bottom: 3px; background: white url(<!--/ img_root /-->03e_bg_header.jpg) no-repeat; }

<!--/ img_root /-->03e_bg_header.jpg - Změňte na URL upraveného obrázku z pátého bodu.

9. Dále najděte:

#content { display: inline; float: right; width: 535px; margin: 0 0 0 20px; }
* html #content { overflow: hidden; }

535px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

10. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Oranžový - http://www001.esitex.cz/resources/userServers/design_1000000030/img/03e_bg_footer.jpg

Hnědý - http://www001.esitex.cz/resources/userServers/design_1000000031/img/03c_bg_footer.jpg

Modrý - http://www001.esitex.cz/resources/userServers/design_1000000032/img/03m_bg_footer.jpg

Růžový - http://www001.esitex.cz/resources/userServers/design_1000000033/img/03r_bg_footer.jpg

Černý - http://www001.esitex.cz/resources/userServers/design_1000000034/img/03s_bg_footer.jpg

Zelený - http://www001.esitex.cz/resources/userServers/design_1000000035/img/03bg_footer.jpg

11. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

12. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

13. Najděte si tam toto:

#footer { color: #666; background: #FF6B19 url('<!--/ img_root /-->03e_bg_footer.jpg') no-repeat; margin-top: 3px; text-align: center; }
#footer .inner_frame { padding: 0px 0 0 0; width: 742px; overflow: hidden;  }

742px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

<!--/ img_root /-->03e_bg_footer.jpg - Změňte na URL upraveného obrázku z desátého bodu.

14. Najděte si tam toto:

#footer { overflow: hidden; width: 742px;}

742px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

15. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

16. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona D

1. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Zelený - http://www001.esitex.cz/resources/userServers/design_1000000020/img/bkg.jpg

Červený - http://www001.esitex.cz/resources/userServers/design_1000000021/img/bkg.jpg

Růžový - http://www001.esitex.cz/resources/userServers/design_1000000022/img/bkg.jpg

Černý - http://www001.esitex.cz/resources/userServers/design_1000000023/img/bkg.jpg

Modrý - http://www001.esitex.cz/resources/userServers/design_1000000024/img/bkg.jpg

Hnědý - http://www001.esitex.cz/resources/userServers/design_1000000025/img/bkg.jpg

2. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

3. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

4. Najděte si tam toto:

#whole-page{position:relative;width:810px
/* 855px*/
;background:#643807;margin:0 auto;text-align:left}
.accessibility-links{display:none}
#document{width:810px;background:url(<!--/ img_root /-->bkg.jpg) repeat-y white}
#in-document{margin:0 25px;}
/*HEADER */
#header .inner_frame{width:760px;height:150px;position:relative; overflow:hidden;
/*background:red;*/
}
#header{padding-top:5px}
#header h1{position:absolute;top:28px;padding:0px 20px;font-family:Georgia,serif;width:720px;_width:760px;}

Modře - Zvětšte o tolik, o kolik chcete rozšířit stránku.

<!--/ img_root /-->bkg.jpg - Změňte na URL upraveného obrázku z druhého bodu.

5. Dále najděte:

#content{width:555px;overflow:hidden;line-height:160%;float:right;}

555px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

6. Dále najděte:

#footer{width:760px;overflow:hidden;}

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

7. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

8. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona E

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

2. Najděte si tam toto:

#whole-page {
    width: 760px;
    margin: 10px auto;
    text-align: left;
}

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

3. Dále najděte:

#header .inner_frame{
    position: relative;
    width: 760px;
    height: 200px;
    background: #223034 url(<!--/ logo_url /-->) top left no-repeat;
}

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

4. Dále najděte:

#footer {
    position: relative;
    width: 760px;    
    padding-top: 50px;
    background: #223034 url('<!--/ img_root /-->block_bottom.gif') 0 20px repeat-x;
}

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

5. Dále najděte:

#content {
    float: right;
    width: 560px;
    margin-left: 10px;
padding-top:10px;
}

560px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

6. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

7. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona H

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

2. Najděte si tam toto:

#whole-page {
    width: 780px;
    margin: 0px auto;
}

780px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

3. Dále najděte:

#header .inner_frame {
 width: 780px;
 height: 220px;
 background: #000 url('<!--/ logo_url /-->') 50% 50% no-repeat;
}

785px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

4. Dále najděte:

#navigation {
 width: 780px;
 position: relative;
}

780px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

5. Dále najděte:

#content {
    width: 570px;
    float: left;
    margin-left:5px;
}

570px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

6. Dále najděte:

#footer {
  float:left;
    margin: 3px 0px 20px 0px;
    padding: 3px 5px;
    width: 774px;
overflow: hidden;
}

774px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

7. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

8. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona J

1. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Černý - http://www001.esitex.com/resources/userServers/design_1000000080/img/body.gif

Červený - http://www001.esitex.com/resources/userServers/design_1000000081/img/body.gif

Fialový - http://www001.esitex.com/resources/userServers/design_1000000082/img/body.gif

Hnědý - http://www001.esitex.com/resources/userServers/design_1000000083/img/body.gif

Modrý - http://www001.esitex.com/resources/userServers/design_1000000084/img/body.gif

Tyrkysový - http://www001.esitex.com/resources/userServers/design_1000000085/img/body.gif

2. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

3. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

4. Najděte si tam toto:

#document { background: url('<!--/ img_root /-->document.jpg') left top repeat-x; padding: 45px 0 0px 0; }
#document #in-document { position: relative; width: 770px; margin: 0 auto; text-align: left; }

#body { background: url('<!--/ img_root /-->body.gif') top center repeat-y; width: 100%; overflow: hidden; position: relative; z-index: 9999; }

770px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

<!--/ img_root /-->body.gif - Změňte na URL upraveného obrázku z druhého bodu.

5. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku. Pozor! Musíte zachovat průhlednost obrázku. Pokud na to nemáte program, tak to dělat nemusíte:

Černý - http://www001.esitex.com/resources/userServers/design_1000000080/img/header.png

Červený - http://www001.esitex.com/resources/userServers/design_1000000081/img/header.png

Fialový - http://www001.esitex.com/resources/userServers/design_1000000082/img/header.png

Hnědý - http://www001.esitex.com/resources/userServers/design_1000000083/img/header.png

Modrý - http://www001.esitex.com/resources/userServers/design_1000000084/img/header.png

Tyrkysový - http://www001.esitex.com/resources/userServers/design_1000000085/img/header.png

6. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

7. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

8. Najděte si tam toto:

#header { background: white url('<!--/ logo_url /-->') 5px 5px no-repeat; height: 180px; position: relative;} /* ZDE jako background-image pro header JE DEFINOVAN UZIV. OBRAZEK. NUTNO PONECHAT POZICI 5px 5px */
#header .inner_frame { background: url('<!--/ img_root /-->header.png') no-repeat; height: 180px;}

<!--/ img_root /-->header.png - Změňte na URL upraveného obrázku z pátého bodu. Pokud jste si obrázek nerozšířili, tak smažte background: url('<!--/ img_root /-->header.png') no-repeat; .

9. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Černý - http://www001.esitex.com/resources/userServers/design_1000000080/img/navigation.gif

Červený - http://www001.esitex.com/resources/userServers/design_1000000081/img/navigation.gif

Fialový - http://www001.esitex.com/resources/userServers/design_1000000082/img/navigation.gif

Hnědý - http://www001.esitex.com/resources/userServers/design_1000000083/img/navigation.gif

Modrý - http://www001.esitex.com/resources/userServers/design_1000000084/img/navigationy.gif

Tyrkysový - http://www001.esitex.com/resources/userServers/design_1000000085/img/navigation.gif

10. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

11. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

12. Najděte si tam toto:

#navigation { background: #212121 url('<!--/ img_root /-->navigation.gif') no-repeat; width: 770px; overflow: hidden; _overflow: none; height: 55px ! important;} 

770px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

<!--/ img_root /-->navigation.gif - Změňte na URL upraveného obrázku z devátého bodu.

13. Najděte si tam toto:

#clear2 { background: url('<!--/ img_root /-->navigation.gif') left bottom no-repeat; display: block; width: 100%; height: 15px; }

<!--/ img_root /-->navigation.gif - Změňte na URL upraveného obrázku z devátého bodu.

14. Dále najděte:

#content { background: white; float: right; display: inline; width: 484px; overflow: hidden; margin: 0 20px 0 0; }
* html #content { overflow: hidden; }

484px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

15. Vyberte si obrázek podle barvy šablony a rozšiřte ho o tolik, o kolik si chcete rozšířit stránku:

Černý - http://www001.esitex.com/resources/userServers/design_1000000080/img/footer_in.gif

Červený - http://www001.esitex.com/resources/userServers/design_1000000081/img/footer_in.gif

Fialový - http://www001.esitex.com/resources/userServers/design_1000000082/img/footer_in.gif

Hnědý - http://www001.esitex.com/resources/userServers/design_1000000083/img/footer_in.gif

Modrý - http://www001.esitex.com/resources/userServers/design_1000000084/img/footer_in.gif

Tyrkysový - http://www001.esitex.com/resources/userServers/design_1000000085/img/footer_in.gif

16. Nahrajte upravený obrázek na stránky (Nastavení - Rozšířené - Obrázky)

17. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

18. Najděte si tam toto:

#footer { background: #292929 url('<!--/ img_root /-->footer.gif') top repeat-x;  width: 100%; padding: 0; text-align: center;}
#footer .inner_frame { background: url('<!--/ img_root /-->footer_in.gif') top left no-repeat; width: 770px; margin: 0 auto; }

770px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

<!--/ img_root /-->footer_in.gif - Změňte na URL upraveného obrázku z druhého bodu.

19. Dále najděte:

menu li.submenu-over ul.onmouse, menu li:hover ul.onmouse, menu li.submenu-over ul.click{
    position: absolute;
    top: 40px; /*235*/
    left: 5px;
    background: #242424;
    width: 760px;
    border: 1px solid #fff;
    border-top: 2px solid #fff;
    padding: 0px;
    overflow: hidden;
}

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

20. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

21. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona M

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

2. Najděte si tam toto:

#document { width: 760px; margin: 0 auto; color: #000; background: #4e4e4e url('<!--/ img_root /-->content.gif') right top repeat-y; }

760px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

3. Dále najděte:

#content { overflow: hidden; float: left; width: 539px; _width: 603px; padding: 0 32px 61px; color: #000; background-color: #fff; }

539px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

4. Dále najděte:

#footer { margin-left: 152px; clear: both; width: 608px; overflow: hidden; font-size: small; _font-size: x-small; color: #fff; background: #323232 url('<!--/ img_root /-->footer.jpg') top left no-repeat; }

608px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

5. Rozšiřte si logo o tolik, o kolik jste si rozšířili stránku.

6. Při nahrávání loga nesmí být zaškrtnuto Automaticky změnit velikost.

A je hotovo

 

Šablona P

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS)

2. Najděte si tam toto:

#content { width: 490px; float: left; padding: 0 0 20px 79px; margin: 20px 0 0 -536px; overflow: hidden; }
* html #content { display: inline; width: 569px; }

490px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

3. Dále najděte:

.column { position: relative; left: 594px; float: left; width: 386px; margin: -10px 149px 0 0; border-left: 1px dashed #d2d2c8; }

594px - Zvětšte o tolik, o kolik chcete rozšířit stránku.

A je hotovo

 

Komentáře

Přidat komentář

Přehled komentářů

Roman Janas - Rozšíření stránky u stylu Z

25. 4. 2011 3:05

Ahoj Tome, mohl bys mi prosím poradit jak rozšířit stránky u stylu Z. Děkuji moc za pomoc.
ronjan78@gmail.com

Odpovědět

Katy - Ahoj a díky za vše

26. 10. 2010 10:20

Ahoj Tomáši, děkuji ti za tvé rady a jako další otravové, tě chci poprosit o doplnění šablon - rad na ně, já prosím o celkové rady na šablonu L moc se mi líbí ale je to moc úzké.Mohu ti nabídnout za to aspoň odkaz na mých stánkách Yorkybar. Děkuji Ti, jsi fakt šikovný.

Odpovědět

Roman Janas - Re: Ahoj a díky za vše

26. 3. 2011 13:17

Taky bych chtěl poprosit za styl L, rozšíření stránek. Děkuji

Odpovědět

Oves - Šablona A

29. 12. 2010 9:05

Nazdar Tome, ti řeknu nebejt tebe, tak jsem si ty stránky nikdy neupravil, Díky a jen tak dál. Prosím o radu o rozšíření šablony A u placené verze nové. Díky

Odpovědět

Vláďa - Šablona I

14. 9. 2010 11:21

Ahoj Tome, nemohl by jsi udělat prosím i rozšíření na styl I? Předem moc dík.

Odpovědět

Jiřina - Prodloužení

14. 8. 2010 23:06

A co prodloužení stránky - napsala jsem Ti mailík....

Odpovědět

Romana - rozšíření

20. 7. 2010 9:05

Ahoj,dá se rozšířit stránka i u šablony K,placená verze?
Jestli ano(našla jsem u tebe tuším že ano),tak jak..? Děkuju !!
Romana R.

Odpovědět

Pavla - Rozšíření stránky

5. 12. 2009 23:09

Ahoj Tome, potřebovala bych poradit s rozšířením... používám šamlonu H. Ale jaksi jsem podle tvého návodu to nedokázala a bojím se abych v tom neudělala nějakou botu a celé stránky si nezničila mohl bys mi prosím pomoci? A taky bych ráda změnila barvu. Stránky jsou www.andyrainbowstar.estranky.cz Je tam na mne mail. Díky moc

Odpovědět

Tomáš Hypeš - Re: Prosba

3. 10. 2009 20:00

Jaké obrázky kam?

Odpovědět

Jakub - Prosba

3. 10. 2009 19:37

Tomáši, dej prosímtě nějaké obrázky na webovky.
Dík Jakub, Kolín

Odpovědět