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ářů

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

Tomáš Hypeš - Re: :(---:(

29. 1. 2010 20:50

Podle čeho soudíš?

Odpovědět

RiChArD - :(---:(

29. 1. 2010 17:09

tato stranka je na picu

Odpovědět

Fero - Re: pomoc

24. 1. 2010 12:12

vidim ze logika tu asi nefunguje,
tak ze ideme postupne
únor = február
upgrade = (aktualizácia) to znemaneá že e
Stránky budu aktualizované na novšiu verziu..
chapes?

kdyz nevite co je to web a nevite pouzivat logiku tak se do tvorby webu nehrnte!

Odpovědět

RiCHarD - pomoc

24. 1. 2010 11:08

nerozumiem nevies po slovensky alebo sa aspon pokusit co to je unoru a upgrade to je co za odpoved diky

Odpovědět

Tomáš Hypeš - Re: pomoc

24. 1. 2010 9:34

Nová verze bude v únoru. Nic stahovat nemusíte, upgraduje se to samo.

Odpovědět

RiChaRD - pomoc

24. 1. 2010 8:35

a ako mam stiahnut novu verziu a ked budem mat novu verziu stranka mi nezmizne ??? http://www.zombiescss.estranky.cz/

Odpovědět

Tomáš Hypeš - Re: pomoc

23. 1. 2010 15:31

To půjde v nové verzi.

Odpovědět

RIchARD - pomoc

23. 1. 2010 15:24

prosim ta ako mozem do stranky v sunut komentáre za odpoved dakujem

Odpovědět

Tomáš Hypeš - Re: zzzzzz

6. 12. 2009 7:30

To protože tady návod na šablonu H není a ani ho dělat nebudu, protože na Vánoce se spustí nová verze, kde tato šablona nebude.

Odpovědět

jakaru - zzzzzz

10. 10. 2009 18:33

kde zjistim jakou mam šablonu? a jde zjistit i když mam program zdarma

Odpovědět

Lukaaash - mail

26. 9. 2009 17:34

Lukaaash@email.cz

Odpovědět

Tomáš Hypeš - Re: Styl J

26. 9. 2009 17:30

Šlo by to. Pošli mi mail a udělám ti to. Ale doporučuji počkat do nové verze, aby se to nemuselo předělávat.

Odpovědět

Lukaaash - Styl J

26. 9. 2009 17:14

Chtěl bych se zeptat, jestli by nešlo rozšířit jen část pro text - ta pravá část, levou bych chtěl zmenšit

Odpovědět

Tomáš Hypeš - RE:Pomoc

21. 8. 2009 15:44

Napiš mi na mail.

Odpovědět

XDXD - Pomoc

21. 8. 2009 15:36

Ahoj potřebuju radu když si rozšířim šablonu D tak ji mam rozšířenou ale střed zůstává furt stejnej takže vlastně víc textu nepřidam

Odpovědět

Tomáš Hypeš - RE:menší problém

30. 4. 2009 13:56

U bodu 8 a 11 sis nerozšířil obrázek.

Odpovědět

Riči - menší problém

30. 4. 2009 12:27

Ahoj. Tak jsem to udělal dle tvého návodu, krok po kroku, ale jsou tam dvě drobné niance. Pokud se podíváš na stránky: http://www.hgang.estranky.cz
tak uvidíš v pravo dole pod MENU uskočený rámeček a stejné i úplně vpravo dole.

Odpovědět

Riči - díky moc

29. 4. 2009 21:59

Seš frajer:)

Odpovědět

Tomáš Hypeš - RE:prosím prosím

28. 4. 2009 12:11

Máš to tady

Odpovědět

« předchozí

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ářů

ojarda - díky

Tomáš Hypeš - Re: :(---:(

RiChArD - :(---:(

Fero - Re: pomoc

RiCHarD - pomoc

Tomáš Hypeš - Re: pomoc

RiChaRD - pomoc

Tomáš Hypeš - Re: pomoc

RIchARD - pomoc

Tomáš Hypeš - Re: zzzzzz

jakaru - zzzzzz

Lukaaash - mail

Tomáš Hypeš - Re: Styl J

Lukaaash - Styl J

Tomáš Hypeš - RE:Pomoc

XDXD - Pomoc

Tomáš Hypeš - RE:menší problém

Riči - menší problém

Riči - díky moc

Tomáš Hypeš - RE:prosím prosím

Portrét

Fotoalbum

Toplist

Oblíbené odkazy

Vyhledávání