Personalizzare le scorciatoie di navigazione


Tutorial Personalizzare le scorciatoie di navigazione

Messaggio Da Niko il Mar 13 Mag 2014 - 16:52

Personalizzare le scorciatoie di navigazione


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 Wink

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 Wink


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 Wink


  • 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


avatar
Niko
Veterano dello staff


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


Vedi 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

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