Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

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


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 () 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 "" 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
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7668
Località : Provincia di Varese


Vedere il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

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

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum