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
    Fuyuka
    FémininAge : 23Messages : 62

    le Lun 7 Déc 2015 - 13:37

    Merci beaucoup !
    avatar
    transs-planter
    MasculinAge : 22Messages : 11

    le Dim 20 Déc 2015 - 8:32

    Merci
    avatar
    Sophie2
    FémininAge : 54Messages : 63

    le Sam 26 Déc 2015 - 12:11

    Merci.
    avatar
    Melaly
    FémininAge : 24Messages : 91

    le Sam 26 Déc 2015 - 19:16

    Thank you ♥
    avatar
    Nausicäa Kaer
    FémininAge : 24Messages : 161

    le Ven 1 Jan 2016 - 14:33

    Merci **
    avatar
    Allison01
    FémininAge : 34Messages : 199

    le Lun 4 Jan 2016 - 1:06

    Merci Very Happy
    avatar
    Luunalight
    FémininAge : 27Messages : 97

    le Jeu 7 Jan 2016 - 14:44

    Merci !
    avatar
    Illiana
    FémininAge : 22Messages : 98

    le Sam 23 Jan 2016 - 17:21

    merci !



    avatar
    TaraToI
    FémininAge : 25Messages : 67

    le Jeu 28 Jan 2016 - 11:47

    Sympa, merci !



    avatar
    greyfox1524
    MasculinAge : 23Messages : 7

    le Ven 29 Jan 2016 - 19:02

    merci
    avatar
    joypolis
    MasculinAge : 29Messages : 383

    le Dim 31 Jan 2016 - 9:50

    Merci :)



    avatar
    Mawie62
    FémininAge : 23Messages : 125

    le Dim 31 Jan 2016 - 22:42

    Merci :)



    avatar
    Neya
    FémininAge : 19Messages : 164

    le Lun 15 Fév 2016 - 20:41

    Thank's
    avatar
    Shide
    FémininAge : 29Messages : 60

    le Dim 28 Fév 2016 - 22:59

    merci
    avatar
    .pinkrocks
    FémininAge : 28Messages : 41

    le Mar 1 Mar 2016 - 13:29

    En plein ce qu'on cherchait! Merci beaucoup! Very Happy
    avatar
    Kitket
    FémininAge : 35Messages : 100

    le Sam 19 Mar 2016 - 11:06

    Merci
    avatar
    JaydenRcr
    MasculinAge : 19Messages : 32

    le Lun 21 Mar 2016 - 13:29

    thank's
    avatar
    Coco-Lapin02
    MasculinAge : 50Messages : 167

    le Mar 22 Mar 2016 - 1:30

    Merci
    avatar
    Evil Queen 4ever
    FémininAge : 26Messages : 63

    le Mar 22 Mar 2016 - 15:40

    Superbe Very Happy





    avatar
    Nessaleth
    FémininAge : 27Messages : 52

    le Dim 24 Avr 2016 - 17:22

    Merci !
    avatar
    Kahlan
    FémininAge : 31Messages : 371

    le Mar 26 Avr 2016 - 11:16

    merci beaucoup ^^
    avatar
    Hige'
    FémininAge : 19Messages : 8

    le Dim 5 Juin 2016 - 17:40

    Merci
    avatar
    hippolytta
    FémininAge : 18Messages : 52

    le Mar 5 Juil 2016 - 23:38

    Merci pour ton partage :)
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Jeu 28 Juil 2016 - 15:46

    Merci !



    Just want to be yours.
    avatar
    Fayzl4D
    MasculinAge : 22Messages : 84

    le Jeu 11 Aoû 2016 - 6:45

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 16 Aoû 2018 - 15:43