Tomáš Hypeš

Úvod >> Rady na Estránky >> Pro placený program >> Rozšíření stránky pomocí CSS

Rozšíření stránky pomocí CSS

Tady vám pomohu rozšířit stránku, aby nebyla tak úzká. Na každé šabloně je to trochu jiné, tak vám je popíšu zvlášť.

Kompatibilita

Současná verze eStránek:	ANO
Nová verze eStránek:	NE	- Jiná struktura CSS šablon.

Testováno 26. srpna 2009

Šablona A

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

2. Najděte si tam toto:

#page {
   width: 775px;
   font-size: 95%;
   margin: 0 auto;
   text-align: left;
   border: 1px solid #8A8A8A;
   padding: 3px;
}

3. Změňte hodnoty:

775 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

4. Uložte jako nové css a nastavte si ho v Nastavení - vzhled - design.

Šablona B

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

2. Najděte si tam toto:

#page {
   width: 760px;
   font-size: 85%;
   margin: 20px auto 0 auto;
   text-align: left;
   background: white;
}

3. Změňte hodnoty:

760 - Změňte na šířku stránky, kterou chcete mít (v pixelech). Tuto šířku bude mít i logo.

4. Uložte jako nové CSS a nastavte si ho v Nastavení - Vzhled - Design.

5. Změna loga:

Vytvořte si nové logo o výšce 199 pixelů a šířka, jako má modrá hodnota ve třetím bodu (změněná).

Šablona C

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

2. Najděte si tam toto:

#page {
   width: 742px;
   wid\th: 740px;
   font-size: 95%;
   margin: 0 auto;
   text-align: left;
   background: white;
   border: solid #D3D9BF;
   border-width: 0 1px;
   position: relative;
   padding: 106px 0 61px 0;
}

3. Změňte hodnoty:

742 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

740 - Tato hodnota musí být o 2 menší než modrá.

4. Rozšiřte si obrázek podle modré hodnoty, vyberte si obrázek podle barvy vašeho stylu.

Zelený - http://www9.estranky.cz/img/user/03logo.png

Šedý - http://www9.estranky.cz/img/user/03s_logo.jpg

Modrý - http://www9.estranky.cz/img/user/03m_logo.jpg

Černý - http://www9.estranky.cz/img/user/03c_logo.jpg

Červený - http://www9.estranky.cz/img/user/03e_logo.jpg

Růžový - http://www9.estranky.cz/img/user/03r_logo.jpg

Uložte jej na stránku (Nastavení - Rozšíření - Obrázky).

5. V CSS najděte toto:

#logo {
   position: absolute;
   left: -1px;
   top: 0;
   width: 742px;
   height: 106px;
   background: #F5FDD9 url("03logo.png") no-repeat;

742 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

03logo.png - Změntě na URL obrázku (změneného) z bodu 4, nic jiného neměňte!

6. Rozšiřte si obrázek podle modré hodnoty, vyberte si obrázek podle barvy vašeho stylu.

Modrý - http://www9.estranky.cz/img/user/03m_footer.jpg

Šedý - http://www9.estranky.cz/img/user/03s_footer.jpg

Růžový - http://www9.estranky.cz/img/user/03r_footer.jpg

Černý - http://www9.estranky.cz/img/user/03c_footer.jpg

Zelený - http://www9.estranky.cz/img/user/03footer.jpg

Oranžový - http://www9.estranky.cz/img/user/03e_footer.jpg

Uložte jej na stránku (Nastavení - Rozšíření - Obrázky).

7. V CSS najděte toto:

#footer div {
    position: absolute;
    top: 0;
    left: -1px;
    width: 742px;
    height: 61px;
    heigh\t: 41px;
    background: url("03footer.jpg") no-repeat;
    text-align: center;
    color: #A0A890;
    padding-top: 20px;
}

742 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

03footer.jpg - Změntě na URL obrázku (změneného) z bodu 6, nic jiného neměňte!

8. Uložte jako nové CSS a nastavte si ho v Nastavení - Vzhled - Design.

9. Změna loga:

Vytvořte si nové logo o výšce 212 pixelů a šířka bude o 207 menší než modrá hodnota.

Šablona D

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

2. Najděte si tam toto:

#page {
   width: 760px;
   widt\h: 750px;
   font-size: 95%;
   margin: 0 auto;
   left: 1px;
   text-align: left;
   background-color: #ECECEC;
   border: solid #ECECEC;
   border-width: 0 5px;
   position: relative;
}
* html #page {
   font-size: 80%;
   fo\nt-size: 90%;
}
#logo {
   width: 750px;
   height: 150px;
   background: #090909 url("") 50% 100% no-repeat;
   margin-bottom: 5px;
}

3. Změňte hodnoty:

760 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

750 - Tato hodnota musí být o 10 menší než šířka stránky. Stejnou šířku bude mít i logo.

4. Uložte jako nové CSS a nastavte si ho v Nastavení - Vzhled - Design.

5. Změna loga:

Vytvořte si nové logo o výšce 150 pixelů a šířka, jako má modrá hodnota ve třetím bodu (změněná).

Šablona E

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

2. Najděte si tam toto:

#page {
   width: 760px;
   font-size: 95%;
   margin: 0 auto;
   text-align: left;
   background-color: #223034;
   position: relative;
}
* html #page {
   font-size: 80%;
   fo\nt-size: 90%;
}
#logo {
   width: 760px;
   height: 229px;
   background: #F5FDD9 url("") 50% 0 no-repeat;
}

3. Změňte hodnoty:

760 - Změňte na šířku stránky, kterou chcete mít (v pixelech). Tuto šířku bude mít i logo.

4. Uložte jako nové css a nastavte si ho v Nastavení - Vzhled - Design.

5. Změna loga:

Vytvořte si nové logo o výšce 229 pixelů a šířka, jako má modrá hodnota ve třetím bodu (změněná).

Šablona G

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

2. Najděte si tam toto:

#page { width: 760px; font-size: 85%; margin: 20px auto 0 auto; text-align: left; background: transparent; }
* html #page { font-size: 70%; fo\nt-size: 80%; }

3. Změňte hodnoty:

760 - Změňte na šířku stránky, kterou chcete mít (v pixelech). Tuto šířku bude mít i logo.

4. Najděte si tam toto:

#text { float: right; width: 537px; color: #333333; overflow: hidden; }
#text-in { min-height: 350px; _height: 350px; padding: 0 0 15px 0; background: white; }

5. Změňte hodnoty:

537 - Tato hodnota musí být o 223 pixelů menší než modrá (změněná).

6. Uložte jako nové CSS a nastavte si ho v Nastavení - Vzhled - Design.

7. Změna loga:

Vytvořte si nové logo o výšce 200 pixelů a šířka, jako má modrá hodnota ve třetím bodu (změněná).

Šablona I

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

2. Najděte si tam toto:

#main {
   width: 780px;
   margin: 0 auto;
   text-align: left;
   position: relative;
}

3. Změňte hodnoty:

780 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

4. Dále najděte toto:

#logo, #logo-in, #logo-user {
   height: 200px;
   width: 760px;
   background: #fff url("") no-repeat;
   margin-bottom: 10px;
}
#text {
   height: 400px;
   background:   url("i/main1.gif") repeat-y right top;
}

5. Změňte hodnoty:

760 - Toto je šířka loga, musí být o 20 menší, než šířka stránky.

400 - Toto je šířka textové oblasti, musí být o 380 menší, než šířka stránky.

6. Rozšiřte si obrázek podle modré hodnoty, vyberte si obrázek podle barvy vašeho stylu.

Modrý - http://www9.estranky.cz/img/user/i/4/bg_main_in.jpg

Červený - http://www9.estranky.cz/img/user/i/1/bg_main-in.jpg

Zelený - http://www9.estranky.cz/img/user/i/3/bg_main_in.jpg

Hnědý - http://www9.estranky.cz/img/user/i/2/bg_main_in.jpg

Růžová - http://www9.estranky.cz/img/user/i/5/bg_main_in.jpg

Uložte jej na stránku (Nastavení - Rozšířené - Obrázky)

7. V CSS najděte toto:

#main-in{
background: #fff url('i/4/bg_main_in.jpg') no-repeat top;
padding: 10px 10px 0px 10px;
}

i/4/bg_main_in.jpg - Změňte na URL vašeho změněného obrázku.

8. Rozšiřte si obrázek podle modré hodnoty, vyberte si obrázek podle barvy vašeho stylu.

Modrý - http://www9.estranky.cz/img/user/i/4/bg_footer.jpg

Červený - http://www9.estranky.cz/img/user/i/1/bg_footer.jpg

Zelený - http://www9.estranky.cz/img/user/i/3/bg_footer.jpg

Hnědý - http://www9.estranky.cz/img/user/i/2/bg_footer.jpg

Růžová - http://www9.estranky.cz/img/user/i/5/bg_footer.jpg

Uložte jej na stránku (Nastavení - Rozšířené - Obrázky)

9. V CSS najděte toto:

#footer {
   background: #d2ebf2 url("i/4/bg_footer.jpg") no-repeat top;
   padding-top: 40px;
   padding-bottom: 10px;
   padding-left: 10px;
   text-align: left;
}

i/4/bg_footer.jpg - Změňte na URL vašeho změněného obrázku.

10. Rozšiřte si obrázek podle modré hodnoty, vyberte si obrázek podle barvy vašeho stylu.

Modrý - http://www9.estranky.cz/img/user/i/4/bg_menu.jpg

Červený - http://www9.estranky.cz/img/user/i/1/bg_menu.jpg

Zelený - http://www9.estranky.cz/img/user/i/3/bg_menu.jpg

Hnědý - http://www9.estranky.cz/img/user/i/2/bg_menu.jpg

Růžová - http://www9.estranky.cz/img/user/i/5/bg_menu.jpg

Uložte jej na stránku (Nastavení - Rozšířené - Obrázky)

11. V CSS najděte toto:

#menu {
background: #1d2a3a url("#menu {
background: #1d2a3a url("i/4/bg_menu.jpg") no-repeat 0px 0px;
_height: 1%;
font-weight: normal;
}

i/4/bg_menu.jpg - Změňte na URL vašeho změněného obrázku.

12. Uložte jako nové css a nastavte si ho v Nastavení - vzhled - design.

13. Změna loga:

Vytvořte si nové logo o výšce 200 pixelů a šířka, jako má červená hodnota v pátém bodu (změněná).

Šablona J

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

2. Najděte si tam toto:

#logo {
   width: 770px;
   height: 170px;
   margin: 0 auto;
   text-align: left;
   background: url("") 5px top no-repeat;
}
#logo-in {
   _width: 770px;
   _height: 170px;
   padding: 50px 0 0 35px;
   background: url('j/5/header.png') top left no-repeat;
     _background: none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='j/5/header.png', sizingMethod='scale');
}

3. Změňte hodnoty:

770 - Změňte na šířku stránky, kterou chcete mít (v pixelech).

červeně - Toto smažte, nebude potom logo zaoblené.

4. Dále najděte toto:

#menu ul {
   overflow: hidden;
   _overflow: none;
   position: relative;
   z-index: 500;
   width: 770px;
   height: auto !important;
   height: 70px;
   min-height: 70px;
   margin: 0 auto -10px;
   _margin: 0 0 -10px;
}

5. Změňte hodnoty:

770 - Zde bude stejná hodnota jako ve třetím bodu (upravená).

6. Dále najděte toto:

#text-in {
   width: 760px;
   margin: 0 auto;
   text-align: left;
   color: #0e2840;
   background: #fff url('j/5/content.jpg') top left repeat-y;
}

7. Změňte hodnoty:

760 - Zde bude hodnota o 10 menší než ve třetím bodu (upravená).

8. Rozšiřte si obrázek o tolik, o kolik jste si rozšířily šablonu, vyberte si obrázek podle barvy vašeho stylu.

