Bara de navigare verticala

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Bara de navigare verticala

Mesaj Scris de Cassius Dio la data de Lun 29 Iul 2013 - 21:03

Bara de navigare verticala

Bun gasit! Foarte fericit

Idee Daca v-ati dorit vreodata sa plasati bara dumneavoastra de navigare in rand cu logo-ul, link-urile pozitionate vertical, acum aveti aceasta posibilitate. Tutorialul functioneaza pentru forumurile cu template-uri, adica phpBB2 si PunBB.

- Previzualizare pentru phpBB2:
- Previzualizare pentru PunBB:

Sageată Daca folositi phpBB2:
1. Vizitati Panou de Administrare ~> Afisare ~> Pagina de start ~> Antet & Navigare. Selectati Centrat pentru optiunea Pozitia logo-ului, iar pentru Pozitie meniu - La stanga.

2. Vizitati Panou de Administrare ~> Afisare ~> Template-uri ~> General ~> overall_header. Identificati urmatorul cod:
Cod:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>
si eliminati-l.

Identificati acest cod:
Cod:
<!-- END switch_logo_right -->
si dupa el adaugati:
Cod:
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

Inlocuiti acest cod:
Cod:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
cu:
Cod:
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="site-header">

Mai inlocuiti:
Cod:
<td align="center" width="100%" valign="middle">
cu:
Cod:
<td align="center" width="80%" valign="middle">

3. Vizitati Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS. Adaugati urmatorul cod:
Cod:
.site-header .maintitle h6{
  margin: 5px;
}

.site-header a.mainmenu {
  display: block;
  margin-bottom: -10px;
}

Sageată Daca folositi PunBB:
1. Vizitati Panou de Administrare ~> Afisare ~> Pagina de start ~> Antet & Navigare. Selectati Centrat pentru optiunea Pozitia logo-ului, iar pentru Pozitie meniu - La stanga.

2. Vizitati Panou de Administrare ~> Afisare ~> Template-uri ~> General ~> overall_header. Identificati urmatorul cod:
Cod:
<div id="pun-intro" class="clearfix">
 <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

 <!-- BEGIN switch_h1 -->
 <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->

 <!-- BEGIN switch_desc -->
 <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>
 <div id="pun-head">
 <div id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 </div>
si eliminati-l.

Identificati acest fragment de cod:
Cod:
<div class="pun">
si dupa el adaugati:
Cod:
<table class="site-header" cellspacing="0" width="100%">
                                    <tr>
 <td id="pun-intro" class="clearfix" width="80%">
 <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

 <!-- BEGIN switch_h1 -->
 <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->

 <!-- BEGIN switch_desc -->
 <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </td>
 <td id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
                                       </td>
                                    </tr>
                                  </table>

3. Vizitati Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS. Adaugati urmatorul cod:
Cod:
#pun-navlinks{
  background: #1f537b;
  padding: 5px;
}

#pun-title{
  margin: 5px;
}

#pun-navlinks li a{
  display: block;
  color: #DDD;
  font-weight: bold;
  margin-bottom: -12px !important;
}
Tutorial scris de Cassius Dio

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum