AccueilRechercherS'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.

-22%
Le deal à ne pas rater :
Promo sur APPLE Airpods 2 avec boitier de charge
140 € 179 €
Voir le deal
Le deal à ne pas rater :
Oxymètre de pouls, Compteur de Saturation en oxygène
4.10 €
Voir le deal

    Afficher les messages sous forme de bulle BD

    Whitemoon
    Whitemoon
    FémininAge : 20Messages : 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 : Afficher les messages sous forme de bulle BD - Page 6 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 6 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
    Angie Harkness
    Angie Harkness
    FémininAge : 37Messages : 725

    le Jeu 27 Mar 2014 - 19:50

    sympa merci^^
    x-carrie-x
    x-carrie-x
    FémininAge : 29Messages : 26

    le Sam 29 Mar 2014 - 17:44

    Merci pour le partage (:



    Afficher les messages sous forme de bulle BD - Page 6 201155sign
    Natsu892
    Natsu892
    MasculinAge : 20Messages : 63

    le Sam 29 Mar 2014 - 19:23

    trop beau merci \o/



    Leelo
    Leelo
    FémininAge : 29Messages : 157

    le Lun 31 Mar 2014 - 17:45

    Merci
    jey38830
    jey38830
    MasculinAge : 27Messages : 60

    le Lun 31 Mar 2014 - 19:34

    Merci beaucoup, depuis le temps que je voulais savoir comment on faisait ! Very Happy
    Tsumei
    Tsumei
    MasculinAge : 30Messages : 116

    le Mar 1 Avr 2014 - 11:27

    Merci !
    GreenGage
    GreenGage
    FémininAge : 27Messages : 73

    le Mer 2 Avr 2014 - 11:47

    Je me demandais justement comment ça pouvait bien se faire... Merci d'assouvir ma curiosité !
    skaera22
    skaera22
    MasculinAge : 25Messages : 72

    le Mer 2 Avr 2014 - 20:56

    thanks
    Lutine
    Lutine
    FémininAge : 33Messages : 102

    le Jeu 3 Avr 2014 - 14:03

    Merci :)
    Deviliar
    Deviliar
    FémininAge : 32Messages : 44

    le Sam 5 Avr 2014 - 15:42

    Merci !
    avatar
    misakii
    FémininAge : 23Messages : 37

    le Dim 6 Avr 2014 - 16:43

    intrigation
    Aile
    Aile
    FémininAge : 32Messages : 134

    le Mar 8 Avr 2014 - 16:21

    J'adore! Merci.



    Afficher les messages sous forme de bulle BD - Page 6 799284Sanstitre1
    Airore
    Airore
    FémininAge : 21Messages : 132

    le Mer 9 Avr 2014 - 11:08

    merci
    Polaris
    Polaris
    MasculinAge : 26Messages : 13

    le Jeu 10 Avr 2014 - 12:56

    Merci !
    avatar
    Abate.7
    MasculinAge : 25Messages : 67

    le Jeu 10 Avr 2014 - 14:33

    merci !
    Eirlys
    Eirlys
    FémininAge : 28Messages : 66

    le Ven 11 Avr 2014 - 11:27

    Merci !
    Strawy
    Strawy
    FémininAge : 23Messages : 38

    le Dim 13 Avr 2014 - 10:52

    Merci beaucoup, c'est super pratique !



    Afficher les messages sous forme de bulle BD - Page 6 435141StrawyKit2Signa
    Patou972
    Patou972
    FémininAge : 42Messages : 172

    le Dim 13 Avr 2014 - 22:57

    oh, ça a l'air sympa, merci beaucoup bises
    ColorTime'Less
    ColorTime'Less
    FémininAge : 23Messages : 104

    le Lun 14 Avr 2014 - 13:51

    Un grand merci pour se codage que je cherche depuis... Longtemps !
    A bicyclette
    A bicyclette
    FémininAge : 27Messages : 12

    le Lun 14 Avr 2014 - 18:18

    Thanks ! :)
    Apollo Justice
    Apollo Justice
    MasculinAge : 25Messages : 1166

    le Jeu 17 Avr 2014 - 1:06

    Merci. Wink




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    T_Time
    T_Time
    FémininAge : 23Messages : 104

    le Sam 19 Avr 2014 - 10:24

    Je veux bien essayer :3
    Zoé
    Zoé
    FémininAge : 21Messages : 189

    le Sam 19 Avr 2014 - 10:59

    merchi o/



    Afficher les messages sous forme de bulle BD - Page 6 274643signaaaa
    Eshon
    Eshon
    FémininAge : 39Messages : 195

    le Sam 19 Avr 2014 - 12:25

    C'est super beau ! ^^
    Merci !  Very Happy 
    Kiwi SuperStar
    Kiwi SuperStar
    FémininAge : 29Messages : 88

    le Dim 20 Avr 2014 - 13:50

    Tien tien tien :p
    Voilà qui serait plutôt intéressant ! Very Happy

    Merci du partage ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Sam 16 Jan 2021 - 12:12