Nuovi Css per la vostra toolbar

Nuovi Css per la vostra toolbar Empty Nuovi Css per la vostra toolbar

Messaggio Da Ospite Sab 9 Feb 2013 - 13:16

Personalizzare la toolbar di forumattivo

Nuovi Css per la vostra toolbar Toolba10
Ciao amici! Vi è piaciuta la novità di Forumattivo? Bene, allora possiamo iniziare a offrirvi già dei codici che vi permettano di personalizzare la vostra toolbar nel forum.

Prima di tutto, diciamo dove è situata e come si configura: andiamo nel Pannello di Amministrazione-> Moduli-> Toolbar-> Configurazione-> Attivare il Toolbar : SI.
In caso si desidera che la barra della toolbar stia ferma nella parte superiore del forum, in "Fissare il toolbar" dobbiamo lasciare "NO", in caso contrario, cioè che vogliamo che ci segua durante la navigazione, selezioniamo "SI".

Adesso che abbiamo capito come si configura e come si installa, andiamo alla personalizzazione. Si vuole fare notare prima che forumattivo ha messo molto tempo a realizzare questo strumento ed è pienamente orgoglioso di esso. E' assolutamente vietato utilizzare script che rimuovano i diritti d'autore (vale a dire l'icona di riferimento + la scritta con il collegamento a forumattivo.it); i tecnici stanno lavorando a sistemi che vi permettano di farlo, forse tramite un pagamento.

I seguenti codici, sono per la personalizzazione estetica della barra, per cui si tratta di un CSS che deve essere inserito in PDA-> Visualizzazione-> Colori-> Foglio CSS.

Personalizzare colore sfondo:
Codice:
#fa_toolbar, #fa_toolbar_hidden {
background-color: #000000 !important;
}
Modifica il valore #000000 con il gradiente che più preferite.

Personalizzare sfondo con un'immagine:
Codice:
#fa_toolbar, #fa_toolbar_hidden {
background-image: url('http://link_della_tua_immagine.png');
}
Sostituisci il link all'interno del tag url con il link dell'immagine che più preferite.

In seguito, verranno pubblicati altri argomenti per la personalizzazione Wink. Alla prossima.

Se hai dubbi o domande, chiedi in "Problemi diversi".


Tutorial creato da: MartinoPio
Copyrigth ©️ FORUMATTIVO.COM


avatar
Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Nuovi Css per la vostra toolbar Empty Nuovi Css per la vostra toolbar

Messaggio Da Dozy™ Mar 12 Feb 2013 - 18:36

Nuovi Css per la vostra toolbar


Ciao, qui di seguito vi elenco i css per la vostra toolbar:

Oltre ai soliti postati dai miei colleghi che vi ricordo trovate anche nel topic Originale postato dalla nostra Admin:

Modificare il colore di sfondo per la vostra Toolbar:

Codice:
#fa_toolbar, #fa_toolbar_hidden {background-color: #xxxxxx !important;}

Aggiungere immagine di sfondo:

Codice:
#fa_toolbar, #fa_toolbar_hidden {background: url('http://image_url');}

Colorare box numero notifiche

Codice:
#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
    display: inline;
    color: red;
}

Risultato:

Nuovi Css per la vostra toolbar Immagi17

Disporre Benvenuto "Ospite e "Notifiche" a sinistra della toolbar:

Codice:
#fa_right {
    float: left;
    font-size: 14px;
}

Attenzione dovete anche spostare il fumetto che appare schiacciando il vostro nome utente ma prima personalizziamo il fumetto (vedere il mio profilo ecc)

Codice:
#fa_menulist {
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px 10px;
    background-color: rgb(255, 255, 255);
    min-width: 200px;
    width: auto;
    border-right: 1px solid rgb(51, 51, 51);
    border-width: 0px 1px 1px;
    border-style: solid;
    border-color: rgb(255, 255, 255) rgb(51, 51, 51) rgb(51, 51, 51);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    line-height: 30px;
    z-index: 10000;
    display: none;
}

Togliete :

Codice:
 position: absolute;

Risultato

Nuovi Css per la vostra toolbar Immagi10

Modificare blocco notifiche

Codice:
#fa_toolbar #fa_right #notif_list {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: rgb(255, 255, 255);
    border-right: 1px solid rgb(51, 51, 51);
    border-width: 0px 1px 1px;
    border-style: solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    z-index: 10000;
    border-image: none;
    font-size: 11px;
    border-color: rgb(255, 255, 255) rgb(51, 51, 51) rgb(51, 51, 51);
   
}

Modificare icona Delete

Nuovi Css per la vostra toolbar Immagi18

Codice:
#fa_toolbar #fa_right #notif_list li a.delete {
    width: 22px;
    height: 2.4em;
    background: url("http://www.illiweb.com/fa/i/toolbar/toolbar.png") no-repeat scroll -274px 50% transparent;
    float: right;
}

Modificare link notifiche

Codice:
#fa_toolbar #fa_right #notif_list li .contentText a {
    color: green !important;
    text-decoration: underline !important;
    vertical-align: baseline;
}

Risultato es:

Nuovi Css per la vostra toolbar Immagi19

Modificare "Vedere tutte le notifiche"

Nuovi Css per la vostra toolbar Immagi11

Codice:
#fa_toolbar #fa_right #notif_list li.see_all {
    color: rgb(255, 255, 255);
    background-color: rgb(51, 51, 51);
    padding: 0.7em !important;
    text-align: right;
}

Il colore della scritta:

Codice:
#fa_toolbar #fa_right #notif_list li.see_all a {
    color: vostro colore;
    width: 100%;
}

Modificare Textarea:

Nuovi Css per la vostra toolbar Immagi12

Codice:
#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px none;
    margin-top: 3px;
    border-radius: 5px 5px 5px 5px;
    line-height: 24px;}

input[type="text"], input[type="password"], select, textarea {
    border: 1px solid rgb(0, 165, 205) !important;
    box-shadow: 1px 1px 1px rgb(255, 255, 255);
}

Spostare Condividere "social" :

Codice:
#fa_share {
    font-size: 16px;
    line-height: 30px !important;
    margin-left: esempio: 350px;
}

Cambiare Font e colore al menù a tendina:

Nuovi Css per la vostra toolbar Immagi13

Codice:
#fa_menulist :link, #fa_menulist :visited {
    color: esempio red;
    font: vostri font; }

Comingsoon

Sfumature per le vostre Toolbar:

Codice:
Qui sfumature immagini


Per eventuali problemi o errori segnalatelo aprendo un topic in Problemi con lo script (Codici)


In aggiornamento...



Tutorial creato da: Dozy
Copyrigth © FORUMATTIVO.COM


Dozy™
Dozy™
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 36
Messaggi : 2297
Località : Tradate (va)

Dozy™ è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

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