AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-30%
Le deal à ne pas rater :
JBL LIVE 300TWS – Écouteurs intra-auriculaires sans fil
105 € 149 €
Voir le deal

    Chatbox personnalisée kaki

    Anonymous
    Invité

    Mer 1 Mar 2017 - 23:32


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    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).



    J'ai réalisé cette CB en ayant enlevé toutes les couleurs et images de base se trouvant dans le panneau d'administration dans l'onglet Affichage > Images & couleurs


    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 ♥

    Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5237

    Sam 11 Mar 2017 - 14:30

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

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

    Kelalin
    Kelalin
    FémininAge : 28Messages : 2433

    Sam 11 Mar 2017 - 14:51

    Merci pour le partage !
    Destan
    Destan
    MasculinAge : 42Messages : 37

    Lun 31 Juil 2017 - 9:57

    Merci
    Kitket
    Kitket
    FémininAge : 37Messages : 106

    Dim 26 Mai 2019 - 14:31

    Merci
    avatar
    Sanguin
    MasculinAge : 36Messages : 28

    Mer 25 Sep 2019 - 2:35

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Ven 16 Avr 2021 - 4:02