Jdi na obsah Jdi na menu
Úvod >> Rady na Estránky >> Pro placený program >> Druhý sloupec

Druhý sloupec

Chcete mít na stránkách sloupce po obou stranách a ne jen na jedné? Postupujte podle návodu.

 

Kompatibilita

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

Testováno 26. srpna 2009

 

Šablona A - E

1. V CSS před poslední } vložte toto:

#submenu2{
    float: right;
}
#main {
    width: 570px;
}

570px - U šablony A změňte na 592px, u šablony C 547px a u šablony D 545px. Pokud jste si rozšířili stránku, tuto hodnotu musíte zvětšit o tolik, o kolik jste si rozšířili stránku.

2. V XHTML (Nastavení - Vzhled - Design - Upravit kódu šablony) v Hlavní šabloně najdi toto:

        <div id="main">
                <div id="text"><div id="text-in">
                  <!-- user_navigace -->
                  <!-- user_obsah -->
                </div>
                </div>
                <hr />
                <div id="submenu" style="float:left;">
                <div id="submenu-in">
                        <!-- user_portret -->
                        <!-- user_menu -->
                        <!-- post_lista2 -->
                        <!-- user_fotoalba -->
                        <!-- user_poslednifotoalbum -->
                        <!-- user_odkazy -->
                        <!-- user_hledani -->
                        <!-- user_kalendar10 -->
                        <!-- post_lista4 -->
                        <!-- user_toplist -->
                </div></div>
                <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>

3. Změň na:

                <div id="submenu2">
                <div id="submenu">
                <div id="submenu-in">
                        <!-- user_odkazy -->
                        <!-- user_hledani -->
                        <!-- user_kalendar10 -->
                        <!-- post_lista4 -->
                        <!-- user_toplist -->
                </div></div></div>
        <div id="main">
                <div id="text"><div id="text-in">
                  <!-- user_navigace -->
                  <!-- user_obsah -->
                </div>
                </div>
                <hr />
                <div id="submenu">
                <div id="submenu-in">
                        <!-- user_portret -->
                        <!-- user_menu -->
                        <!-- post_lista2 -->
                        <!-- user_fotoalba -->
                        <!-- user_poslednifotoalbum -->
                </div></div>
                <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>

červeně - Obsah levého sloupce, můžete si tam dát, co chcete.

modře - Obsah pravého sloupce.

 

Dále pokračujte, pokud máte šablonu C

4. V CSS (Nastavení - Vzhled - Design - Upravit CSS šablony) najdi toto:

#main {
    background:  url("<!-- cssimgroot -->03prechod.gif") repeat-x;
    padding-top: 50px;
}

5. Přidejte modrý text:

#main, #submenu2 {
    background:  url("<!-- cssimgroot -->03prechod.gif") repeat-x;
    padding-top: 50px;
}

6. Zúžte si logo o 194 pixelů.

To je vše.

 

Šablona G

1. V CSS (Nastavení - Vzhled - Design - Upravit CSS šablony) najdi toto:

#text { float: right; width: 537px; color: #333333; overflow: hidden; }

2. Změň na:

#text { width: 314px; color: #333333; overflow: hidden; }

314px - To je šířka textové oblasti, pokud jste si rozšířili stránky, musíte tuto hodnotu zvětšit o tolik, o kolik jste si stránku rozšířili.

3. V CSS před poslední } vložte toto:

#submenu2{
    float: right;
}

4. V XHTML (Nastavení - Vzhled - Design - Upravit kódu šablony) v Hlavní šabloně najdi toto:

        <div id="main">
                <div id="text"><div id="text-in">
                  <!-- user_navigace -->
                  <!-- user_obsah -->
                </div>
<div id="footer"><div>&copy; 2005 - 2008 eStránky.cz | Vytvořeno službou <a href="<!-- glob_serverroot -->">eStránky.cz</a></div></div>
                </div>
                <hr />
                <div id="submenu">
                <div id="submenu-in">
                        <!-- user_menu -->
                        <!-- user_portret -->
                        <!-- post_lista2 -->
                        <!-- user_fotoalba -->
                        <!-- user_poslednifotoalbum -->
                        <!-- user_odkazy -->
                        <!-- user_hledani -->
                        <!-- user_kalendar10 -->
                        <!-- post_lista4 -->
                        <!-- user_toplist -->
                </div></div>
                <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>

5. Změň na:

        <div id="main">
                <hr />
                <div id="submenu2">
                <div id="submenu">
                <div id="submenu-in">
                        <!-- user_odkazy -->
                        <!-- user_hledani -->
                        <!-- user_kalendar10 -->
                        <!-- post_lista4 -->
                        <!-- user_toplist -->
                </div></div></div>
                <div id="submenu">
                <div id="submenu-in">
                        <!-- user_menu -->
                        <!-- user_portret -->
                        <!-- post_lista2 -->
                        <!-- user_fotoalba -->
                        <!-- user_poslednifotoalbum -->
                </div></div>
                <div id="text"><div id="text-in">
                  <!-- user_navigace -->
                  <!-- user_obsah -->
                </div>
<div id="footer"><div>&copy; 2005 - 2008 eStránky.cz | Vytvořeno službou <a href="<!-- glob_serverroot -->">eStránky.cz</a></div></div>
                </div>
        </div>

červeně - Obsah levého sloupce, můžete si tam dát, co chcete.

modře - Obsah pravého sloupce.

To je vše.

 

Šablona I

1. V CSS (Nastavení - Vzhled - Design - Upravit CSS šablony) najdi toto:

#text {
    height: 400px;
    background:   url("<!-- cssimgroot -->i/main1.gif") repeat-y right top;
}
#main #main-in>#text {
    min-height: 400px;
    height: auto;
}
#text-in {
    width: 100%;
    /*overflow:hidden;*/
        overflow: none;
}
#content .in {
    padding: 0px 0px 5px 10px;
    color: #007ed7;
}
.userarea {
    width: 100%;
    overflow:hidden;
    background: #fff;
}

2. Změň na:

#text {
    height: 150px;
    background:   url("<!-- cssimgroot -->i/main1.gif") repeat-y right top;
}
#main #main-in>#text {
    min-height: 400px;
    height: auto;
}
#text-in {
    width: 100%;
    /*overflow:hidden;*/
    overflow: none;

}
#content .in {
    padding: 0px 0px 5px 10px;
    color: #007ed7;
}
.userarea {
    width: 100%;
    overflow:hidden;
    background: #fff;
    position: relative;
    left: 10px;
}

150px - To je šířka textové oblasti, pokud jste si rozšířili stránky, musíte tuto hodnotu zvětšit.

3. V CSS na konec vložte toto:

#submenu2{
    float: right;
}

4. V XHTML (Nastavení - Vzhled - Design - Upravit kódu šablony) v Hlavní šabloně najdi toto:

<div id="text">
<div id="text-in">
<div id="submenu">
<!-- user_portret -->
<!-- post_lista2 -->
<!-- user_fotoalba -->
<!-- user_poslednifotoalbum -->
<!-- user_odkazy -->
<!-- user_kalendar10 -->
<!-- post_lista4 -->
<!-- user_toplist -->
</div>
<div id="content">
<div class="in">
<div class="userarea">
<!-- user_obsah -->
</div>
</div>
</div>
<div class="end">&nbsp;</div>
</div>
</div>
<div class="cleaner">&nbsp;</div>
</div> <!-- konec main-in-->

5. Změň na:

<div id="text">
<div id="text-in">
<div id="submenu">
<!-- user_odkazy -->
<!-- user_kalendar10 -->
<!-- post_lista4 -->
<!-- user_toplist -->
</div>
<div id="submenu2">
<div id="submenu">
<!-- user_portret -->
<!-- post_lista2 -->
<!-- user_fotoalba -->
<!-- user_poslednifotoalbum -->
</div>
</div>
<div id="content">
<div class="in">
<div class="userarea">
<!-- user_obsah -->
</div>
</div>
</div>
<div class="end">&nbsp;</div>
<div class="end">&nbsp;</div>
</div>
</div>
<div class="cleaner">&nbsp;</div>
</div> <!-- konec main-in-->

červeně - Obsah levého sloupce, můžete si tam dát, co chcete.

modře - Obsah pravého sloupce.

To je vše.

 

Šablona J

1. V CSS (Nastavení - Vzhled - Design - Upravit CSS šablony) najdi toto:

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

484 a 514 - Obě hodnoty snižte o 244.

2. V XHTML (Nastavení - Vzhled - Design - Upravit kódu šablony) v hlavní šabloně najdi toto:

<div id="text">
<div id="text-in">
<div id="submenu">
<!-- user_portret -->
<!-- post_lista2 -->
<!-- user_fotoalba -->
<!-- user_poslednifotoalbum -->
<!-- user_odkazy -->
<!-- user_hledani -->
<!-- user_kalendar10 -->
<!-- post_lista4 -->
<!-- user_toplist -->
</div>
<div id="content">
<div class="in">
<!-- user_navigace -->
<div class="userarea">
<!-- user_obsah -->
</div>
</div>
</div>

3. Změň na:

<div id="text">
<div id="text-in">
<div id="submenu" style="position: absolute; margin-left: 514px; background: url(http://www7.estranky.cz/img/user/j/2/content_top.jpg) -268px 0px no-repeat;">
<!-- user_odkazy -->
<!-- user_hledani -->
<!-- user_kalendar10 -->
<!-- post_lista4 -->
<!-- user_toplist -->
</div>
<div id="submenu">
<!-- user_portret -->
<!-- post_lista2 -->
<!-- user_fotoalba -->
<!-- user_poslednifotoalbum -->
</div>
<div id="content">
<div class="in">
<!-- user_navigace -->
<div class="userarea">
<!-- user_obsah -->
</div>
</div>
</div>

514 - Pokud jste si rozšířili stránku, tak většte tuto hodnotu o tolik, o kolik jste si rozšířili stránku.

2 - Číslo změňte vaší barvy šablony: 1 hnědá, 2 černá, 3 červená, 4 fialová, 5 modrá a 6 zelená

červeně - Obsah levého sloupce, můžete si tam dát, co chcete.

modře - Obsah pravého sloupce.

To je vše.

 

Komentáře

Přidat komentář

Přehled komentářů

klanelita - super

6. 4. 2009 15:30

super to jse mi akorát hodí mam styl D a je to super,ale newimjak mam udělat tu plochu např:uvod tak to mam uzký tak jak to mam rošířit když rozšířim celou šablonu tak zas mam malý logo.Děkuju

Odpovědět

« předchozí

1 2 3