Chatbox personnalisée kaki

Suite à une commande de Lone wanderer, j'ai réalisé cette personnalisation de CB. Elle a été réalisé pour un forum avec une ambiance de guerre (Fallout).





Pour ce LS vous n'aurez besoin de modifier que du CSS, pour cela il vous faut des droits d'administration. Allez dans votre Panneau de configuration puis Affichage > Images & Couleurs > Couleurs > Feuille de style CSS

Ensuite il vous suffit de coller le code ci-dessous :

Code:

/***** CB KAKI *****/

/* Intégration de la font Six Caps via font-face */
@font-face {
  font-family: 'Six Caps';
  font-style: normal;
  font-weight: 400;
  src: local('SixCaps'), url(https://fonts.gstatic.com/s/sixcaps/v7/kHNZYYf63qmp8C-aw9f9pvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* Conteneur de la CB */
#frame_chatbox {
  width: 858px !important;
  border: solid 3px #3d3a24 !important;
}

/* Pour masquer le fond blanc quand on est déconnecté */
body.chatbox {
  background: #767352 !important;
}

/* Code liant plusieurs blocs de la CB */
#chatbox_header, #chatbox_footer {
  background: #767352;
}

/* Titre de la CB */
#chatbox_header {
  height: 71px !important;
}
#chatbox_header .cattitle {
  text-align: center;
  font-size: 50px;
  font-family: "Six Caps", sans-serif !important;
  text-shadow:  1px 1px 2px #554c32;
  color: #000;
  text-decoration: none !important;
}

#chatbox_header .cattitle:hover {
  text-decoration: none !important;
}
#chatbox_header .catBottom {
  border: none !important;
}
#chatbox_header .catBottom table {
  border-bottom: 1px solid #3d3a24;
}

#chatbox_header .catBottom table tbody tr td:first-child {
  height: 50px;
  width: 100%;
  text-align: center;
  padding-left: 160px;
}

/* Lien Connexion/Déconnexion */
#chatbox_main_options a, #chatbox_main_options a:visited {
  color: black !important;
  text-decoration: none;
}

/* Contenu de la chatbox */
#chatbox_members, #chatbox {
  top: 71px !important;
  bottom: 55px;
  background: #a8a287;
  border-top: solid 15px #767352;
}

/* Liste des membres */
#chatbox_members {
  border-left: solid 15px #767352;
  border-right: solid 1px #3d3a24;
}

/* Zone des messages postés */
#chatbox {
  border-right: solid 15px #767352;
  margin-left: 15px;
}

/* Bas de la chatbox */
#chatbox_footer {
  height: 40px !important;
  border: none;
  background: #a8a287;
  border-left: solid 15px #767352;
  border-right: solid 15px #767352;
  border-bottom: solid 15px #767352;
}

#chatbox_messenger {
  margin-top: 10px;
}
#chatbox_footer .catBottom {
  border: none !important;
}

/* Champ texte */
#message {
  border-radius 3px;
  border: none;
  background: #767352;
}

/* Boutons */
#help-button, #divcolor, #divsmilies, #submit_button, .format-message + label {
  background: #767352 !important;
  border: 1px solid #3d3a24 !important;
}

#submit_button {
  padding: 0;
}

/* Forcer la couleur du texte de la CB */
div#chatbox, div#chatbox p span.user-msg span.msg span {
    color: black !important;
}

Validez le CSS et vous avez une nouvelle CB !

Merci pour avoir lu ce LS, j'espère qu'il vous servira ♥

Effectivement, il faut bien penser à enlever les couleurs et images :p

Merci pour ton partage Shane, j'vais déplacer et ajouter à l'index !

Merci pour le partage !

Merci

Merci

Merci pour le partage !