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 : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €
Le deal à ne pas rater :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
Voir le deal

    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 3 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 3 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
    JasLo
    JasLo
    FémininAge : 22Messages : 76

    Dim 26 Jan 2014 - 11:52

    Trop beau, merci!
    Sara_y
    Sara_y
    FémininAge : 33Messages : 81

    Dim 26 Jan 2014 - 12:40

    Merci ^^



    Afficher les messages sous forme de bulle BD - Page 3 389654Arrow
    Artémis Walker
    Artémis Walker
    FémininAge : 28Messages : 54

    Lun 27 Jan 2014 - 18:00

    Merci pour le partage.



    Afficher les messages sous forme de bulle BD - Page 3 Neveru10
    Oce.
    Oce.
    FémininAge : 24Messages : 51

    Mer 29 Jan 2014 - 13:42

    Merci, c'est vraiment original !



    Afficher les messages sous forme de bulle BD - Page 3 Pale12
    NathanaelSane
    NathanaelSane
    FémininAge : 30Messages : 73

    Mer 29 Jan 2014 - 14:59

    merci :)
    Fox.andBlue
    Fox.andBlue
    FémininAge : 30Messages : 105

    Ven 31 Jan 2014 - 4:42

    maarci



    Afficher les messages sous forme de bulle BD - Page 3 681640signafoxandblue
    Ay.am.e
    Ay.am.e
    FémininAge : 25Messages : 123

    Ven 31 Jan 2014 - 12:02

    Merci
    Yumi-chan
    Yumi-chan
    FémininAge : 30Messages : 67

    Sam 1 Fév 2014 - 2:28

    thanks. *-*
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Dim 2 Fév 2014 - 4:13

    Je vais tester! Merci :)
    Dragma
    Dragma
    MasculinAge : 28Messages : 65

    Dim 2 Fév 2014 - 13:19

    ahhh, merci bien Wink

    Mowwie
    Mowwie
    FémininAge : 34Messages : 28

    Lun 3 Fév 2014 - 12:44

    Merci
    Ange09
    Ange09
    FémininAge : 32Messages : 66

    Lun 3 Fév 2014 - 20:51

    Merci !
    Lena
    Lena
    FémininAge : 33Messages : 100

    Mar 4 Fév 2014 - 0:51

    Merci du partage *o* Je recherchais justement ce code =D



    Afficher les messages sous forme de bulle BD - Page 3 Lena13

    Merci a Kazuya pour son kit =)
    Heine
    Heine
    MasculinAge : 29Messages : 169

    Mar 4 Fév 2014 - 8:41

    Merci beaucoup ! o/



    Afficher les messages sous forme de bulle BD - Page 3 110407104459204818
    MinahBuffyDixon
    MinahBuffyDixon
    FémininAge : 35Messages : 41

    Mer 5 Fév 2014 - 14:13

    Merci.



    Afficher les messages sous forme de bulle BD - Page 3 Wolf10
    Asami
    Asami
    FémininAge : 33Messages : 25

    Sam 8 Fév 2014 - 0:55

    merci pour ce tuto  :love: 



    And not seeing that loving you...
    It's what I was trying to do...
    flowers.
    flowers.
    FémininAge : 30Messages : 25

    Sam 8 Fév 2014 - 2:20

    J'adore !!!
    Merci beaucoup !
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Mer 12 Fév 2014 - 14:52

    Je voudrais essayer alors merci Wink



    Afficher les messages sous forme de bulle BD - Page 3 Edkidd11
    Lust Caution
    Lust Caution
    FémininAge : 29Messages : 79

    Sam 15 Fév 2014 - 14:55

    Merci beaucoup.
    Eldiir
    Eldiir
    FémininAge : 37Messages : 33

    Sam 15 Fév 2014 - 23:46

    Merci pour ce partage!
    Souky Mitsu
    Souky Mitsu
    FémininAge : 33Messages : 124

    Lun 17 Fév 2014 - 3:42

    Ouuuh génial ! Very Happy Merci :3
    ♕ William
    ♕ William
    MasculinAge : 26Messages : 72

    Mar 18 Fév 2014 - 20:49

    Merci Very Happy



    Afficher les messages sous forme de bulle BD - Page 3 Right_10
    William
    [W]endy
    [W]endy
    FémininAge : 33Messages : 117

    Mar 18 Fév 2014 - 22:28

    Merci (aa)
    webs
    webs
    MasculinAge : 30Messages : 1097

    Mer 19 Fév 2014 - 0:11

    Merci je prend



    Afficher les messages sous forme de bulle BD - Page 3 Img-0107360bb1h
    Amiko
    Amiko
    FémininAge : 32Messages : 51

    Mer 19 Fév 2014 - 11:32

    Cool, merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:25