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řehled komentářů
ONLY TODAY! 50% discount on bases for XRumer and GSA SER + activation keys for GSA Search Engine Ranker!
https://en.xrumerbasee.ru/
To contact us, write to telegram https://t.me/DropDeadStudio, When contacting, mention promo code DDS50.
Jirka - styl V
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
Jana - díky moc
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!!!!!
asad - dasda
Ahoj dal som si rozsirit stranku ale nerozsirilo sa mi stredne menu a obsah ... pomoz mi ... http://www.fcslimacik.estranky.sk/
css - help
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
css - help
takze mam dat editor nezobrazovat ale ja si to chcem dat abi mi ties pisali tak ako ja tebe
Tomáš Hypeš - Re: help
Vy neumíte číst? Když chcete zobrazit komentáře, tak si snad vyberete nezobrazovat?
css - help
no ja som to nastavil a stale to tam neni dam editor a tam mam nekolko moznosti ktoru mam dat za odpoved diki
css - help
prosim ta ako vlozim na stranku komentare take cez ktore ti teras pisem prosim pomos mi odpoved prosim cim skôr diki :D
Radek - šablona J
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
Irena - nadpis stránek na střed
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íš?
Eva - Pomoc u šablony E
Tomáši moc děkuji, nakonec jsem našla kde jsem dělala chybu. Díky
Eva - Pomoc u šablony E
adresa mých stránek je www.vizsla1.estranky.cz. Jsou tam i kontakty na mě. Díky Eva
Eva - Pomoc u šablony E
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.
Tomáš Hypeš - Re: díky
Máte se na co těšit, po spuštění nové verze plánuji mnoho nových návodů.
Bryanvix - Earn more from your website THAN IN A YEAR OF WORK!