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


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

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



Personalizzazione della chatbox Tutori10 Altri tutorial per la tua 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.