Astuce du mardi : afficher les messages sous forme de bulles

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Astuce du mardi : afficher les messages sous forme de bulles

Message par Threax le Mar 21 Juin 2011 - 12:18

Afficher les messages sous forme de bulles


Ce dont vous avez besoin

Pour modifiez les templates, vous devez :
    o Être en version phpBB2
    o Être fondateur du forum
    Il est conseillé également de maîtriser un minimum les templates.


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.
Exemple :
Repérez bien les dimensions de votre image, vous en aurez besoin ensuite : ici, 20x20.

Warning Attention à ne pas prendre une image de plus de 25 à 30px de hauteur Warning
Si votre image est trop grande, la bulle risque d'être plus petite si le message est court et le décalage en haut, rique d'être trop grand pour réussir cet effet.

Changements dans le template :

Panneau d'administration Affichage Templates Général

Editez (edit) 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 :
Code:
<div class="fleche"> </div>

Warning Attention à bien laisser l'espace Warning

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>


Créer la bulle grâce au CSS :

Panneau d'administration Affichage Gestion des couleurs Onglet "Feuille de style 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. 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


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;
    }

Le résultat


Pour réaliser cette astuce sur d'autres versions, et découvrir plusieurs variantes...

... consultez l'intégralité de l'astuce sur le forum :

Cette astuce a été proposée par Macema
Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par devil92140 le Mar 21 Juin 2011 - 13:31




^^ je suis tout a fait d'accord avec cette bulle ^^

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Danux le Mar 21 Juin 2011 - 14:37

Attention, le résultat final peut être différent selon les navigateurs ! Wink

Et notamment avec Explorer.

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

http://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par fleur2 le Mar 21 Juin 2011 - 17:39

bonjour

merci pour toutes ses nouveautés je vais voir se que sa donne chez moi !!lol

courage à vous donc !

fleur

fleur2
*****

Féminin
Messages : 897
Inscrit(e) le : 16/07/2010

http://www.dornat2.com/
fleur2 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par FANCH 56 le Mar 21 Juin 2011 - 18:48

Et avec invision ?

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Threax le Mar 21 Juin 2011 - 18:49

Invision ne permettant pas la modification des templates, cette astuce n'y est pas applicable, désolé... Smile

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par ted_fr le Mar 21 Juin 2011 - 20:10

superbe, cela fonctionne tres bien.
j'ai copié collé le tuto pour le template et le css.
seule difference , j'ai mis le top à 60 et les couleurs.

juste un petit soucis avec la "fleche". en bleu.
suivant les pages, elle se repete un nombre de fois (pas le meme nombre de fois suivant les pages)
sur la gauche de l'ecran.
ce qui genere un decallage



forum : scoot-sud.top-forum.net
j'utilise safari et un mac et suis l'admin.

ted_fr
**

Masculin
Messages : 92
Inscrit(e) le : 17/07/2008

http://scoot-sud.top-forum.net
ted_fr a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Threax le Mar 21 Juin 2011 - 22:44

Vous avez dû copier l'image ailleurs dans le template, je vous invite à ouvrir un sujet dans le forum Gérer l'apparence. Wink

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par FANCH 56 le Mar 21 Juin 2011 - 23:26

Toto456 a écrit:Invision ne permettant pas la modification des templates, cette astuce n'y est pas applicable, désolé... Smile

Merci

Bonne nuit

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par tony59 le Mar 21 Juin 2011 - 23:42

Merci Very Happy RRrrrr et moi qui croyait me démarquer un peu des autres forums en ayant fait ce systeme de bulle il y a quelques semaines, voici l'astuce mis en valeur sur le forum des forum et le système des bulles devenus alors définitivement banalisée, rien de bien exceptionnel maintenant ^^

tony59
*****

Masculin
Messages : 618
Inscrit(e) le : 23/10/2010

http://www.leforumsecret.com
tony59 a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par ted_fr le Mer 22 Juin 2011 - 18:47

merci toto456
probleme resolu

ted_fr
**

Masculin
Messages : 92
Inscrit(e) le : 17/07/2008

http://scoot-sud.top-forum.net
ted_fr a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par demeter1 le Mer 22 Juin 2011 - 21:09

Sympa cette astuce.

demeter1
+ Hyperactif +

Masculin
Messages : 8106
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Lixyr le Mer 22 Juin 2011 - 21:25

@tony59 a écrit:Merci Very Happy RRrrrr et moi qui croyait me démarquer un peu des autres forums en ayant fait ce systeme de bulle il y a quelques semaines, voici l'astuce mis en valeur sur le forum des forum et le système des bulles devenus alors définitivement banalisée, rien de bien exceptionnel maintenant ^^

Mais tout le monde ne souhaite pas avoir ses catégories comme ça. Et puis un code, quand on le cherche c'est facile à trouver, donc autant qu'il soit à disposition et bien expliqué. ^^

Je ne pense pas que vous rencontrerez beaucoup de forums adoptant ce système, même si c'est vraiment sympathique à regarder. Razz

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par tony59 le Mer 22 Juin 2011 - 21:28

Et puis un code, quand on le cherche c'est facile à trouver, donc autant qu'il soit à disposition et bien expliqué. ^^
Oui bien sûr mais encore faut il en avoir l'idée ... et on en a plus forcément l'idée lorsque l'astuce est proposée Very Happy
Oui bien sur je suis d'accord c'était de l'humour mais bon de toute façon même avec ces "bulles" on peut toujours jouer sur le css et faire différemment en améliorant et le personnalisant à notre façon Very Happy

tony59
*****

Masculin
Messages : 618
Inscrit(e) le : 23/10/2010

http://www.leforumsecret.com
tony59 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Papione le Dim 26 Juin 2011 - 21:21

Super astuce Very Happy
C'est très bien expliqué et je suis sûre que ça va beaucoup servir.
Merci ♥

Papione
*****

Féminin
Messages : 614
Inscrit(e) le : 13/09/2010

http://faqharrypotter.creer-forums.com/forum.htm
Papione a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Gatou43 le Lun 27 Juin 2011 - 11:03

Je l'ai fait mais n'ayant pas beaucoup d'expérience je n'est pas du le faire comme il faut ! Voici le resultat sur mon site :

pouvez vous m'aider ?
merci d'avance!

Gatou43
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 15/06/2011

http://Www.les-blablas.superforum.fr
Gatou43 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Skylighting le Lun 27 Juin 2011 - 12:10

Je vais essayer , je ne suis pas sur de réussir reflexion

Skylighting
Nouveau membre

Messages : 1
Inscrit(e) le : 27/06/2011

http://schooleverybody.forumecole.com/
Skylighting a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par neumannsc le Sam 2 Juil 2011 - 14:38

bonjour, j'ai procéder a toute les opération mais j'ai la fléché qui ne s'affiche pas

Voila ce que j’obtiens


Ma version

Le CCS

le changement du code



neumannsc
*

Masculin
Messages : 43
Inscrit(e) le : 10/01/2009

http://quad-balade-sud.forumactif.com/
neumannsc a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par Invité le Sam 2 Juil 2011 - 19:01

Bonjour,

Les annonces ne sont pas destinées aux demandes d'entraide. Pour avoir une réponse aux problèmes rencontrés, ouvrez un sujet das la section Entraide & Support Wink .

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Astuce du mardi : afficher les messages sous forme de bulles

Message par seb03000 le Dim 9 Oct 2011 - 1:33

Pas mal, j'ai tésté et ça fonctionne très bien .

seb03000
**

Masculin
Messages : 78
Inscrit(e) le : 08/08/2010

http://robotique-projet.lebonforum.com/forum
seb03000 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum