Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Bara de navigare verticala

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Bara de navigare verticala

Mesaj Scris de Cassius Dio Lun Iul 29, 2013 10:03 pm

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:Bara de navigare verticala V8JanPA
- Previzualizare pentru PunBB:Bara de navigare verticala 2U3Fogr

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 realizat de Cassius Dio, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Cassius Dio

Cassius Dio
Membru onorific
Membru onorific

Mesaje : 10826
Varsta : 26
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Mulțumiri : 84
Internet Explorer phpBB3

http://beatles.forummo.com/
Cassius Dio a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum