Astuce du mardi : afficher les messages sous forme de bulles

[Threax]

Afficher les messages sous forme de bulles

Ce dont vous avez besoin Pour modifiez les templates, vous devez : o Être en version phpBB2 o Être fondateur du forum Il est conseillé également de maîtriser un minimum les templates. Ensuite, vous avez besoin d'une image-flèche qui fera le lien entre l'avatar et le message du membre et qu'il vous faudra héberger. Exemple : Repérez bien les dimensions de votre image, vous en aurez besoin ensuite : ici, 20x20. Attention à ne pas prendre une image de plus de 25 à 30px de hauteur Si votre image est trop grande, la bulle risque d'être plus petite si le message est court et le décalage en haut, rique d'être trop grand pour réussir cet effet. Changements dans le template : Panneau d'administration Affichage Templates Général Editez () le template viewtopic_body Repérez dans le template cet extrait : Code:     <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">         <table width="100%" border="0" cellspacing="0" cellpadding="0">             <tr>               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> C'est ici que nous allons placer une <div> avec une class où se trouvera notre image : Code: <div class="fleche"> </div> Attention à bien laisser l'espace Mais aussi la class qui transformera le message en bulle : Remplacez-le par : Code:     <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"><div class="fleche"> </div>         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bulle">             <tr>               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> Créer la bulle grâce au CSS : Panneau d'administration Affichage Gestion des couleurs Onglet "Feuille de style CSS" Ajoutez le code suivant : Code:     .fleche {     background-image : url("adresse de votre image");     width: 20px;     height :20px;     position : relative;     top :50px;     left :-19px;  } Explications : background-image : url("adresse de votre image"); : c'est l'image de votre flèche width: 20px; : c'est la largeur de votre image height :20px; : c'est la hauteur de votre image position : relative; : permet de changer la position de votre image top :50px; : à régler si besoin, il s'agit du décalage à partir du haut de votre image pour la mettre à celui prévu left :-19px; : idem, mais en largeur. Calculez le facilement : largeur de l'image - 1 pixel Puis ajoutez le code suivant : Code:     .bulle{     background-color : #FFCC00;     border : 1px solid #FF9900;     -moz-border-radius: 20px ;     -webkit-border-radius:20px;     -border-radius:20px;     -khtml-border-radius:20px;     padding : 5px;     } Explications : background-color : #FFCC00; : couleur du fond de la bulle border : 1px solid #FF9900; : couleur de la bordure de la bulle -moz-border-radius: 20px ; -webkit-border-radius:20px; -border-radius:20px; -khtml-border-radius:20px; : création des arrondis selon les navigateurs padding : 5px; : espace interne pour éviter que le texte et les images dépassent sur les bordures de la bulle Astuce en plus Si vos messages sont courts, un décalage peut apparaître. Vous pouvez donc choisir de mettre une hauteur minimum à votre bulle en rajoutant dans le code CSS de .bulle : min-height : 100px; Ce qui s'intégrerait de cette manière : Code:     .bulle{     background-color : #FFCC00;     border : 1px solid #FF9900;     -moz-border-radius: 20px ;     -webkit-border-radius:20px;     -border-radius:20px;     -khtml-border-radius:20px;     padding : 5px;     min-height : 100px;     } Le résultat Pour réaliser cette astuce sur d'autres versions, et découvrir plusieurs variantes... ... consultez l'intégralité de l'astuce sur le forum : Messages sous forme de bulle

Cette astuce a été proposée par Macema Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI. Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.

[devil92140]

^^ je suis tout a fait d'accord avec cette bulle ^^

[Danux]

Attention, le résultat final peut être différent selon les navigateurs !

Et notamment avec Explorer.

[fleur2]

bonjour

merci pour toutes ses nouveautés je vais voir se que sa donne chez moi !!lol

courage à vous donc !

fleur

[FANCH 56]

Et avec invision ?

[Threax]

Invision ne permettant pas la modification des templates, cette astuce n'y est pas applicable, désolé...

[ted_fr]

superbe, cela fonctionne tres bien.
j'ai copié collé le tuto pour le template et le css.
seule difference , j'ai mis le top à 60 et les couleurs.

juste un petit soucis avec la "fleche". en bleu.
suivant les pages, elle se repete un nombre de fois (pas le meme nombre de fois suivant les pages)
sur la gauche de l'ecran.
ce qui genere un decallage



forum : scoot-sud.top-forum.net
j'utilise safari et un mac et suis l'admin.

[Threax]

Vous avez dû copier l'image ailleurs dans le template, je vous invite à ouvrir un sujet dans le forum Gérer l'apparence.

[FANCH 56]

Invision ne permettant pas la modification des templates, cette astuce n'y est pas applicable, désolé...

Merci

Bonne nuit

[tony59]

Merci RRrrrr et moi qui croyait me démarquer un peu des autres forums en ayant fait ce systeme de bulle il y a quelques semaines, voici l'astuce mis en valeur sur le forum des forum et le système des bulles devenus alors définitivement banalisée, rien de bien exceptionnel maintenant ^^

[ted_fr]

merci toto456
probleme resolu

[demeter1]

Sympa cette astuce.

[Lixyr Yrna]

Merci RRrrrr et moi qui croyait me démarquer un peu des autres forums en ayant fait ce systeme de bulle il y a quelques semaines, voici l'astuce mis en valeur sur le forum des forum et le système des bulles devenus alors définitivement banalisée, rien de bien exceptionnel maintenant ^^

Mais tout le monde ne souhaite pas avoir ses catégories comme ça. Et puis un code, quand on le cherche c'est facile à trouver, donc autant qu'il soit à disposition et bien expliqué. ^^

Je ne pense pas que vous rencontrerez beaucoup de forums adoptant ce système, même si c'est vraiment sympathique à regarder.

[tony59]

Et puis un code, quand on le cherche c'est facile à trouver, donc autant qu'il soit à disposition et bien expliqué. ^^

Oui bien sûr mais encore faut il en avoir l'idée ... et on en a plus forcément l'idée lorsque l'astuce est proposée
Oui bien sur je suis d'accord c'était de l'humour mais bon de toute façon même avec ces "bulles" on peut toujours jouer sur le css et faire différemment en améliorant et le personnalisant à notre façon

[Papione]

Super astuce
C'est très bien expliqué et je suis sûre que ça va beaucoup servir.
Merci ♥

[Gatou43]

Je l'ai fait mais n'ayant pas beaucoup d'expérience je n'est pas du le faire comme il faut ! Voici le resultat sur mon site :

pouvez vous m'aider ?
merci d'avance!

[Skylighting]

Je vais essayer , je ne suis pas sur de réussir

[neumannsc]

bonjour, j'ai procéder a toute les opération mais j'ai la fléché qui ne s'affiche pas

Voila ce que j’obtiens


Ma version

Le CCS

le changement du code

[Invité]

Bonjour,

Les annonces ne sont pas destinées aux demandes d'entraide. Pour avoir une réponse aux problèmes rencontrés, ouvrez un sujet das la section Entraide & Support .

Cordialement.

[seb03000]

Pas mal, j'ai tésté et ça fonctionne très bien .