Afficher les messages sous forme de bulle BD

Whitemoon

Age : 24Messages : 695

Lun 23 Déc 2013 - 15:21

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 de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Si vous avez des problèmes avec ce LS, venez poster ici.

Dernière édition par Len kagamine le Jeu 26 Déc 2013 - 13:55, édité 1 fois

Adèle

Age : 33Messages : 96

Lun 23 Déc 2013 - 18:21

Je me posais justement la question depuis un petit moment. Merci o/

younessdu91

Age : 26Messages : 96

Lun 23 Déc 2013 - 18:25

Merci, ça ressemble un peu à l'infobulle

Whitemoon

Age : 24Messages : 695

Lun 23 Déc 2013 - 18:33

De rien, au plaisir ^o^

Invité

Lun 23 Déc 2013 - 19:49

merci

ketchup

Age : 26Messages : 11

Lun 23 Déc 2013 - 21:26

merci beaucoup :bril:

PrincesseÔ

Age : 27Messages : 220

Mar 24 Déc 2013 - 11:06

Merci ! Je cherchais justement ça *^*

Ananké

Age : 38Messages : 45

Mar 24 Déc 2013 - 11:41

Merci beaucoup pour ce tuto

Nalex

Age : 35Messages : 154

Mar 24 Déc 2013 - 12:39

Je vais tester! Merci :)

Rhay

Age : 29Messages : 14

Mer 25 Déc 2013 - 22:43

Thanks :)

Miss Ryuichi

Age : 33Messages : 36

Jeu 26 Déc 2013 - 10:41

merciiiiiiii !! =)

Dream Land School

Age : 36Messages : 101

Ven 27 Déc 2013 - 4:59

Merci ^^

Nanou0001

Age : 40Messages : 50

Ven 27 Déc 2013 - 12:45

Merci beaucoup je trouve cela très interessant :)

Neymar

Age : 26Messages : 139

Ven 27 Déc 2013 - 16:13

Mercii du partage ! ~

Chou.

Age : 28Messages : 22

Sam 28 Déc 2013 - 16:46

Merci <3

CoinCoinGirl

Age : 30Messages : 30

Lun 30 Déc 2013 - 15:28

Maaaaaawci :3

TUC

Age : 36Messages : 103

Mer 1 Jan 2014 - 17:44

merci :)

Sleepy ♪

Age : 26Messages : 46

Jeu 2 Jan 2014 - 14:21

C'est exactement ce que je cherchais. Très utile, merci à toi. :3

EDIT : Par contre, pour le tout premier code à chercher dans le template, moi je ne l'ai pas. o-ô J'ai déjà modifié ce  (cette ?) template, donc je suppose que c'est pour ça. Du coup, j'ai annulé la modification du template. Mais même après avoir fait ça, je ne trouve pas ce code. Some help. D:

Everdeen

Age : 30Messages : 36

Jeu 2 Jan 2014 - 15:30

Merci du partage, depuis le temps que je cherche *.*

memoriam

Age : 32Messages : 73

Jeu 2 Jan 2014 - 20:58

Merciii   je le cherchais justement!

mathou_inu

Age : 28Messages : 55

Jeu 2 Jan 2014 - 23:53

Merci !

Neva

Age : 33Messages : 18565

Ven 3 Jan 2014 - 16:58

C'est exactement ce que je cherchais. Très utile, merci à toi. :3

EDIT : Par contre, pour le tout premier code à chercher dans le template, moi je ne l'ai pas. o-ô J'ai déjà modifié ce  (cette ?) template, donc je suppose que c'est pour ça. Du coup, j'ai annulé la modification du template. Mais même après avoir fait ça, je ne trouve pas ce code. Some help. D:

Hey,

Petit rappel du... rappel ( =D ) affiché en bas de page :

  et si vous avez un souci pour utiliser/personnaliser un code vous devez ouvrir un topic dans cette section.

Mitsuomi73

Age : 32Messages : 42

Ven 3 Jan 2014 - 21:47

merci beaucoup ♥

Neycha

Age : 31Messages : 58

Dim 5 Jan 2014 - 1:15

Depuis le temps que je cherche un tuto pour faire ça !
Merci milles et une fois *-*

Susan Storm

Age : 44Messages : 78

Dim 5 Jan 2014 - 16:00

Merci!

Contenu sponsorisé