Messages en bulle (PhpBB2 / PunBB)

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Messages en bulle (PhpBB2 / PunBB)

Message par SoraNoHime le Lun 20 Juin 2011 - 18:12

Afficher les messages en bulle (PhpBB2)


1. Ce dont vous avez besoin :

Pour mettre les messages en bulles, vous devez d'avord être en version PhpBB2 et être le fondateur de votre forum pour avoir accès aux templates. N'oubliez pas d'enregistrer et de publier votre template après tout changement effectué.

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, 20 x20.

Warning attention à ne pas prendre une image de plus de 25 à 30px de hauteur Warning

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.

2. Changements dans le template :

Il s'agit du template viewtopic_body.

Vous le trouverez à ce chemin : Panneau d'Administration >> Affichage >> Template : Général.
Puis à droite dans la liste des templates, cliquez sur edit à la fin de la ligne Viewtopic_body.

Repérez dans le template cette partie :

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>

Warning attention à bien laisser l'espace Warning

Mais aussi la class qui transformera le message en bulle :

Code:
class="bulle"

Changez donc le code ainsi :

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>

3. Créer la bulle grâce à la css :

Warning Les codes sont à adapter selon vos besoins Warning

Dans Panneau d'administration >> Affichage >> Couleurs, puis dans l'onglet à droite, Feuille de style css.

Nous allons ajoutez l'image de la flèche et la positionner :

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

Et maintenant faire la bulle :

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 :

Vous pouvez choisir de mettre une taille minimum en hauteur à votre bulle en rajoutant par exemple :

min-height : 100px;

à régler selon votre gout. Cela donnerait ceci dans votre css :

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 :




SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Messages en bulle (PhpBB2 / PunBB)

Message par SoraNoHime le Lun 20 Juin 2011 - 18:13

Variantes pour l'astuce (en PhpBB2)


4. Variante : Enlever le titre du message et les boutons d'édition de la bulle

Pour faire une bulle sans le titre du message et les boutons d'édition à l'intérieur, nous devons séparer le tableau qui contient le titre et ces boutons, et le message. Donc faire deux tableaux au lieu d'un. Repérez dans ce cas cette partie dans le template :

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>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>
            <tr>
               <td colspan="2" class="hr">
                  <hr />
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->

Et changez la ainsi :

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">
            <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>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>
            <tr>
               <td colspan="2" class="hr">
                  <hr />
               </td>
            </tr></table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bulle">
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->

Je vous conseille de baisser un peu la flèche dans ce cas : donc top : 70px;

Ce qui donnerait dans la css :

Code:
  .fleche {
    background-image : url("adresse de votre image");
    width: 20px;
    height :20px;
    position : relative;
    top :70px;
    left :-19px;  }

Le résultat :



5. Variante : Enlever la mention d'édition de la bulle

Vous pouvez choisir de ne pas inclure la mention d'édition dans la bulle. Nous devons donc fermer le tableau dans lequel se trouve la class="bulle" avant la mention d'édition.

Dans ce cas, repérez cette partie dans le template :

Code:
</div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>

Et changez la ainsi :

Code:
</div>
               </td>
            </tr>
         </table>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
      </td>
   </tr>

Le résultat :



6. Variante : Enlever la signature et la mention d'édition de la bulle

Comme pour la mention d'édition, nous devons donc fermer le tableau dans lequel se trouve la class="bulle" avant la signature.

Dans ce cas, repérez cette partie dans le template :

Code:
<!-- END switch_attachments -->

                     <div class="clear"></div>
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
        </table>
      </td>

Et changez la ainsi :

Code:
<!-- END switch_attachments -->

              </td>
            </tr>
        </table>
                     <div class="clear"></div>
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
      </td>

Le résultat :



7. Variante : N'avoir que le message dans la bulle

Il suffit simplement de reprendre les points 4 et 6 pour obtenir le message sans le reste dans la bulle.

Le résultat :



SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Messages en bulle (PhpBB2 / PunBB)

Message par SoraNoHime le Lun 20 Juin 2011 - 18:16

Afficher les messages en bulle (PunBB)


1. Ce dont vous avez besoin :

Pour mettre les messages en bulles, vous devez d'avord être en version PunBB et être le fondateur de votre forum pour avoir accès aux templates. N'oubliez pas d'enregistrer et de publier votre template après tout changement effectué.

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, 20 x20.

2. Changements dans le template :

Il s'agit du template viewtopic_body.

Vous le trouverez à ce chemin : Panneau d'Administration >> Affichage >> Template : Général.
Puis à droite dans la liste des templates, cliquez sur edit à la fin de la ligne Viewtopic_body.

Repérez dans le template cette partie :

Code:
{postrow.displayed.POSTER_RPG}
                     </div>
                  </div>
                  <div class="post-entry">
                          <div class="entry-content">
                        <!-- BEGIN switch_vote_active -->

