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 : -50%
-50% Baskets Nike Dunk Low
Voir le deal
64.99 €
Le Deal du moment : -17%
Casque de réalité virtuelle Meta Quest 2 ...
Voir le deal
249.99 €

    Afficher les messages sous forme de bulle BD

    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Lun 23 Déc 2013 - 15:21

    Source : Threax, forumactif.

    Bonjour ! Je vais aujourd'hui vous apprendre à réaliser ceci : Afficher les messages sous forme de bulle BD 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 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
    Adèle
    Adèle
    FémininAge : 32Messages : 96

    Lun 23 Déc 2013 - 18:21

    Je me posais justement la question depuis un petit moment. Merci o/
    younessdu91
    younessdu91
    MasculinAge : 26Messages : 96

    Lun 23 Déc 2013 - 18:25

    Merci, ça ressemble un peu à l'infobulle Razz
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Lun 23 Déc 2013 - 18:33

    De rien, au plaisir ^o^



    Afficher les messages sous forme de bulle BD Kit_si10
    Anonymous
    Invité

    Lun 23 Déc 2013 - 19:49

    merci
    ketchup
    ketchup
    FémininAge : 26Messages : 11

    Lun 23 Déc 2013 - 21:26

    merci beaucoup :bril:
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Mar 24 Déc 2013 - 11:06

    Merci ! Je cherchais justement ça *^*
    Ananké
    Ananké
    FémininAge : 37Messages : 45

    Mar 24 Déc 2013 - 11:41

    Merci beaucoup pour ce tuto Wink
    Nalex
    Nalex
    FémininAge : 34Messages : 154

    Mar 24 Déc 2013 - 12:39

    Je vais tester! Merci :)



    Afficher les messages sous forme de bulle BD 567962k6yx
    Rhay
    Rhay
    FémininAge : 29Messages : 14

    Mer 25 Déc 2013 - 22:43

    Thanks :)
    Miss Ryuichi
    Miss Ryuichi
    FémininAge : 32Messages : 36

    Jeu 26 Déc 2013 - 10:41

    merciiiiiiii !! =)
    Dream Land School
    Dream Land School
    FémininAge : 35Messages : 100

    Ven 27 Déc 2013 - 4:59

    Merci ^^
    Nanou0001
    Nanou0001
    FémininAge : 39Messages : 50

    Ven 27 Déc 2013 - 12:45

    Merci beaucoup je trouve cela très interessant :)
    Neymar
    Neymar
    MasculinAge : 25Messages : 139

    Ven 27 Déc 2013 - 16:13

    Mercii du partage ! ~
    Chou.
    Chou.
    FémininAge : 27Messages : 22

    Sam 28 Déc 2013 - 16:46

    Merci <3



    Afficher les messages sous forme de bulle BD Siiiig10
    CoinCoinGirl
    CoinCoinGirl
    FémininAge : 29Messages : 30

    Lun 30 Déc 2013 - 15:28

    Maaaaaawci :3
    TUC
    TUC
    FémininAge : 36Messages : 103

    Mer 1 Jan 2014 - 17:44

    merci :)



    Afficher les messages sous forme de bulle BD Tumblr_msx9fygOsJ1qlujrso1_250 Afficher les messages sous forme de bulle BD Tumblr_msx9fygOsJ1qlujrso2_250 Afficher les messages sous forme de bulle BD Tumblr_msx9fygOsJ1qlujrso3_250 Afficher les messages sous forme de bulle BD Tumblr_msx9fygOsJ1qlujrso4_250
    Sleepy ♪
    Sleepy ♪
    FémininAge : 25Messages : 46

    Jeu 2 Jan 2014 - 14:21

    C'est exactement ce que je cherchais. Très utile, merci à toi. :3

    EDIT : Par contre, pour le tout premier code à chercher dans le template, moi je ne l'ai pas. o-ô J'ai déjà modifié ce  (cette ?) template, donc je suppose que c'est pour ça. Du coup, j'ai annulé la modification du template. Mais même après avoir fait ça, je ne trouve pas ce code. Some help. D:
    Everdeen
    Everdeen
    FémininAge : 30Messages : 36

    Jeu 2 Jan 2014 - 15:30

    Merci du partage, depuis le temps que je cherche *.*



    Afficher les messages sous forme de bulle BD Anastasia
    memoriam
    memoriam
    FémininAge : 31Messages : 73

    Jeu 2 Jan 2014 - 20:58

    Merciii  :love: je le cherchais justement!
    mathou_inu
    mathou_inu
    FémininAge : 28Messages : 55

    Jeu 2 Jan 2014 - 23:53

    Merci !



    Neva
    Neva
    FémininAge : 32Messages : 18565

    Ven 3 Jan 2014 - 16:58

    Sleepy ♪ a écrit:C'est exactement ce que je cherchais. Très utile, merci à toi. :3

    EDIT : Par contre, pour le tout premier code à chercher dans le template, moi je ne l'ai pas. o-ô J'ai déjà modifié ce  (cette ?) template, donc je suppose que c'est pour ça. Du coup, j'ai annulé la modification du template. Mais même après avoir fait ça, je ne trouve pas ce code. Some help. D:


    Hey,

    Petit rappel du... rappel ( =D ) affiché en bas de page :

      et si vous avez un souci pour utiliser/personnaliser un code vous devez ouvrir un topic dans cette section.



     
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 31Messages : 42

    Ven 3 Jan 2014 - 21:47

    merci beaucoup ♥
    Neycha
    Neycha
    FémininAge : 30Messages : 58

    Dim 5 Jan 2014 - 1:15

    Depuis le temps que je cherche un tuto pour faire ça !
    Merci milles et une fois *-*
    Susan Storm
    Susan Storm
    FémininAge : 44Messages : 78

    Dim 5 Jan 2014 - 16:00

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:29