 |
Personalizzare le scorciatoie di navigazione |
La barra di navigazione nei singoli forum, nei topic e nella home è molto importante dal momento che vi indica la posizione nel forum; con un solo clic potete tornare al forum in cui è contenuto il topic, ricaricare il topic, aprire la categoria in cui è contenuto il forum o tornare alla home page 
Questo tutorial vi insegnerà come personalizzare la barra di posizione della navigazione (Scorciatoie di navigazione)
1. Dimostrazione
Ecco un esempio:
2. Installazione
- PhpBB3
- Codice:
.pathname-box {
-moz-border-radius: 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
background: #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px;
box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
margin-top: 10px;
}
.pathname-box {
color: #F3F3F3;
}
.pathname-box p {
color: #F7F2F2;
font-size: 1.11em;
line-height: 1.5;
margin: 0;
}
a.nav {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/second10.png) no-repeat 100% -1px;
color: #777!important;
font-size: 10px;
line-height: 30px;
padding: 11px 17px 11px 4px;
}
- PhpBB2
- Codice:
.nav {
background: #F3F3F3;
border: none;
border-radius: 3px;
box-shadow: none;
margin-top: 10px;
color: #F5EFEF;
}
a.nav {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/second10.png) no-repeat 100% -1px;
color: #777!important;
font-size: 10px;
line-height: 30px;
padding: 11px 17px 11px 4px;
}
- PunBB
- Codice:
.pun-crumbs {
-moz-border-radius: 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
background: #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px;
box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
margin-top: 10px;
}
p.crumbs {
color: #F3F3F3;
}
.pun-crumbs p {
color: #666;
font-size: 1.11em;
line-height: 1.5;
margin: 0;
}
p.crumbs a {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/second10.png) no-repeat 100% -1px;
color: #777!important;
font-size: 10px;
line-height: 30px;
padding: 11px 17px 11px 4px;
}
- Invision
- Codice:
#navstrip {
-moz-border-radius: 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
background: #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px;
box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 3px;
margin-top: 10px;
height: 39px;
}
#navstrip li {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/second10.png) no-repeat 100% -1px;
color: #777!important;
font-size: 10px;
line-height: 30px;
padding: 2px 10px;
}
#navstrip li.begin {
background: none;
}
3. Dove installare il codice
Basta andare verso Pannello di Amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► foglio di stile CSS, inserire il codice relativo alla vostra versione e confermare
4. Spiegazione delle stringhe di codice
Ogni codice CSS è formato da un selettore (#ID oppure .class) che identifica un elemento nel codice della pagina.. E con le stringe poste all'interno del codice modificherò quell'elemento (o elementi)
per esempio
- Codice:
#elemento {
//*Stringhe
}
- color: #000000;: modifica il colore del testo
- background-image: url('LINK');: modifica l'immagine di sfondo
- background-color: #000000;: modifica il colore di sfondo
- border: 1px solid #000000:: è possibile modificare spessore (1px), tipo di linea (solid continua, dashed a puntini) e il colore (#000000)
- box-shadow: 1px 1px 1px #000000: permette di aggiungere un'ombra nelle tre dimensioni (1px 1px 1px) e di personalizzare il colore
- border-radius: 2px;: permette di arrotondare i bordi
- opacity: 0.7: con un valore compreso tra 0 e 1 si può rendere un po' trasparente l'elemento
Nota: I colori devono essere in formato esadecimale (#000000, #00a5cd, #ffffff, ecc)
- Vorrei avere un'altra personalizzazione?
Nel caso tu avessi bisogno di aiuto con la personalizzazione puoi chiedere aiuto nella sezione di supporto.. basta aprire un topic
- Vorrei modificare *una proprietà* ma come fare??
Devi sempre aprire un topic nella sezione Gestire l'aspetto del forum e ti daremo tutto l'aiuto e le informazioni necessarie
- Il codice non funziona per la mia versione?
Apri un topic nella sezione di supporto e specifica la versione del tuo forum e il link del tuo forum
© Forum dei forum
 | Se si desidera aprire un topic di supporto potete indicare il seguente titolo:
Personalizzare le scorciatoie di navigazione |
Staff FDF - Forum di supporto per Forumattivo IT
Copyrigth  FORUMATTIVO.COM
|
Indice
Personalizzare le scorciatoie di navigazione
Da Niko Mar 13 Mag 2014 - 16:52
Argomenti simili
Facebook
Twitter
Youtube
