Empêcher les soucis des messages dans la Chatbox ForumActif

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

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

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



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 :



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.



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 :



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 :







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;}

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.



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;}

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

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.

Bah, le lien des Tutos et Astuces sur ForumActif redirige ici, alors je me suis demandé si je devais poster ici ou là-bas 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

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

Et je classe! Merci pour le tuto Alzu!

Merci pour ce tuto

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

Nice !

Merci :) !

Merci pour le tuto !

merci :x