C'est ici que nous allons placer une <div> avec une class où se trouvera notre image :

Code:
<div class="fleche"> </div>

Warning attention à bien laisser l'espace Warning

ce qui nous donne :

Code:
{postrow.displayed.POSTER_RPG}
                     </div>
                  </div>
                  <div class="post-entry">
       <div class="fleche"> </div>
                     <div class="entry-content">
                        <!-- BEGIN switch_vote_active -->

3. Créer la bulle grâce à la css :

Warning Les codes sont à adapter selon vos besoins Warning

Dans Panneau d'administration >> Affichage >> Couleurs, puis dans l'onglet à droite, Feuille de style css.

Nous allons ajoutez l'image de la flèche et la positionner :

Code:
    .fleche {
    background-image : url("adresse de votre image");
    width: 20px;
    height :20px;
    position : relative;
    top :12px;
    left :658px; }

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 :12px; : à régler si besoin, il s'agit du décalage à partir du haut de votre image pour la mettre à celui prévu
left : 568px; : idem, mais en largeur. Adapter le à la longueur de la bulle.

Warning Cette dernière mesure est obligatoirement à changer car elle varie en fonction de la taille de votre forum. Attention également aux messages trop longs ou images trop grandes qui pourraient déformer la taille d'un post. Dans ces cas, la flèche de la bulle apparaitrait à l'intérieur du message. Warning

Et maintenant faire la bulle :

Code:
        .post-entry{
        background-color : #FFCC00;
        border : 1px solid #FF9900;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        margin-left : 5px;
        margin-right : 19px;
        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
margin-left : 5px; : espace externe à gauche pour éviter que la bulle colle aux bordures du message
margin-right : 19px; : espace externe à droite pour pouvoir insérez votre image sans la déformer. calculer le facilement : taille de votre image -1px.

padding : 5px; : espace interne pour éviter que le texte et les images dépassent sur les bordures de la bulle

Astuce en plus :

Vous pouvez choisir de mettre une taille minimum en hauteur à votre bulle en rajoutant par exemple :

min-height : 100px;

à régler selon votre gout. Cela donnerait ceci dans votre css :

Code:
        .post-entry{
        background-color : #FFCC00;
        border : 1px solid #FF9900;
        -moz-border-radius: 20px ;
        -webkit-border-radius:20px;
        -border-radius:20px;
        -khtml-border-radius:20px;
        margin-left : 5px;
        margin-right : 19px;
        padding : 5px;
    min-height : 100px;
    }

Le résultat :




SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Messages en bulle (PhpBB2 / PunBB)

Message par SoraNoHime le Lun 20 Juin 2011 - 18:17

Variantes pour l'astuce (en PunBB)


4. Variante : Enlever la mention d'édition de la bulle

Pour faire une bulle sans la mention d'édition à l'intérieur, il va nous falloir enlever cette mention de la <div> contenant la bulle, donc la déplacer. Repérez dans ce cas cette partie dans le template :

Code:
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>
                     </div>
                  </div>
               </div>

               <!-- BEGIN switch_signature -->

Et changez la ainsi :

Code:
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>
                     </div>
                  </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>
               </div>

               <!-- BEGIN switch_signature -->

Le résultat :



5. Variante : Inclure la signature dans la bulle

Pour inclure la signature dans la bulle, nous allons devoir la déplacer dans le <div> contenant la bulle et l'enlever de sa position initiale.

Dans ce cas, repérez cette partie dans le template :

Code:
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>
                     </div>
                  </div>
               </div>

               <!-- BEGIN switch_signature -->
               <div class="sig-content">
                  {postrow.displayed.SIGNATURE_NEW}
               </div>
               <!-- END switch_signature -->

               <div class="postfoot">

Et changez la ainsi :

Code:
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>

               <!-- BEGIN switch_signature -->
               <div class="sig-content">
                  {postrow.displayed.SIGNATURE_NEW}
               </div>
               <!-- END switch_signature -->
                     </div>
                  </div>
               </div>

               <div class="postfoot">

Le résultat :



6. Variante : Inclure la signature et retirer la mention d'édition dans la bulle

C'est un peu un mixte des deux variantes précédentes. Nous replaçons la signature à la place de la mention d'édition, et écartons cette dernière de la <div> contenant la bulle.

Pour cela, repérez cette partie dans le template :

Code:
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>
                     </div>
                  </div>
               </div>

               <!-- BEGIN switch_signature -->
               <div class="sig-content">
                  {postrow.displayed.SIGNATURE_NEW}
               </div>
               <!-- END switch_signature -->

               <div class="postfoot">

Et changez la ainsi :

Code:
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>

               <!-- BEGIN switch_signature -->
               <div class="sig-content">
                  {postrow.displayed.SIGNATURE_NEW}
               </div>
               <!-- END switch_signature -->
                     </div>
                  </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>
               </div>

               <div class="postfoot">

Le résultat :




SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum