Messages en bulle (PhpBB2 / PunBB)

[SoraNoHime]

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. 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. 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 à 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> attention à bien laisser l'espace 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 : Les codes sont à adapter selon vos besoins 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 :

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.

[SoraNoHime]

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 :

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.

[SoraNoHime]

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 à 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> attention à bien laisser l'espace 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 : Les codes sont à adapter selon vos besoins 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. 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. 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 :

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.

[SoraNoHime]

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 :

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.