Hnědý - http://www9.estranky.cz/img/user/j/1/content_top.jpg

Černý - http://www9.estranky.cz/img/user/j/2/content_top.jpg

Červený - http://www9.estranky.cz/img/user/j/3/content_top.jpg

Fialový - http://www9.estranky.cz/img/user/j/4/content_top.jpg

Modrý - http://www9.estranky.cz/img/user/j/5/content_top.jpg

Zelený - http://www9.estranky.cz/img/user/j/6/content_top.jpg

Uložte jej na stránku (Nastavení - Rozšířené - Obrázky)

9. V CSS najděte toto:

#content {
   overflow: hidden;
   position: relative;
   float: left;
   width: 484px;
   _width: 514px;
   margin-top: -20px;
   padding: 20px 15px 0;
   background: #fff url('j/5/content_top.jpg') left top no-repeat;
}

10. Změňte hodnoty:

484 - Tuto hodnotu zvěčte o tolik, o kolik jste si rozšířili stránku.

j/5/content_top.jpg - Změňte na URL obrázku z 8. bodu.

11. Rozšiřte si obrázek o tolik, o kolik jste si rozšířily šablonu, vyberte si obrázek podle barvy vašeho stylu.

Hnědý - http://www9.estranky.cz/img/user/j/1/content_bottom.jpg

Černý - http://www9.estranky.cz/img/user/j/2/content_bottom.jpg

Červený - http://www9.estranky.cz/img/user/j/3/content_bottom.jpg

Fialový - http://www9.estranky.cz/img/user/j/4/content_bottom.jpg

Modrý - http://www9.estranky.cz/img/user/j/5/content_bottom.jpg

Zelený - http://www9.estranky.cz/img/user/j/6/content_bottom.jpg

Uložte jej na stránku (Nastavení - Rozšířené - Obrázky)

12. V CSS najděte toto:

#footer p {
   width: 745px;
   _width: 770px;
   margin: 0 auto;
   padding: 35px 25px 0 0;
   text-align: right;
   color: #7eabd5;
   background: url('j/5/content_bottom.jpg') top left no-repeat;
}

13. Změňte hodnoty:

745 - Tuto hodnotu zvěčte o tolik, o kolik jste si rozšířili stránku.

770 - Tuto hodnotu zvěčte o tolik, o kolik jste si rozšířili stránku.

j/5/content_bottom.jpg - Změňte na URL obrázku z 11. bodu.

14. Změna loga:

Vytvořte si nové logo o výšce 170 pixelů a šířka bude stejná jako modrá hodnota ve třetím bodu.

Komentáře

Přehled komentářů

Jirka - styl V

3. 9. 2010 21:43

Ahoj TomĂˇĹˇi, nemohl by jsi mÄ› pomoci s rozĹˇĂĹ™enĂm srĂˇnky u stylu V. ZkouĹˇĂm to, a poĹ™Ăˇd mÄ› to nejde. DĂky Jirka
www.nhsokolblovice.estranky.cz

Odpovědět

Michal - styl R

17. 8. 2010 21:54

Ahoj mohl by jsi nahodit návod i na styl R?

Odpovědět

Jana - díky moc

19. 6. 2010 0:16

Tome, moc děkuju! Jsem absolutní antitalent, ale díky tvému návodu se mi povedlo stránky upravit přesně tak jak jsem si Přála.Ještě jednou díky!!!!!

Odpovědět

Tomáš Hypeš - Re: dasda

16. 5. 2010 21:11

Ještě to rozšiř tady:
#main {
width: 570px;
}

Odpovědět

asad - dasda

16. 5. 2010 20:34

Ahoj dal som si rozsirit stranku ale nerozsirilo sa mi stredne menu a obsah ... pomoz mi ... http://www.fcslimacik.estranky.sk/

Odpovědět

Tomáš Hypeš - Re: help

20. 3. 2010 10:45

Proboha, pod editorem deje komentáře - povoleny.

Odpovědět

css - help

20. 3. 2010 10:43

