Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Personalizzazione della chatbox

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Widget e Moduli personalizzati


Astuzia Personalizzazione della chatbox

Messaggio Da Niko Ven 12 Giu 2015 - 12:15

Personalizzazione della chatbox


chatbox - Personalizzazione della chatbox Images10 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 chatbox - Personalizzazione della chatbox Arrow10 Visualizzazione chatbox - Personalizzazione della chatbox Arrow10 Colori chatbox - Personalizzazione della chatbox Arrow10 "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:

chatbox - Personalizzazione della chatbox Dxg9

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



chatbox - Personalizzazione della chatbox Tutori10 Altri tutorial per la tua chatbox
chatbox - Personalizzazione della chatbox Astuce10 10 Codici per personalizzare la tua chatbox


Tutorial creato da MlleAlys del forum di supporto francese
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 28
Messaggi : 9573
Località : Provincia di Varese

https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

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

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Widget e Moduli personalizzati

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