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
    Thorn
    MasculinAge : 17Messages : 432

    le Jeu 6 Mar 2014 - 16:54

    Merci !^^



    Løve
    MasculinAge : 23Messages : 189

    le Ven 7 Mar 2014 - 20:55

    Merci bien! :)
    avatar
    Luxuria
    FémininAge : 21Messages : 83

    le Ven 7 Mar 2014 - 21:22

    Merci ^^
    avatar
    M.T
    FémininAge : 29Messages : 53

    le Ven 7 Mar 2014 - 23:12

    Merci (=
    avatar
    Clarisse
    FémininAge : 18Messages : 3938

    le Sam 8 Mar 2014 - 23:44

    Thanks. ^^
    avatar
    Doctor Who
    MasculinAge : 25Messages : 160

    le Mar 11 Mar 2014 - 17:04

    Merci bien ;:)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Chaussette
    FémininAge : 25Messages : 59

    le Mer 12 Mar 2014 - 14:30

    Merci beaucoup, ce me sera très utile ! =D
    avatar
    Zuny
    FémininAge : 25Messages : 18

    le Jeu 13 Mar 2014 - 11:26

    Merci :)
    avatar
    Liliumini
    FémininAge : 23Messages : 55

    le Jeu 13 Mar 2014 - 11:39

    Merci, je ne savais pas comment procéder pour cela!
    avatar
    .SaKou.
    FémininAge : 22Messages : 57

    le Ven 14 Mar 2014 - 19:33

    Ce que je cherchais, merci !



    avatar
    Noob's
    MasculinAge : 24Messages : 129

    le Lun 17 Mar 2014 - 17:02

    Miciii :3
    avatar
    Cruelly
    FémininAge : 25Messages : 2572

    le Lun 17 Mar 2014 - 20:48

    merci  partage :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Jull421
    FémininAge : 24Messages : 141

    le Mar 18 Mar 2014 - 2:12

    Merci



    Njie
    FémininAge : 19Messages : 10

    le Mar 18 Mar 2014 - 15:38

    Merci Wink
    avatar
    Insane paper-plane
    FémininAge : 22Messages : 139

    le Mer 19 Mar 2014 - 22:04

    merci beaucoup !
    avatar
    Sheepirl
    FémininAge : 19Messages : 28

    le Jeu 20 Mar 2014 - 17:47

    Merciii
    avatar
    tenderness
    FémininAge : 24Messages : 54

    le Ven 21 Mar 2014 - 1:12

    Merci !
    avatar
    DDril
    MasculinAge : 34Messages : 34

    le Sam 22 Mar 2014 - 23:22

    Merci
    avatar
    Flower_*
    FémininAge : 23Messages : 600

    le Dim 23 Mar 2014 - 13:55

    Merci beaucoup pour ce tuto !
    avatar
    Banpaia
    FémininAge : 21Messages : 130

    le Dim 23 Mar 2014 - 14:56

    Merci !
    Gedomaru
    FémininAge : 21Messages : 70

    le Dim 23 Mar 2014 - 18:18

    Merci! ^^
    avatar
    Kamesora
    FémininAge : 26Messages : 90

    le Dim 23 Mar 2014 - 23:59

    Merci
    avatar
    Shannon{sweetie}
    FémininAge : 22Messages : 22

    le Mar 25 Mar 2014 - 19:48

    C'est très original, merci beaucoup pour le partage.
    avatar
    SvenO
    MasculinAge : 25Messages : 78

    le Mer 26 Mar 2014 - 17:59

    Merci !



    avatar
    ass kicker
    FémininAge : 23Messages : 80

    le Jeu 27 Mar 2014 - 17:32

    Depuis le temps que je cherchais ce genre d'effet ! Je te remercie pour ce partage ♥



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©endlesslove
    Contenu sponsorisé


      La date/heure actuelle est Lun 10 Déc 2018 - 1:35