AccueilFAQRechercherMembresGroupesS'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.


    Comment personnaliser l'apparence de la chatbox

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 3032

    le Mar 11 Avr 2017 - 22:06



    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 !




      La date/heure actuelle est Lun 23 Oct 2017 - 11:45