Comment personnaliser l'apparence de la chatbox
Bonjour !
Nous avions précédemment une tonne de petits tutoriels qui donnaient des trucs sur la chatbox et qui, très souvent, se répétaient. Du coup, ce tutoriel a été fait pour but d'être plus complet et de rassembler en un endroit la majorité astuces.
Je vous réfère quand même à plusieurs astuces intéressantes :
- Styliser les messages de connexion / déconnexion (CSS)
- Empêcher les soucis des messages dans la Chatbox ForumActif
Tout les codes donnés ci-bas se mettent dans la feuille de style CSS.
Le bloc de la chatbox
Voilà le bloc qui contient toute la chatbox :
- Code:
/*Contient toute la CB*/
body.chatbox {
}
En-tête de la chatbox
Voilà l'en-tête de la chat-box :
- Code:
/*Barre de titre*/
#chatbox_header .catBottom {
border: none; /*Enlève la bordure*/
background-image: none; /*Enlève image de fond*/
background-color: transparent; /*Enlève couleur de fond*/
height: 30px;
}
/*Titre normal */
#chatbox_header .catBottom .cattitle {
}
/*Titre normal au survol*/
#chatbox_header .catBottom .cattitle:hover {
}
/*Liens de droite de la barre de titre*/
#chatbox_header .catBottom .chatbox-options a {
}
/*Liens de droite de la barre de titre au survol*/
#chatbox_header .catBottom .chatbox-options a:hover {
}
Pour remplacer le texte dans l'en-tête de la chatbox :
- Code:
/*Pour cacher le titre normal*/
#chatbox_header .cattitle strong {
font-size: 0px;
}
/*Titre Personnalisé*/
#chatbox_header .cattitle:before {
content: "NOM"; /* Modifiez NOM par le titre que vous désirez */
font-size: 12px;
}
/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
font-size: 0;
}
/*Lien pour accéder aux archives Personnalisé*/
#chatbox_option_with_archives a:before {
content: "HISTORIQUE"; /* Modifiez HISTORIQUE par ce que vous désirez */
font-size: 12px;
}
/*Pour cacher le lien pour sortir des archives normal*/
#chatbox_option_without_archives a {
font-size: 0px;
}
/*Lien pour sortir des archives Personnalisé*/
#chatbox_option_without_archives a:before {
content: "QUITTER HISTORIQUE"; /* Modifiez QUITTER HISTORIQUE par ce que vous désirez */
font-size: 12px;
}
/*Pour cacher le lien de la connexion*/
#chatbox_option_co strong {
font-size: 0px;
}
/*Lien de la connexion Personnalisé*/
#chatbox_option_co strong:before {
content: "ENTRER SUR LA CB"; /* Modifiez ENTRER SUR LA CB par ce que vous désirez */
font-size: 12px;
}
/*Pour cacher le lien de la déconnexion*/
#chatbox_option_disco {
font-size: 0px;
}
/*Lien de la déconnexion Personnalisé*/
#chatbox_option_disco:before {
content: "QUITTER LA CB"; /* Modifiez QUITTER LA CB par ce que vous désirez */
font-size: 12px;
}
La liste des membres de la chatbox
Voilà la liste des membres de la chat-box :
- Code:
/*Bloc de la liste des membres*/
#chatbox_members {
background-color: transparent; /*Enlève couleur de fond*/
border-right: 1px solid #000; /*Bordure entre la liste des membres et les messages*/
}
/*Ligne de titre des membres en ligne*/
#chatbox_members .online {
}
/*Liste qui contient les membres en ligne*/
#chatbox_members .online-users {
}
/*Ligne du nom du membre en ligne*/
#chatbox_members .online-users li {
}
/*Ligne de titre des membres absents*/
#chatbox_members .away {
}
/*Liste qui contient les membres absents*/
#chatbox_members .away-users {
}
/*Ligne du nom du membre absent*/
#chatbox_members .away-users li {
}
/* Menu au clic droit des pseudos */
#chatbox_contextmenu {
}
Pour remplacer le texte de "En ligne" et de "Absents" dans la liste des membres
- Code:
/*Pour cacher le titre des membres en ligne*/
#chatbox_members .online {
font-size: 0px;
}
/*Titre des membres en ligne personnalisé*/
#chatbox_members .online:before {
content: "MEMBRES ACTIFS"; /* Modifiez MEMBRES ACTIFS par ce que vous désirez */
font-size: 12px;
color: green; /*Couleur de la police*/
}
/*Pour cacher le titre des membres absents*/
#chatbox_members .away {
font-size: 0px;
}
/*Titre des membres absents personnalisé*/
#chatbox_members .away:before {
content: "PROIES DE TIMMY"; /* Modifiez PROIES DE TIMMY par ce que vous désirez */
font-size: 12px;
color: darkred; /*Couleur de la police*/
}
L'intérieur de la chatbox où il y a les messages
Voilà l'intérieur où il y a les messages :
- Code:
/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
}
/*Lignes des message impairs*/
#chatbox .chatbox_row_1 {
margin: 0px;
}
/*Lignes de messages pairs*/
#chatbox .chatbox_row_2 {
margin: 0px;
}
/*Empêcher le bug des textes trop longs*/
#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}
/* Mise en forme de la date */
#chatbox .date-and-time {
}
/*Bloc du pseudo du membre incluant le @ des modos et admins*/
#chatbox .user {
}
/*Pseudo du membre*/
#chatbox .chatbox-message-username {
}
/*Le message du membre*/
#chatbox .msg {
}
Les avatars de la chatbox :
- Code:
/*Bloc avatar du membre*/
#chatbox .cb-avatar {
padding: 1px!important; /*Padding*/
border: 1px solid #d5d5d5!important; /*Bordure*/
width:30px!important; /*Largeur*/
height:30px!important; /*Hauteur*/
overflow:hidden; /*Cache ce qui dépasse*/
box-shadow: 0 2px 2px rgba(0,0,0,0.1)!important; /*Ombre du bloc*/
transform: translateZ(0); /* empeche bug Chrome */
}
/*Avatar du membre*/
#chatbox .cb-avatar > img {
width:30px!important;
height:30px!important;
}
Barre de bas du forum
Voilà la barre du bas du forum :
- Code:
/*Pour arranger la hauteur de la barre du bas*/
#chatbox_footer {
height: 29px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
border: none; /*Enlève la bordure*/
background-image: none; /*Enlève image de fond*/
background-color: transparent; /*Enlève couleur de fond*/
height: 29px;
}
/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
}
/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
background-color: pink;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
}
/*Texte avant le message*/
#chatbox_footer label[for="message"] {
}
/*Champ texte pour le message*/
#chatbox_footer #message {
}
/*Bouton pour envoyer le message*/
#chatbox_footer #submit_button {
}
C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".
À plus !
