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.

Le Deal du moment : -60%
Camera Surveillance Bébé WiFi sans ...
Voir le deal
19.99 €
Le Deal du moment :
Ventes privées Lacoste : de 30% à 50% de ...
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 19 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 19 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
    Equestria
    Equestria
    FémininAge : 23Messages : 118

    le Sam 10 Sep 2016 - 3:34

    merci!
    Ziktaon
    Ziktaon
    MasculinAge : 28Messages : 843

    le Sam 17 Sep 2016 - 2:47

    Merci, c'est super jolie :)



    Afficher les messages sous forme de bulle BD - Page 19 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    Yunroxas
    FémininAge : 27Messages : 37

    le Sam 24 Sep 2016 - 20:40

    C'est beau merci
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 29Messages : 131

    le Ven 30 Sep 2016 - 12:23

    Marchiiii <3




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    TheDirector
    TheDirector
    MasculinAge : 22Messages : 20

    le Mer 5 Oct 2016 - 13:09

    Merci !! :)
    piros54
    piros54
    MasculinAge : 23Messages : 5

    le Mar 11 Oct 2016 - 13:38

    Merci !
    Mordred Ghost
    Mordred Ghost
    FémininAge : 34Messages : 65

    le Ven 28 Oct 2016 - 21:50

    Merci encore et toujours pour le travail ! c'est super !
    Hivernxl
    Hivernxl
    MasculinAge : 20Messages : 12

    le Sam 29 Oct 2016 - 23:58

    merci bien !
    ju621
    ju621
    MasculinAge : 37Messages : 6

    le Lun 26 Déc 2016 - 12:57

    merci
    Offrande
    Offrande
    FémininAge : 29Messages : 194

    le Mer 4 Jan 2017 - 12:40

    Merci beaucoup :) !
    Ce sujet encadre également la signature, c'est bien ce que je rechercher, merci beaucoup !
    OptimaluS
    OptimaluS
    MasculinAge : 37Messages : 6

    le Mar 10 Jan 2017 - 15:55

    Merci bien :)
    Shupy
    Shupy
    FémininAge : 25Messages : 15

    le Mar 17 Jan 2017 - 19:32

    Merci !
    Shupy
    Shupy
    FémininAge : 25Messages : 15

    le Mar 17 Jan 2017 - 19:36

    Merci !
    Flavien1309
    Flavien1309
    MasculinAge : 27Messages : 39

    le Dim 19 Fév 2017 - 20:04

    merci !
    Marco Z.
    Marco Z.
    MasculinAge : 27Messages : 9

    le Ven 24 Fév 2017 - 9:54

    Merci!
    Erydrin
    Erydrin
    FémininAge : 26Messages : 69

    le Mer 8 Mar 2017 - 22:37

    Merci !
    mijako
    mijako
    FémininAge : 28Messages : 83

    le Jeu 9 Mar 2017 - 0:29

    merci :X
    Senzu11
    Senzu11
    MasculinAge : 29Messages : 1

    le Lun 13 Mar 2017 - 2:28

    Merci!
    Sweetdead
    Sweetdead
    FémininAge : 25Messages : 38

    le Mer 15 Mar 2017 - 19:30

    c'est super, merci !
    tunisiano111
    tunisiano111
    MasculinAge : 24Messages : 57

    le Ven 31 Mar 2017 - 22:58

    Merci
    Melle Lena
    Melle Lena
    FémininAge : 45Messages : 308

    le Dim 16 Avr 2017 - 17:19

    Merci
    warning.sign
    warning.sign
    FémininAge : 30Messages : 58

    le Mar 18 Avr 2017 - 22:47

    merci ! =)
    Tifastrife
    Tifastrife
    FémininAge : 28Messages : 259

    le Mer 26 Juil 2017 - 17:39

    Sympathique ce code, merci ^^



    Les êtres chèrs que nous avons perdus, et les rêves, qui se sont envolés... Ne les oubliez jamais...

    Afficher les messages sous forme de bulle BD - Page 19 090911064129411932
    Anonymous
    Invité

    le Mar 12 Sep 2017 - 10:25

    Merci à toi _8D
    Mirony
    Mirony
    FémininAge : 33Messages : 44

    le Dim 15 Oct 2017 - 2:45

    Merci c'est très beau!
    Contenu sponsorisé


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