ja si na stranku chcem dat ties komentare abi mne mohli psat tak jako tebe chapeš ???? ako si to tam mam dat tam mam ze editor jo a tam editor vipnuty a este take 5 moznosti a ktore prosim odpis diki :D

Odpovědět

css - help

20. 3. 2010 10:31

takze mam dat editor nezobrazovat ale ja si to chcem dat abi mi ties pisali tak ako ja tebe

Odpovědět

Tomáš Hypeš - Re: help

20. 3. 2010 10:22

Vy neumíte číst? Když chcete zobrazit komentáře, tak si snad vyberete nezobrazovat?

Odpovědět

css - help

20. 3. 2010 10:19

no ja som to nastavil a stale to tam neni dam editor a tam mam nekolko moznosti ktoru mam dat za odpoved diki

Odpovědět

Tomáš Hypeš - Re: help

17. 3. 2010 16:40

Nastavit si je můžeš pod editorem.

Odpovědět

css - help

17. 3. 2010 14:14

prosim ta ako vlozim na stranku komentare take cez ktore ti teras pisem prosim pomos mi odpoved prosim cim skôr diki :D

Odpovědět

Radek - šablona J

9. 3. 2010 23:23

Ahoj Tome,úprava šablony J není v pořádku(pravá část )viz. www.hgang.estranky.cz
Budeš nad tím přemýšlet,nebo čekáš na nekonečnou novou verzi

Odpovědět

Irena - nadpis stránek na střed

8. 3. 2010 20:20

Ahoj Tome,rozšířila jsem si šablonu C podle tvého návodu.Díky moc za něj.Jen nemůžu dostat nadpis stránek na střed,zůstává stále vlevo-mezery nepomáhají.Co s tím?Poradíš?

Odpovědět

Eva - Pomoc u šablony E

4. 2. 2010 22:43

Tomáši moc děkuji, nakonec jsem našla kde jsem dělala chybu. Díky

Odpovědět

Eva - Pomoc u šablony E

4. 2. 2010 20:24

adresa mých stránek je www.vizsla1.estranky.cz. Jsou tam i kontakty na mě. Díky Eva

Odpovědět

Tomáš Hypeš - Re: Pomoc u šablony E

4. 2. 2010 15:11

Dej sem adresu tvých stránek.

Odpovědět

Eva - Pomoc u šablony E

4. 2. 2010 14:48

Tomáši především moc děkuji na tvé stránky. Pro nás laiky super návod jak si stránky vylepšit. Mám prosím tě na tebe dotaz ohledně šablony E. Barvu jsem zvládla změnit i stránku a logo jsem rozšířila. Ovšem už mi nejde rozšířit text na stránce. Předem mnohokrát děkuji za tvou cennou radu.

Odpovědět

Tomáš Hypeš - Re: díky

2. 2. 2010 18:56

Máte se na co těšit, po spuštění nové verze plánuji mnoho nových návodů.

Odpovědět

ojarda - díky

2. 2. 2010 17:39

Tomáši, je třeba ti poděkovat za tyto stránky, ve kterých je plno užitečných věcí a návodů.
Pokračuj dále v práci, ať se máme na co těšit.

Odpovědět

1 2 3

následující »

Menu

Rozšíření stránky pomocí CSS

Kompatibilita

Šablona A

Šablona B

Šablona C

Šablona D

Šablona E

Šablona G

Šablona I

Šablona J

Komentáře

Přehled komentářů

Jirka - styl V

Michal - styl R

Jana - díky moc

Tomáš Hypeš - Re: dasda

asad - dasda

Tomáš Hypeš - Re: help

css - help

css - help

Tomáš Hypeš - Re: help

css - help

Tomáš Hypeš - Re: help

css - help

Radek - šablona J

Irena - nadpis stránek na střed

Eva - Pomoc u šablony E

Eva - Pomoc u šablony E

Tomáš Hypeš - Re: Pomoc u šablony E

Eva - Pomoc u šablony E

Tomáš Hypeš - Re: díky

ojarda - díky

Portrét

Fotoalbum

Toplist

Oblíbené odkazy

Vyhledávání