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

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





Regolamento • FAQ • Tutorial e risorse • Perdita della password • Pannello degli attrezzi

    

Niko
Amminattivo
Amminattivo


Sesso : Maschile
Età : 20
Messaggi : 7654
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