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

Nuovi Css per la vostra toolbar


Nuovi Css per la vostra toolbar

Messaggio Da Martino il Sab 09 Feb 2013, 13:16

Personalizzare la toolbar di forumattivo

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




Staff - Moderatore

Martino
Moderattivo
Moderattivo

Sesso : Maschile
Età : 18
Messaggi : 4141
Località : Italia


Vedere il profilo dell'utente http://wikiinfo.forumattivo.it/
Martino è stato ringraziato dall'autore di questo topic.

Nuovi Css per la vostra toolbar

Messaggio Da Dozy™ il 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:



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



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



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:



Modificare "Vedere tutte le notifiche"



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:



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:



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™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è 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