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.


    Empêcher les soucis des messages dans la Chatbox ForumActif

    Partagez
    Alzufen
    MasculinAge : 21Messages : 2102

    le Mer 27 Aoû 2014 - 16:20



    Bonjour, ou peut-être bonsoir si vous êtes du genre à aimer lire le soir Razz

    La Chatbox de ForumActif (pour ne pas dire ForumActif tout court) offre son lot de soucis, pas tous très contraignant parfois même de simple de détails, mais ils peuvent quand même en déranger certains. Il n'est pas rare de voir quelqu'un qui envoi un long "AHHHHHHH[...]" qui créer une scrollbar en bas de la chatbox et que ça fasse râler les autres, ou même simplement parfois en postant un lien trop long. Il y a aussi le soucis des pseudo avec des espaces (C'est courant sur les forums RPG car généralement un pseudo est composé du nom et prénom) qui se coupent en deux (donc sur deux lignes) quand le message posté est trop loin. Il existe des solutions grâce au CSS pour palier à ce soucis, il vous faut donc être admin dû forum pour les mettre en place, ses astuces prennent peu de places et n'auront aucunes influences ailleurs. En clair, les mettre en place pourrait éviter que les gens demandent des clears à tout vas lorsqu'un @ est connecté à la CB Wink

    Un long pavey d'introduction pour pas grand chose passons donc au premier soucis, celui des pseudo.

    Fais ce que je t'ordonne de faire.


    Le titre explique bien le principe du CSS que l'ont va utiliser ici, déjà pour savoir de quel soucis je parle, voici un exemple :

    [XX:XX:XX] Machin Chose: Bonsoir, je suis....
    [XX:XX:XX] Machin
    Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


    Evidemment, si vous testez mes paroles sur votre chatbox cela ne va pas peut-être pas crée le soucis étant donné que je n'ai pas testé et que ça dépendra de la largeur alloué à la CB., L'idée est cependant là et l'explication est fidèle à ce qui se passe parfois, c'est assez rare mais l'éviter tout court peut-être mieux non ? Ca arrivait souvent sur mon propre forum quand on se tapait des gros délires et parfois pour des trucs idiots, j'ai donc voulu palier à ce soucis et j'ai testé.

    Il vous faudra donc utiliser votre feuille de style CSS pour vous faire en sorte que le pseudo reste sur une seule ligne.

    Rappel
    Si vous ne savez pas, ou simplement pour vous rappelez, l'accès à la feuille de style CSS ce fait via le Panneau d'Administration, puis Affichage, Couleur et enfin Feuille de style CSS


    Une fois que vous vous êtes rendu dedans, il vous faudra ajouter (où que vous voulez) le code suivant :

    Code:
    #chatbox .user{white-space: nowrap;}

    Pourquoi sur une ligne ? J'estime que si on ajoute juste une propriété à quelque chose, une seule ligne suffit pour éviter de prendre 3 lignes de la feuille juste pour ça. A partir de ce moment-là, si vous utilisez juste ça, vous allez vous retrouver avec ça :

    [XX:XX:XX] Machin Chose: Bonsoir, je suis....
    [XX:XX:XX]
    Machin Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


    C'est déjà mieux, mais ce n'est toujours pas ce qu'on veut, alors comment régler le soucis maintenant ? Pour faire simple, il vous faudra aussi ajouter cette propriété à la date/l'heure, donc remplacer ce que je vous ai donné au dessus par :

    Code:
    #chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

    Normalement, avec ça vous devriez avoir :

    [XX:XX:XX] Machin Chose: Bonsoir, je suis....
    [XX:XX:XX] Machin Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


    A titre informatif
    "white-space: nowrap" permet de forcer le texte à rester sur une seule ligne, c'est une version simple de son utilité alors ne vous en servez pas pour rien, mais ça reste cependant très utile quand un texte ne veut pas rester sur une seule ligne sans savoir pourquoi.


    Stop ! Route barrée, accès interdit !


    Encore une fois, le titre illustre bien l'utilité du second code que je vais vous fournir. Cette fois-ci, il sert à faire en sorte que le texte ne dépasse pas la largeur qu'il lui est alloué, ce soucis a dû vous arrivez souvent, la petite barre de scroll (ou l'ascenseur) qui s'affiche en bas de la chatbox quand un membre écrit quelque chose de trop long ou envoi un lien trop long sans espace (ni tiret même si parfois ils ne changent rien). Généralement, votre solution est de vous dépêcher de clear ou de flooder pour faire disparaître cette vilaine barre énervante. Et si au lieu de faire ça, on faisait carrément en sorte qu'elle ne puisse pas exister ?

    C'est ce que je vais vous apprendre ici, le code css suivant permet de forcer le texte à retourner à la ligne quand il est censé dépasser de la largeur alloué et donc créer cette vilaine scrollbar.


    Retournez donc dans votre feuille de style CSS, si vous n'y êtes pas déjà est ajoutez ceci :

    Code:
    #chatbox .msg{word-wrap: break-word;}

    A titre informatif
    "word-wrap: break-word" permet de forcer le texte à retourner à la ligne s'il dépasse la largeur qui lui est alloué, comme expliqué plus haut. Evidemment, encore une fois c'est une version simplifié de la chose mais c'est fort utile pour la Chatbox où nous n'avons pas d'autres moyens de faire ça, du moins pas à ma connaissance.


    Il n'y a rien à voir ici, circulez !


    Cette astuce permet la même chose qu'au-dessus, cependant au lieu d'empêcher la barre d'exister en faisant en sorte que le texte retourne forcément à la ligne, on va plutôt masquer la barre. Le texte restera donc sur une seule ligne mais il sera masqué. Difficile d'expliquer, pour faire simple, imaginez-vous qu'au lieu que la scrollbar apparaisse, elle n'apparaisse pas, mais que quelqu'un a quand même posté un texte trop long. En clair, vous n'aurez aucun moyen d'aller voir la suite de se texte sans la scrollbar.

    Astuce
    .Garder le clic droit enfoncer pour sélectionner le texte et aller jusqu'au bout permettra de scroller même sans la scrollbar, ou encore avec les flèches directionnelles du clavier Wink.


    Comme précédemment, il vous faudra aller dans votre feuille de style CSS, cette fois-ci, au lieu d'ordonner au CSS d'influencer sur le conteneur des messages, on va lui demander d'influencer sur la partie qui concerne la chatbox, les messages, les pseudo, tout.

    Code:
    #chatbox{overflow-x: hidden;}

    A titre informatif
    "overflow-x: hidden" permet de faire comme si la scrollbar était là tout en la cachant, et ceux seulement pour celle horizontal (d'où le "X")


    Bon à savoir
    Dans le doute, si jamais ce que je vous ai donné de marche pas ou que vous n'êtes pas convaincu, ou même que vous voulez éviter des soucis, vous pouvez rajouter "!important" avant le point virgule à la fin de chaque propriété donc après "hidden" "word-break" et "nowrap"


    Voilà, c'est donc tout pour cette fois-ci, j'espère que cela vous sera utile. Sachez que mon passe temps est de m'amuser avec ce qui est théoriquement impossible de toucher sur ForumActif, alors n'hésitez pas à consulter d'autres Tutos Wink


    Dernière édition par Alzufen le Sam 30 Aoû 2014 - 22:25, édité 2 fois



    Okhmhaka
    FémininAge : 31Messages : 31708

    le Mer 27 Aoû 2014 - 16:35

    Je pense qu'il vaudrait mieux mettre ça dans la section codage, non ?

    En tout cas merci de donner l'astuce, ça pourra servir à tout ceux qui reçoivent des mini-Scav' sur leur forum xD.



    Alzufen
    MasculinAge : 21Messages : 2102

    le Mer 27 Aoû 2014 - 16:42

    Bah, le lien des Tutos et Astuces sur ForumActif redirige ici, alors je me suis demandé si je devais poster ici ou là-bas :hum: Etant donné que c'est une astuce propre à FA (Tout comme ma personnalisation de Chatbox d'ailleurs) ça a plus ça place dans les Tutos FA non ? ^^ Mais c'est vrai que, au moins en attendant, ça aurais plus eu sa place dans les propositions en codage :hum:

    Haha, des mini-Scav' pas mal, pas mal, et oui, je trouvais pas cette astuce nul part alors je me suis dit : Autant partager Razz



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Jeu 22 Jan 2015 - 23:10

    Et je classe! Merci pour le tuto Alzu! :hug:



    Rain'
    FémininAge : 16Messages : 14

    le Sam 5 Sep 2015 - 11:09

    Merci pour ce tuto Very Happy
    Cruelly
    FémininAge : 23Messages : 2411

    le Lun 21 Sep 2015 - 2:53

    Super tuto merci beaucoup je l'ai installer sur mon forum :)



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    Kaht
    MasculinAge : 26Messages : 13

    le Jeu 19 Nov 2015 - 13:46

    Nice !
    Toxinou
    FémininAge : 25Messages : 16

    le Dim 22 Mai 2016 - 16:05

    Merci :) !
    Asarigolo
    MasculinAge : 23Messages : 28

    le Sam 9 Juil 2016 - 22:00

    Merci pour le tuto !
    Contenu sponsorisé

    Aujourd'hui à 13:29


      La date/heure actuelle est Lun 5 Déc 2016 - 13:29