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 :
Dates stocks PS5 : stocks imminents chez Amazon et ...
Voir le deal
Le Deal du moment : -38%
Lot de 3 Tasses Empilables en Céramique – ...
Voir le deal
10.49 €

    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 2 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 2 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
    Rococo
    Rococo
    MasculinAge : 25Messages : 28

    le Dim 5 Jan 2014 - 17:31

    Merci
    Sakira
    Sakira
    FémininAge : 28Messages : 89

    le Dim 5 Jan 2014 - 21:19

    Merci pour ce tuto ^^



    Bientôt peut être o/
    Dépendra de ma motiv'
    shibari
    shibari
    MasculinAge : 25Messages : 280

    le Mar 7 Jan 2014 - 1:03

    TKS



    Afficher les messages sous forme de bulle BD - Page 2 140117011601839279

    Merci Dakota pour ce kit.
    athenais
    athenais
    FémininAge : 33Messages : 98

    le Mar 7 Jan 2014 - 12:23

    merci  :love: 
    pops44
    pops44
    MasculinAge : 27Messages : 28

    le Mar 7 Jan 2014 - 16:06

    merci
    Shany
    Shany
    FémininAge : 36Messages : 59

    le Mer 8 Jan 2014 - 15:12

    Merci
    louha
    louha
    FémininAge : 33Messages : 213

    le Mer 8 Jan 2014 - 19:22

    Merci beaucoup !
    EverLiam
    EverLiam
    FémininAge : 32Messages : 1052

    le Jeu 9 Jan 2014 - 20:27

    magnifique






    Nîniel
    Nîniel
    FémininAge : 25Messages : 70

    le Jeu 9 Jan 2014 - 23:24

    Mici



    Afficher les messages sous forme de bulle BD - Page 2 1384099300-nini-nu-signa
    Apokalip'z
    Apokalip'z
    MasculinAge : 27Messages : 290

    le Ven 10 Jan 2014 - 18:35

    génial, c'est ce que je cherchais^^
    Mercie Len Wink



    Afficher les messages sous forme de bulle BD - Page 2 1424818313-sign-apoka
    Malizia.
    Malizia.
    FémininAge : 24Messages : 90

    le Sam 11 Jan 2014 - 5:24

    Thanks ♥
    Titia
    Titia
    FémininAge : 29Messages : 63

    le Dim 12 Jan 2014 - 11:15

    Merci beaucoup du partage



    Afficher les messages sous forme de bulle BD - Page 2 Pica1ctmp
    Harumi
    Harumi
    FémininAge : 22Messages : 21

    le Mar 14 Jan 2014 - 22:25

    Merci !
    Schnappi
    Schnappi
    FémininAge : 29Messages : 113

    le Mar 14 Jan 2014 - 23:42

    merci Very Happy
    MonsterYuki
    MonsterYuki
    FémininAge : 25Messages : 22

    le Mer 15 Jan 2014 - 18:24

    Merci!



    Afficher les messages sous forme de bulle BD - Page 2 Firewo10
    Tyarra
    Tyarra
    FémininAge : 20Messages : 73

    le Mer 15 Jan 2014 - 23:17

    Thanks Wink



    Afficher les messages sous forme de bulle BD - Page 2 64385520JR
    Stanislava
    Stanislava
    FémininAge : 25Messages : 102

    le Sam 18 Jan 2014 - 11:00

    Je cherchais ce tuto un petit moment déjà, merci pour le partage o/



    Afficher les messages sous forme de bulle BD - Page 2 777748signnu
    Enidech
    Enidech
    MasculinAge : 30Messages : 39

    le Sam 18 Jan 2014 - 14:02

    Ha ! Bonjour et merci, c'est justement ce que je cherchais Very Happy
    xL2auurie
    xL2auurie
    FémininAge : 26Messages : 23

    le Dim 19 Jan 2014 - 23:07

    Merci !
    RozenBreizh
    RozenBreizh
    FémininAge : 29Messages : 1409

    le Lun 20 Jan 2014 - 15:10

    Merci cette forme de message est de plus en plus rependue et je trouve ce style de codage fort sympathique :)
    Grande
    Grande
    FémininAge : 33Messages : 207

    le Mar 21 Jan 2014 - 2:00

    Merci



    Afficher les messages sous forme de bulle BD - Page 2 171074gwenj10
    Tchii
    Tchii
    FémininAge : 34Messages : 262

    le Mar 21 Jan 2014 - 23:59

    Salut!
    Merci pour ce petit tuto!
    A trés vite!
    Tchii!
    ela__mars
    ela__mars
    FémininAge : 36Messages : 10

    le Mer 22 Jan 2014 - 2:05

    Merci
    Doupi
    Doupi
    FémininAge : 32Messages : 63

    le Ven 24 Jan 2014 - 23:06

    Et voilà le tuto parfait pour terminer ma mise en page. Merci  Very Happy 
    Tameless+
    Tameless+
    FémininAge : 23Messages : 252

    le Sam 25 Jan 2014 - 17:51

    WOW ** merci !



    Afficher les messages sous forme de bulle BD - Page 2 LwrfNGA
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Jan 2021 - 21:54