Personalizzazione della chatbox


Astuzia Personalizzazione della chatbox

Messaggio Da Niko il Ven 12 Giu 2015 - 12:15

Personalizzazione della chatbox


Personalizza la tua chatbox Forumattivo !

Ecco a voi alcuni codici importantissimi e utili per personalizzare i testi e gli sfondi della vostra #chatbox Wink
Non dovrete fare altro che copiare e incollare i codici che prefererite (quanti ne volete) nel vostro foglio di stile #css :

Pannello di amministrazione Visualizzazione Colori "Foglio di stile CSS"

Modifica i colori di sfondo
Modifica i colori dei testi
Altre modifiche (avatars, bottoni, linee,...)

Modifica dei colori di sfondo della chatbox

Ecco a voi un esempio di una chatbox con i colori di sfondo modificati, per aiutarvi poi a capire meglio in fondo:


Idea Per ogni codice dovrete modificare COLORE con quello che preferite

►Modifica lo sfondo della parte iniziale della chatbox (in blu nell'esempio)
Codice:
#chatbox_header, td.catBottom, #chatbox_header.main-head {
  background: COLORE;
}

► Modificare la parte dei membri (in verde nell'esempio)
Codice:
#chatbox_members {
  background: COLORE;
}

► Modificare lo sfondo dell'intestazione della lista dei membri (in rosso nell'esempio)
Codice:
#chatbox_members .member-title {
  background: COLORE;
}

► Modificare lo sfondo della parte chat (in viola nell'esempio)
Codice:
#chatbox {
  background: COLORE;
}

► Modificare il colore dello sfondo delle righe "pari" (in arancione nell'esempio)
Codice:
.chatbox_row_1 {
  background: COLORE;
}

► Modificare il colore dello sfondo delle righe "dispari" (in azzurro nell'esempio)
Codice:
.chatbox_row_2 {
  background: COLORE;
}

► Modificare il colore di sfondo della barra dei bottoni (in rosa nell'esempio)
Codice:
#chatbox_messenger .catBottom, body.chatbox, #chatbox_footer {
  background: COLORE;
}

► Modificare lo sfondo della zona di edizione (in grigio nell'esempio)
Codice:
#chatbox_footer #message {
  background: COLORE;
}


Modifica dei colori del testo nella chatbox

Idea Per ogni codice dovrete modificare COLORE con quello che preferite

► Modifica il colore del titolo della chatbox
Codice:
.chatbox a.cattitle, .chatbox-title, .chatbox-title a.chat-title {
  color: COLORE !important;
}
Il !important è da lasciare alla fine della riga

► Modifica il colore dei link e le opzioni in alto a destra della chatbox
Codice:
.chatbox-options a, .chatbox-options li, .chatbox-options li a, .chatbox-options li label {
  color: COLORE;
}


► Modifica dei colori dei titoli nella parte della lista dei membri (connesso, assente)
Codice:
#chatbox_members .member-title {
  color: COLORE;
}


► Modifica dei colori dei messaggi verdi per la connessione di un membro
Codice:
.msg span[style="color:green"] strong {
  color: COLORE;
}


► Modificare dle colore dei messaggi rossi per la disconnessione di un membro
Codice:
.msg span[style="color:red"] strong {
  color: COLORE;
}


► Modifica del colore dei messaggi in /me:
Codice:
.msg span[style="color:undefined"] {
  color: COLORE;
}


► Modifica il colore di data/ora
Codice:
.date-and-time {
  color: COLORE;
}

Altre modifiche nella chatbox

► Non visualizzare data e ora dei messaggi
Codice:
.date-and-time {
  display: none;
}


► Modifica il colore del bordo nei messaggi (quando gli avatar nella chatbox sono attivi)
Codice:
#chatbox > p {
  border-color: COLORE !important;
}


► Nascondi i bordi nei messaggi (quando gli avatar nella chatbox sono attivi)
Codice:
#chatbox > p {
  border: none !important;
}

► phpBB3 : Nascondi gli spazi tra i messaggi
Codice:
#chatbox > p {
  margin: 0;
}


► Modifica le dimensioni degli avatar nella chatbox
Codice:
#chatbox .cb-avatar {
  width: auto !important;
  height: auto !important;
}
#chatbox .cb-avatar > img {
  width: auto !important;
  height: auto !important;
  max-width: 50px;  /*larghezza massima degli avatar nella chatbox*/
  max-height: 50px;  /*altezza massima degli avatar nella chatbox*/
}

Modificate i valori dell'altezza massima e della larghezza massima (qui 50px per entrambi) a vostra preferenza. Questo codice permette anche di evitare la deformazione delle immagini Wink


► Nascondi i colori di sfondo negli avatar
Codice:
#chatbox .cb-avatar {
  background: none !important;
}


► Modifica i bottoni della chatbox

I codici successivi permettono la modifica dei colori di fondi di bottoni e testo dei bottoni, e dei bordi degli stessi

Codice:
#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COLORE !important;
  color: COLORE !important;
  border: 1px solid COLORE;
}

Sostituite COLORE con il colore a vostra scelta
Les !important sont à laisser juste après les codes des couleurs.

Potete anche modificare/completare questo codice a vostro gusto, aggiungendo per esempio:
border-radius: 50%;
per avere dei bordi arrotondati, ottenendo quindi:

Codice:
#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COLORE !important;
  color: COLORE !important;
  border: 1px solid COLORE;
  border-radius: 50%;
}


► Modifica la larghezza della colonna dei membri
Codice:
#chatbox_members {
  width: 100px;  /*larghezza della colonna dei membri connessi alla chatbox*/
}
#chatbox {
  left: 101px;  /*stessa larghezza + 1px */
}

Modificate i valori (qui 100 e 101) come preferite :bene:


► Modifica dell'altezza della chatbox sull'indice
Codice:
#chatbox_top, #chatbox_bottom {
  height: 500px !important;
}

Modificate il valore (qui 500px) per l'altezza.
Il flag !important è da lasciare alla fine della riga




Altri tutorial per la tua chatbox
10 Codici per personalizzare la tua chatbox

avatar
Niko
Veterano dello staff


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