Jdi na obsah Jdi na menu
Ú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("<!-- cssimgroot -->03logo.png") no-repeat;

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

<!-- cssimgroot -->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("<!-- cssimgroot -->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).

<!-- cssimgroot -->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("<!-- csslogourl -->") 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("<!-- csslogourl -->") 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("<!-- csslogourl -->") no-repeat;
    margin-bottom: 10px;
}
#text {
    height: 400px;
    background:   url("<!-- cssimgroot -->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('<!-- cssimgroot -->i/4/bg_main_in.jpg') no-repeat top;
 padding: 10px 10px 0px 10px;
}

<!-- cssimgroot -->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("<!-- cssimgroot -->i/4/bg_footer.jpg") no-repeat top;
    padding-top: 40px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-align: left;
}

<!-- cssimgroot -->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("<!-- cssimgroot -->i/4/bg_menu.jpg") no-repeat 0px 0px;
_height: 1%;
font-weight: normal;
}

<!-- cssimgroot -->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("<!-- csslogourl -->") 5px top no-repeat;
}
#logo-in {
    _width: 770px;
    _height: 170px;
    padding: 50px 0 0 35px;
    background: url('<!-- cssimgroot -->j/5/header.png') top left no-repeat;
     _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='<!-- cssimgroot -->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('<!-- cssimgroot -->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('<!-- cssimgroot -->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.

<!-- cssimgroot -->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('<!-- cssimgroot -->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.

<!-- cssimgroot -->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řidat komentář

Přehled komentářů

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

27. 4. 2009 10:22

Dobře, vidím, že je o to zájem, tak to v nejbližší době uělám, snad ještě tento týden. (Samozřejmě jen, pokud mi to půjde)

Odpovědět

Riči - prosím prosím

26. 4. 2009 23:09

o rozšíření šablony J. děkuju

Odpovědět

Tomáš Hypeš - RE:rozšíření šablony J

23. 4. 2009 14:06

Tato šablona je nejsložitější, a proto si ji nechávám na konec. Doporučuji si vybrat jinou. Pokud stále trváš na této šabloně, o víkendu se snad najde čas.

Odpovědět

Riči - rozšíření šablony J

22. 4. 2009 22:23

Ahoj. Mohl by jsi mi prosím poradit, jak rozšířit šablonu J?
Měl jsem starou, tam jsem to našel a upravil v pohodě, ale tady mi to zaboha nejde...
www.hgang.estranky.cz
Díky

Odpovědět

« předchozí

1 2 3