Afficher les messages sous forme de bulle BD

Rappel du premier message :

Source : Threax, forumactif.

Bonjour ! Je vais aujourd'hui vous apprendre à réaliser ceci :



1.Templates

Pour modifiez les templates, vous devez :

   - Être en version phpBB2
   - Être fondateur du forum
   
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.

Repérez bien les dimensions de votre image, vous en aurez besoin ensuite : ici, 20x20.

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, 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>

2.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 à partir de la gauche. 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


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

Merci créditer Never-Utopia sur vos forums !

Merci

Merci pour ce tuto ^^

TKS

merci   

merci

Merci

Merci beaucoup !

magnifique

Mici

génial, c'est ce que je cherchais^^
Mercie Len

Thanks ♥

Merci beaucoup du partage

Merci !

merci

Merci!

Thanks

Je cherchais ce tuto un petit moment déjà, merci pour le partage o/

Ha ! Bonjour et merci, c'est justement ce que je cherchais

Merci !

Merci cette forme de message est de plus en plus rependue et je trouve ce style de codage fort sympathique :)

Merci

Merci

Et voilà le tuto parfait pour terminer ma mise en page. Merci   

WOW ** merci !