AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal
Le Deal du moment : -20%
-20% sur le Lot de 2 écrans PC GIGABYTE ...
Voir le deal
429 €

    Afficher les messages sous forme de bulle BD

    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Lun 23 Déc 2013 - 15:21

    Rappel du premier message :

    Source : Threax, forumactif.

    Bonjour ! Je vais aujourd'hui vous apprendre à réaliser ceci : Afficher les messages sous forme de bulle BD - Page 4 Tutoma10



    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. Afficher les messages sous forme de bulle BD - Page 4 Sans_t11

    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
    Imari
    Imari
    FémininAge : 40Messages : 68

    Mer 19 Fév 2014 - 13:49

    Merci Very Happy



    Afficher les messages sous forme de bulle BD - Page 4 2mzbax4
    Geen
    Geen
    FémininAge : 24Messages : 33

    Mer 19 Fév 2014 - 17:24

    Merci beaucoup ♥
    Trés❍r
    Trés❍r
    FémininAge : 29Messages : 92

    Jeu 20 Fév 2014 - 18:50

    Ça a l'air sympa !
    Merci , je vais tenter :)
    Kim Jae Yoon
    Kim Jae Yoon
    FémininAge : 33Messages : 128

    Dim 23 Fév 2014 - 11:55

    Merci ! Very Happy
    Owltherapy
    Owltherapy
    FémininAge : 30Messages : 5

    Lun 24 Fév 2014 - 16:17

    Merci !
    Azaral
    Azaral
    FémininAge : 27Messages : 69

    Mar 25 Fév 2014 - 13:23

    merci !!
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    Mar 25 Fév 2014 - 15:46

    Merci pour le partage c'est super jolie
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Mar 25 Fév 2014 - 19:00

    mici :)
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 25 Fév 2014 - 19:41

    Merci
    Amera
    Amera
    FémininAge : 31Messages : 67

    Mer 26 Fév 2014 - 15:00

    Merci beaucoup !



    Afficher les messages sous forme de bulle BD - Page 4 734690sign1
    rhino
    rhino
    MasculinAge : 28Messages : 25

    Jeu 27 Fév 2014 - 23:18

    Merci !
    Yuko1
    Yuko1
    FémininAge : 25Messages : 26

    Ven 28 Fév 2014 - 21:25

    Merci pour le partage.
    shala
    shala
    FémininAge : 32Messages : 213

    Dim 2 Mar 2014 - 1:10

    merci



    messia
    messia
    FémininAge : 26Messages : 18

    Dim 2 Mar 2014 - 17:31

    Merci !
    Drakylla
    Drakylla
    MasculinAge : 32Messages : 32

    Dim 2 Mar 2014 - 22:04

    Un grand merci car j'aime beaucoup ce rendu !
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Dim 2 Mar 2014 - 23:08

    Merci !
    white.sensation
    white.sensation
    FémininAge : 27Messages : 5

    Lun 3 Mar 2014 - 2:00

    Merciiiiiii Very Happy
    Anonymous
    Invité

    Lun 3 Mar 2014 - 10:17

    Merci du partage Wink
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Lun 3 Mar 2014 - 16:18

    Merci pour l'astuce^^
    Wizcoo
    Wizcoo
    MasculinAge : 30Messages : 34

    Lun 3 Mar 2014 - 18:04

    Merci Very Happy
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Lun 3 Mar 2014 - 18:27

    merci pour le tutoriel ^^




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Nearween
    Nearween
    FémininAge : 25Messages : 213

    Mar 4 Mar 2014 - 10:59

    Oh un nouveau code qui va m'être utile, thank x)



    Afficher les messages sous forme de bulle BD - Page 4 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Heavensky
    Heavensky
    FémininAge : 29Messages : 66

    Mer 5 Mar 2014 - 2:07

    Merci :p
    Everniss
    Everniss
    FémininAge : 26Messages : 19

    Mer 5 Mar 2014 - 13:48

    Dans ce cas, merci beaucoup. Je suis curieuse de tout fgjhjkhgj ♥.
    Amber's
    Amber's
    FémininAge : 23Messages : 158

    Mer 5 Mar 2014 - 16:59

    Mercii ♥
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:06