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
    Liia
    FémininAge : 22Messages : 91

    le Ven 8 Mai 2015 - 15:12

    Merci :3
    avatar
    Darkius
    MasculinAge : 30Messages : 65

    le Dim 10 Mai 2015 - 15:21

    sympa merci :)
    avatar
    Zertox
    MasculinAge : 27Messages : 9

    le Jeu 14 Mai 2015 - 1:29

    Wow merci c'est ce dont j'avais besoin Very Happy
    avatar
    Kira de Shola
    FémininAge : 21Messages : 60

    le Ven 15 Mai 2015 - 22:14

    Merci
    avatar
    Ellen Lesley
    FémininAge : 103Messages : 76

    le Dim 24 Mai 2015 - 14:27

    Merci
    avatar
    Overdose
    FémininAge : 18Messages : 26

    le Dim 24 Mai 2015 - 19:17

    merci
    avatar
    Antithée
    FémininAge : 21Messages : 69

    le Ven 29 Mai 2015 - 18:33

    C'est très utile, merci du partage !
    avatar
    Yukooo
    MasculinAge : 17Messages : 11

    le Sam 30 Mai 2015 - 14:03

    Je ne savais pas que sa existait :o
    avatar
    Anazera
    MasculinAge : 21Messages : 37

    le Mar 9 Juin 2015 - 3:05

    thc
    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Mer 10 Juin 2015 - 12:04

    Super ! Merci beaucoup^^
    avatar
    Flaura
    FémininAge : 15Messages : 152

    le Ven 12 Juin 2015 - 17:41

    Merci !
    avatar
    Scythe
    FémininAge : 27Messages : 40

    le Lun 15 Juin 2015 - 3:42

    Merci !
    avatar
    KinThoa
    FémininAge : 22Messages : 28

    le Lun 15 Juin 2015 - 19:01

    Le code que je cherchais depuis longtemps !
    avatar
    mmorgo
    FémininAge : 20Messages : 46

    le Jeu 18 Juin 2015 - 18:55

    Merci ! Very Happy
    avatar
    Solid6Snake
    MasculinAge : 34Messages : 146

    le Ven 26 Juin 2015 - 22:00

    Merci.
    avatar
    AlexeB
    FémininAge : 22Messages : 164

    le Mer 1 Juil 2015 - 5:31

    Très joli, merci du partage!
    avatar
    Silverblight
    MasculinAge : 33Messages : 24

    le Lun 6 Juil 2015 - 16:56

    Merci !
    avatar
    Saia
    FémininAge : 23Messages : 186

    le Mar 7 Juil 2015 - 10:43

    Merci!!!!!!



    avatar
    Treasury.
    FémininAge : 19Messages : 28

    le Mer 8 Juil 2015 - 2:22

    Merciii
    avatar
    Ajartielle
    FémininAge : 29Messages : 87

    le Mer 8 Juil 2015 - 3:07

    Je suis curieuse. ^^ Merci !
    avatar
    Adrosh
    MasculinAge : 17Messages : 17

    le Mer 8 Juil 2015 - 10:21

    Merci
    avatar
    killer999
    MasculinAge : 27Messages : 116

    le Jeu 9 Juil 2015 - 13:47

    Thanks
    Sépia
    FémininAge : 21Messages : 70

    le Jeu 9 Juil 2015 - 20:27

    Merci
    avatar
    Mini007
    MasculinAge : 24Messages : 21

    le Ven 10 Juil 2015 - 12:01

    merci
    avatar
    Tatiana.
    FémininAge : 26Messages : 53

    le Sam 1 Aoû 2015 - 19:14

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 23 Mai 2018 - 4:04