PhpBB2: Come avere un menu di navigazione verticale

Da **Niko** 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

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

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