PhpBB2: Come avere un menu di navigazione verticale


Tutorial PhpBB2: Come avere un menu di navigazione verticale

Messaggio Da Niko il Dom 27 Apr 2014 - 21:17

PhpBB2: Come avere un menu di navigazione verticale


Questo tutorial permetterà di inserire una barra di navigazione verticale sui vostri forum Forumattivo

Dimostrazione

PhpBB2: Come avere un menu di navigazione verticale Barrev10

Prima di effettuare i cambiamenti accertatevi di soddisfare queste condizioni:

  • Devi essere il fondatore del forum e avere accesso ai templates
  • La versione del tuo forum deve essere PhpBB2



Modifica del template overall_header

Andate verso PDA ► Visualizzazione ► Templates ► Generale e modificate (PhpBB2: Come avere un menu di navigazione verticale 1005357294) il template overall_header 

Trovate questa parte che contiene la variabile {GENERATED_NAV_BAR} :

Codice:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>

e sostituitela con :

Codice:
<div class="vertical_nav">{GENERATED_NAV_BAR}</div>


Spiegazione

Inserendo la variabile della barra navigazione in un div e assegnandoli la classe 
vertical_nav, ptremo modificarne lo stile con il CSS
Una volta completata la modifica registrate le modifiche cliccando sul bottone "PhpBB2: Come avere un menu di navigazione verticale 644535217" nella lista dei templates


Modifica del foglio di stile CSS

Andate verso PDA ► Visualizzazione ► Colori ► Foglio di stil CSS

e aggiungete il seguente codice CSS

Codice:
div.vertical_nav {[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
    position:absolute;[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
    top:50px;[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
    left:5%;[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
}


Spiegazione
position:absolute; permette di inserire la barra di navigazione come elemento movente
top:50px; ci permette di spostarla di 50 pixel dall'alto della paggina
left:5%; ci permette di spostarlo del 5% dalla sinistra ella pagina

Nota: se volete far rimanere la barra di navigazione dove si trova anche se scorrete verso il basso dovete sostituire position:absolute; con position:fixed;

per finire aggiungi questo codice CSS
Codice:
div.vertical_nav a.mainmenu {
    display:list-item;
    list-style:none;
}

Explanation :
display:list-item; Ci permette di vedere gli elementi della barra come una lista verticale
list-style:none; ci permette di rimuovere lo stile della lista (i puntini : •)

Se volete aggiungere dei bordi come nell'esempio e magari uno sfondo potete farlo con questo codice CSS
Codice:
div.vertical_nav {
    background:#FFFFFF;
    border:1px solid #D0D0D0;
}

Explanation :
background:#FFFFFF; allows us to color the background of the block white
border:1px solid #D0D0D0; allows us to add a solid gray border of 1px

Non dimenticate di salvare le vostre modifiche, e mi raccomando, siate creativi!  Di festa 


Tutorial creato da:
Copyrigth ©️ FORUMATTIVO.COM


Niko
Niko
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 23
Messaggi : 7799
Località : Provincia di Varese


https://www.openstudio.one
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Torna in alto


 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum