AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Afficher les messages sous forme de bulle BD

    Partagez
    avatar
    Whitemoon
    FémininAge : 18Messages : 695

    le Lun 23 Déc 2013 - 15:21

    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 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
    avatar
    Capouccino
    FémininAge : 20Messages : 189

    le Dim 2 Aoû 2015 - 11:37

    Merci :) Très sympa ^^



    "Espérer l'inespérable c'est croire en l'impossible."
    avatar
    Romann
    FémininAge : 24Messages : 183

    le Dim 2 Aoû 2015 - 22:31

    merci !



    avatar
    Kelalin
    FémininAge : 25Messages : 1946

    le Dim 2 Aoû 2015 - 22:38

    Merci pour ce partage (●´∀`●)
    avatar
    S-L
    MasculinAge : 29Messages : 13

    le Mar 4 Aoû 2015 - 3:57

    Merci bien, je vais essayer de combiner ce format avec un autre ! =D
    avatar
    Glaçou
    FémininAge : 16Messages : 117

    le Mar 4 Aoû 2015 - 12:05

    Merci!
    avatar
    NanoiHime
    FémininAge : 19Messages : 562

    le Jeu 13 Aoû 2015 - 15:18

    merci



    avatar
    Joxtop
    FémininAge : 26Messages : 47

    le Lun 17 Aoû 2015 - 21:58

    merci Very Happy
    avatar
    Daigoro
    MasculinAge : 30Messages : 13

    le Ven 28 Aoû 2015 - 23:14

    merci :)
    avatar
    Tom974114
    MasculinAge : 15Messages : 9

    le Dim 30 Aoû 2015 - 14:23

    merci
    avatar
    Fizzz
    FémininAge : 24Messages : 17

    le Dim 6 Sep 2015 - 19:05

    Merciii
    avatar
    Lal
    FémininAge : 27Messages : 48

    le Lun 7 Sep 2015 - 17:49

    Merci beaucoup pour le partage bonne continuation =)
    avatar
    #WHOLESATANIC
    FémininAge : 21Messages : 17

    le Mer 9 Sep 2015 - 22:11

    merci !
    avatar
    Milou
    FémininAge : 19Messages : 163

    le Sam 19 Sep 2015 - 18:48

    Merci ^^



    avatar
    Eiffel01
    MasculinAge : 31Messages : 32

    le Dim 20 Sep 2015 - 13:34

    Merci
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Lun 21 Sep 2015 - 19:29

    Merci :)
    avatar
    Nyusu97
    FémininAge : 20Messages : 60

    le Mar 22 Sep 2015 - 22:01

    Merciiiii !



    avatar
    EOS
    MasculinAge : 25Messages : 34

    le Mer 23 Sep 2015 - 0:45

    merci
    avatar
    Powkfu
    MasculinAge : 27Messages : 13

    le Mer 23 Sep 2015 - 22:46

    Cool :
    avatar
    Zeloo
    FémininAge : 22Messages : 65

    le Jeu 24 Sep 2015 - 21:21

    Merci beaucoup !



    avatar
    alysia
    MasculinAge : 26Messages : 33

    le Lun 28 Sep 2015 - 2:21

    Merci
    avatar
    Kanra
    FémininAge : 17Messages : 113

    le Ven 2 Oct 2015 - 22:47

    Merci !
    avatar
    Sasha57
    FémininAge : 24Messages : 35

    le Ven 9 Oct 2015 - 10:25

    Merci *o*
    avatar
    Girly
    FémininAge : 20Messages : 116

    le Sam 10 Oct 2015 - 20:04

    super merci !
    avatar
    Pavlover
    FémininAge : 22Messages : 24

    le Ven 16 Oct 2015 - 4:17

    C'était exactement ce que je cherchais merci! **
    avatar
    Ivelyne
    FémininAge : 26Messages : 45

    le Mar 27 Oct 2015 - 16:09

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Aoû 2018 - 16:13