AccueilDernières imagesRechercherS'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.

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

    Comment personnaliser l'apparence de la chatbox

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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 !



    Aadelrun
    Aadelrun
    FémininAge : 24Messages : 79

    Ven 10 Nov 2017 - 21:07

    Merci ! Super pratique et complet ! :p



    Comment personnaliser l'apparence de la chatbox 1502999567-ghgh-gh
    Silver Angel
    Silver Angel
    MasculinAge : 108Messages : 170

    Mer 22 Nov 2017 - 11:02

    Merci beaucoup pour cette synthèse :)



    Rejoignez-nous !


    Forum avec trois contextes pour un même lieu :
    Le Far West de 1850, le présent en 2022 et un postapocalyptique en 2030.
    Et il n'y a pas besoin de choisir, on peut jouer dans les trois Wink
    .Lucifer.
    .Lucifer.
    MasculinAge : 50Messages : 184

    Lun 15 Jan 2018 - 14:02

    Merci beaucoup pour ce tutoriel très utile ! Wink



    Comment personnaliser l'apparence de la chatbox 978358Divine
    Lazulijune
    Lazulijune
    FémininAge : 25Messages : 14

    Mar 1 Mai 2018 - 14:36

    Merci beaucoup pour ce super tutoriel !
    Dixy
    Dixy
    FémininAge : 30Messages : 234

    Mar 1 Mai 2018 - 23:14

    Merci super tuto simple à comprendre et très sympa, il sera sans aucun doute très utile Wink



    Comment personnaliser l'apparence de la chatbox ?c=isi&im=%2F8762%2F84558762%2Fpics%2F3210667051_1_13_DkYrqtSL
    Toxinou
    Toxinou
    FémininAge : 32Messages : 41

    Jeu 16 Aoû 2018 - 19:04

    Merci beaucoup, c'est super complet et très clair !
    Ely Kyuh
    Ely Kyuh
    FémininAge : 30Messages : 33

    Jeu 13 Sep 2018 - 21:23

    C'est très précis, merci beaucoup =)
    ThunderTB
    ThunderTB
    MasculinAge : 40Messages : 15

    Mer 12 Juin 2019 - 18:58

    Réponse => +1 PeaNUt's

    Je veux ma peanut Razz

    P.s. Un gros merci pour les codes .
    maaelstrom
    maaelstrom
    FémininAge : 31Messages : 72

    Mer 11 Sep 2019 - 10:02

    Merci du partage :heart:





    you get so alone at the times that it just makes sense.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 18:58