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.


    Chatbox personnalisée #1 par Cheshire Cat

    Partagez
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Mer 6 Juil 2016 - 1:18


    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


    Coucou !
    Me re-voici donc pour un nouveau dépôt de LS, une chatbox personnalisée et personnalisable :3

    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.


    Avec avatar:


    Sans avatar:

    Pour choisir si votre chatbox affiche les avatars des membres ou non, il faut faire Panneau d'administration > Modules > Chatbox > Configuration > Afficher les avatars des utilisateurs dans la chatbox

    Version sans les avatars des membres

    Code:
    /* CHATBOX PERSONNALISEE */
    .chatbox{
      border:none;
    }

    /* Couleur du texte par défaut (contextmenu / message + heure + liste des membres sans groupe) */
    #chatbox, #chatbox_contextmenu, #chatbox_contextmenu a, #chatbox_members {
      color: #000!important;
    }

    /* Enlever image de fond par défaut */
    .chatbox .catBottom { background: transparent; }
    #chatbox_header{
      background:#b7a89f;
    }
    #chatbox_header strong{
      margin-left:10px;
      text-transform:uppercase;
    }
    #chatbox_header a{
      color: #FFF;
    }

    /* Liste des membres à droite */
    #chatbox_members{
      width:181px;
      background:#e5d9d3;
      margin-bottom:-10px;
      border:none;
    }
    #chatbox_members .member-title{
      color:#FFF;
      padding:3px;
      margin-top:10px;
      margin-bottom:5px;
    }

    /* Menu au clic droit du pseudo à droite */
    #chatbox_contextmenu{
      background:#FFF;
      font-size:15px;
    }
    /* Titre de la liste des membres (En ligne) */
    #chatbox_members .online{ background:#80aa3e; }

    /* Titre de la liste des membres (Hors ligne) */
    #chatbox_members .away{ background:#a03a2e; }
    /* Partie centrale de la chatbox */
    #chatbox{
      background:#FFF;
      margin-bottom:-10px;
    }
    /* Fond des messages differents */
    .chatbox_row_2{ background:#f4ece8!important; }
    .chatbox_row_1{ background:transparent!important; }

    #chatbox > p{
      margin:0; /* phpbb3 => enlever les marges par défaut */
      border:none!important;
    }

    /* Barre inférieure de la chatbox */
    #chatbox_footer{
      background:#b7a89f;
      padding-bottom:4px;
    }

    /* Zone d'écriture du message de la chatbox */
    .chatbox input{ border:1px solid #6f6660!important; }
    #chatbox_footer #submit_button{
      padding-right:2px;
    }


    Version avec les avatars des membres
    Il faut tout bêtement rajouter ce bout de code :)

    Code:
    /* Mise en forme de l'avatar du membre */
    #chatbox .cb-avatar {
      padding:0!important;
      width:50px!important;
      height:50px!important;
      border-radius:50px!important;
      overflow:hidden!important;
      box-shadow: none!important;
      transform: translateZ(0); /* empeche bug Chrome */
    }
    #chatbox .cb-avatar > img {
      position:relative!important;
      top: -10px;
      width:50px!important;
      height:auto!important;
    }

    /* Mise en forme de la date */
    #chatbox .date-and-time {
      display:inline-block;
      float:none!important;
      margin-left:2px!important;
      margin-top:2px!important;
      margin-bottom:3px!important;
      font-size:12px;
    }

    /* Mise en forme du pseudo du membre ayant poste */
    #chatbox .user { float:left!important; }
    #chatbox .user strong {font-size: 0;}
    .chatbox-username.chatbox-message-username { font-size: 12px; }


    Dernière édition par Cheshire Cat le Lun 5 Déc 2016 - 19:36, édité 21 fois
    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Mer 6 Juil 2016 - 22:58

    Coucou o/

    Elle est jolie comme tout cette CB :aww:

    @Cheshire Cat a écrit:Si vous rencontrez des problèmes n'hésitez pas à m'en faire part ici ou bien par MP ^^
    Il me semble qu'on a pas le droit de préciser cela pour les MP ♥︎ (source)

    J'ai une petite suggestion, j'ai remarqué que les 2 codes "Version avec avatar" et "Version sans avatar" sont très similaires (il y a juste quelques lignes de différence).
    Est ce que cela ne vaudrait pas le coup de poster le CSS pour la version sans avatar (le plus long) et ensuite rajouter juste en dessous le rajout à mettre si c'est la version avec avatar ?

    Pourquoi je dis ça ?
    Déjà, si il y a une modification à faire dans le LS un jour, on a besoin de la faire qu'à un seul endroit (vive la flemme :toto:) et surtout, je me dis que si quelqu'un personne sa CB puis veut changer de version (avec ou sans avatar), il sera peut-être un peu embêté ?  :hum:
    Ou bien ptet que je me prends trop la tête XDDD

    J'ai testé le code sur un forum en phpbb2, et j'ai un petit soucis avec le header Wink
    Comme j'ai une image de titre dans le panneau d'admin, elle apparait en haut de la CB (header) et dans le footer Sad
    C'est un petit truc de rien du tout :
    Code:
    /* Enlever image de fond par défaut */
    .chatbox .catBottom { background: transparent; }

    J'ai eu un soucis avec les avatars à un moment, mais il a disparu d'un coup, j'attendrai qu'il se remanifeste pour prendre une screen éè

    D'ailleurs, c'est normal que tes screens ne soient pas les mêmes pour la version avatar ? (je pense à la seconde screen dans "Avec avatar" dont le rendu n'est pas le même qu'avec le code)

    Voilà voilà, j'ai pas encore vraiment regardé le code, simplement essayé sur mon fow test o/ (et elle rend vraiment bien :lovebomb: )

    Merci du partage :hug:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Jeu 7 Juil 2016 - 0:13

    Coucou Nihil :3

    Déjà j'ai modifié pour le début du message, j'ai mis le truc habituel. Là j'avais la flemme donc bon j'ai oublié XD

    Du coup oui c'est mieux je pense, je vais faire ça du coup :)

    Et merci pour le truc de l'header, comme ça y'aura moins de bugs ! Very Happy

    Oui c'est normal, mon screen a le sida du cancer parce que j'ai fait je sais plus quelle manip et du coup bah voilà '-'
    Je referai le screen.

    J'attends pour les avatars du coup et je modifie le reste en attendant :)

    Merci pour les compliments au passage !

    EDIT: J'ai rajouté un truc pour le clic droit sur le pseudo qui te donne un menu avec les actions que tu peux faire, par exemple envoyer un MP ou voir le profil :)
    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Jeu 14 Juil 2016 - 10:42

    Super :joie:

    Pour le clic droit, oui, j'avais déjà vu huhu <3. D'ailleurs, je pense que tu pourrais faire un LS juste pour ça en plus si tu veux :3 (comment personnaliser cette zone là)
    Au fait, ce bout de code est présent 2 fois :
    Code:
    #chatbox_contextmenu{
      background:#FFF;
      font-size:15px;
    }




    Si tu refais une screen, je me dis que ça peut être sympa d'avoir sur la screen un message de connexion, et un message en /me (pour voir comment se place les éléments). Pense à préciser aussi dans les infos que le @ des modérateurs est enlevé dans les messages pour le CSS "avec avatar" :)
    Sinon on va se retrouver avec des gens paniqués. Ou ptet pas.  :panic:




    J'ai vu qu'ici tu modifiais la couleur de "chatbox_row_2", je pense qu'il faudrait changer aussi celle de "chatbox_row_1" (car c'est la même que celle définie dans le panneau d'admin pour "Table Rangée Couleur 1" sinon >-<)
    Code:
    .chatbox_row_2{ background:#f4ece8!important; }




    Attention à cette ligne là :
    Code:
    #text_editor_iframe, input, select, textarea{ border:1px solid #6f6660!important; }
    Comme ça sera ajouté dans le CSS de tout le forum... Ca va s'appliquer paaaartout :han:




    Ici il manque un petit truc au padding, non ? Tu peux supprimer la ligne je pense, car elle n'est pas prise en compte par le navigateur vu qu'elle est non valide :)
    Code:
    #chatbox_members .member-title{
      color:#FFF;
      padding:3;
      margin-top:10px;
      margin-bottom:5px;
    }




    Concernant les avatars, le problème se manifeste quand je regarde les archives. Les images sortent du cadre : (phpbb2 / Chrome)

    Je pense que c'est un soucis lié à Chrome, un petit tricks qui marche souvent, c'est d'ajouter au CSS de #chatbox .cb-avatar cette petite ligne :
    Code:
    transform: translateZ(0); /* empeche bug Chrome */




    Sinon, ça marche impec chez moi (en phpbb2, j'ai fait un tour sur Chrome, Firefox et Safari) :3

    Ce qui suit, ce sont des conseils, tu en fais ce que tu veux, en appliquer une partie, faire du feu de bois, danser à la pleine lune autour, ne pas le lire :siffle:
    Spoiler:
    Tu changes la couleur de fond de la CB et la couleur de fond du menu de contexte en blanc. Un truc cool serait de changer aussi la couleur du texte. Pourquoi ? Par ce que si sur ce forum, les liens sont en blancs ou la couleur du texte par défaut est blanche / très claire... On verra plus rien xD
    Du coup par sécurité, je pense que j'ajouterais ceci (j'ai mis une couleur au hasard, mais tu en trouveras sûrement une mieux :face:) :
    Code:
    /* Couleur du texte par défaut (contextmenu / message + heure + liste des membres sans groupe) */
    #chatbox, #chatbox_contextmenu, #chatbox_contextmenu a, #chatbox_members {
      color: #ff17c9!important;
    }
    D'ailleurs je dis ça, mais FA le fait pas et y a des endroits du thème par défaut où mettre un texte de couleur blanche... ça cause des soucis Rolling Eyes


    Code:
    #chatbox_header a{
      color: #FFF;
      transition:all linear 0.3s;
    }
    A quoi sert la transition ? En effet, dans le code j'ai l'impression qu'il n'y a pas de couleur au survol prévue :hum:



    Etalage de science, tu n'es pas obligée de mettre border-radius:100%;, 50% suffit pour faire un rond. Si le navigateur voit 100%, comme ça sert à rien il va mettre lui même à 50%.  L'INFO DU SIÈCLE. *oké je sors*

    Bonne journée <3
    J'ai dis plein de petits trucs, mais c'est vraiment pas pour t'embêter (Ne me déteste pas et ne pars pas), plus pour essayer de penser aux problèmes qu'on pourra avoir ensuite :love:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Jeu 14 Juil 2016 - 16:44

    Coucou :3

    Déjà pour le premier bout de code en double, il est supprimé. Sinon je sais pas si j'en ferai un nouveau LS ou pas. J'avoue j'ai la flemme '-'

    Le screen pour les /me:

    Pour .chatbow_row_1, j'ai mis un fond transparent. Comme ça les gens pourront modifier à leur guise.

    Pour la ligne avec input, select, textarea, c'est fait. Et j'ai rajouté le px pour le #chatbox_members

    Également pour les avatars des archives, c'est corrigé pour Chrome, j'ai même regardé.

    Sinon pour les conseils, merci je vais modifier ça ^^

    Pour le border-radius, j'avoue j'avais pas fais gaffe en codant °° D'habitude je mets 50%.

    Et t'inquiètes pour m'embêter, ça me dérange pas le moins du monde xD
    Au contraire, depuis que je te vois le faire avec les autres personnes et moi, j'ai pris l'habitude de faire la même chose :face:
    Donc temps mieux.
    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Dim 17 Juil 2016 - 11:11

    Hello <3

    A la base j'allais tester sur toutes les autres version de forum et t'indiquer pour chacun le soucis (+ ptet la correction), mais je me dis que c'est peut-être une perte de temps.

    En effet, les LS d'élément de forum indiquent le plus souvent la version de forum pour laquelle ils sont faits.

    Certaines personnes prennent le temps de faire un code pour chaque version, mais ça dépend si tu as envie de passer du temps dessus ou non.

    Du coup, avant de tester sur les autres versions, je voudrais savoir si ce LS est juste pour phpbb2 ou les autres versions aussi ?

    Ce que je vois qu'il reste
    1 - éditer le premier message pour mettre la bonne screen

    2 - Hahaha, j'avais mis une couleur pour rigoler dans mon précédent message, je pensais que tu verrais
    Code:
    /* Couleur du texte par défaut (contextmenu / message + heure + liste des membres sans groupe) */
    #chatbox, #chatbox_contextmenu, #chatbox_contextmenu a, #chatbox_members {
      color: #ff17c9!important;
    }

    La couleur ff17c9 c'est du rose :face:
    Il faudrait mettre une autre couleur, je crois que sur tes screens c'est une nuance de gris très foncé  :toto:

    3 - Est ce que tu as le courage de commenter un peu chaque partie avant ou pas ?

    Par exemple :
    Code:
    /* Liste des membres */
    #chatbox_members{
      width:181px;
      background:#e5d9d3;
      margin-bottom:-10px;
      border:none;
    }

    /* Liste des membres : titre */
    #chatbox_members .member-title{
      color:#FFF;
      padding:3px;
      margin-top:10px;
      margin-bottom:5px;
    }

    /* titre liste des membres (EN LIGNE) */
    #chatbox_members .online{ background:#80aa3e; }

    /* titre liste des membres (ABSENTS) */
    #chatbox_members .away{ background:#a03a2e; }

    C'est pas obligatoire mais ça permet quand même de rendre le LS plus lisible :hum:
    Après c'est une question de courage, on peut aussi se dire parfois que certains noms de classe / id sont vraiment clairs xD

    4 - Petite erreur d'étourderie, il manque le 1 je pense :
    Code:
    .chatbox_row_{ background:transparent!important; }

    5 - En fait en fouillant, je pense que ça venait d'un style pour le reste du fow ceci :
    Code:
    #text_editor_iframe, #text_editor_iframe input, #text_editor_iframe select, #text_editor_iframe textarea{ border:1px solid #6f6660!important; }

    Du coup tu peux te contenter de ça :
    Code:
    /* Champ pour écrire le message */
    .chatbox input { border:1px solid #6f6660!important; }

    6 - Sur phphbb3 j'ai vu qu'il y a des marges sur les p de la CB :hum:
    Code:
    #chatbox > p { border:none!important; }

    Peut devenir :
    Code:
    #chatbox > p {
      margin: 0; /* phpbb3 => enlever les marges par défaut */
      border:none!important;
    }

    7 - Enfin, une petite question :han:

    Ici :
    Code:
    #chatbox{
      background:#FFF;
      margin-bottom:-10px;
    }

    Tu as mis le margin-bottom pour annuler l'espace vide qu'il y avait en bas c'est ça ?

    C'est cool n'empêche, en testant ce LS j'découvre des trucs sur la CB de forumactif :joie:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Dim 17 Juil 2016 - 14:01

    Coucou toi :3
    Du coup j'ai tout modifié, j'ai juste pas trop compris pour "changer pour le bon screen". Je mets celui avec les /me et tout ? Mais dans ce cas j'vais devoir faire un autre screen vu que c'est pas les couleurs que je donne XD

    Sinon pour ta question, oui c'est pour cela. Par contre après ça cache un p'tit peu le bas de l'overflow. C'est pas très grave mais bon.

    J'ai bien commenté le CSS également et puis j'ai optimisé la partie sans avatars en enlevant la partie de la mise en forme des avatars du posteur.

    Du coup je veux bien tester sous Invision comme tu as déjà dû regarder sous PHPBB3 et moi PHPBB2. J'aimerai que le LS soit accessible à tous :)

    EDIT: Je rencontre un bug actuellement. Chez moi l'avatar n'est plus arrondi du tout °°
    avatar
    Onyx
    FémininAge : 25Messages : 3139

    le Dim 16 Oct 2016 - 1:53

    Salut!

    Je viens aux nouvelles, quel est l'état de ce LS? (Merci d'éditer pour mettre la bonne icône) Wink

    En cours (pas terminé, à corriger, etc.)

    En pause (pas terminé et l'auteur a d'autres obligations)

    Terminé (complété, en attente de validation d'un responsable)

    Abandonné (ou refusé pour une raison quelconque)



    avatar
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Lun 5 Déc 2016 - 19:36

    Bah en fait j'attends qu'on me réponde donc bon :x
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Ven 17 Fév 2017 - 20:33

    Up
    Du coup je ne sais pas si c'est validé ou non au final :)
    avatar
    Invité

    le Sam 18 Fév 2017 - 16:23

    Salut @Cheshire_Cat ! (Et zut le système de tag qui t'aime pas T_T)

    J'ai regardé ton LS et j'ai vu ton échange avec Nihil et les modifications que tu as apporté. Je n'ai rien à ajouter, pour moi ton code est bien :)

    Merci donc pour ce LS qui s'ajoute aux autres LS de CB qui sont plutôt appréciés des membres ♥

    Je valide et je déplace donc :)
    avatar
    Kelalin
    FémininAge : 26Messages : 1979

    le Dim 19 Fév 2017 - 0:33

    Merci pour le partage !
    avatar
    Suzanne Ady
    FémininAge : 24Messages : 75

    le Lun 27 Mar 2017 - 11:16

    merci beaucoup !
    avatar
    Onyx
    FémininAge : 25Messages : 3139

    le Mar 11 Avr 2017 - 18:14

    Bouh!

    J'ai corrigé le bug avec les avatars non-arrondi, cela devrait maintenant être tout ok ^^



    avatar
    Kokoro Korou
    MasculinAge : 22Messages : 70

    le Jeu 1 Juin 2017 - 15:57

    Merci pour ces codes !! Very Happy
    avatar
    Yuki Kaga
    FémininAge : 18Messages : 265

    le Mar 18 Juil 2017 - 10:42

    Les couleurs sont tellement mignonnes ! Merci <3
    avatar
    Ewillia
    FémininAge : 26Messages : 13

    le Mer 26 Juil 2017 - 16:08

    Merci à toi, c'est vraiment très beau ^^
    avatar
    Leno
    FémininAge : 20Messages : 11

    le Dim 20 Mai 2018 - 13:07

    Merci bien !

    C'est original avec les avatars :3
    avatar
    Kikton
    MasculinAge : 22Messages : 29

    le Sam 10 Nov 2018 - 17:42

    Merci pour le partage !
    avatar
    Hassam
    MasculinAge : 20Messages : 24

    le Dim 2 Déc 2018 - 12:22

    Merci beaucoup !
    avatar
    lutecia
    FémininAge : 24Messages : 13

    le Jeu 6 Déc 2018 - 3:40

    danke ♥♥♥
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Déc 2018 - 6:00