[PHPBB2] Afficher les informations du profil des messages dans une infobulle

 ,

actuellement les informations du profil dans le module des messages affiche la description
et en dessous son contenu  .

On va garder juste la description et à son survol l'infobulle affichera le contenu   .

L'aperçu imagé:

---

Pour un template vierge:
Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherchez :

Code:


<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>


Le width="150" donne la largeur de la colonne du profil, il faudra
reporter la même valeur dans la C.S.S  .

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

Supprimez le et remplacez par ceci:

Code:


<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>
              <strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            
  <br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br />
  
    <!-- BEGIN profile_field -->
<div class="M14_label">

  <div>{postrow.displayed.profile_field.LABEL}</div>
  <span class="M14_label_bulle">
 {postrow.displayed.profile_field.CONTENT}<br />
  {postrow.displayed.POSTER_RPG}
  
     </span>
</div>

 <!-- END profile_field -->
  <br />
      

  <img src="http://2img.net/i/fa/empty.gif" alt=""style="width:150px;height:1px" />
 </td>



Pour un template modifié ,
il faudra pratiquer ainsi :

Code:


<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                           /* DEBUT DE LA PARTIE A SUPPRIMER*/
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
                        /*FIN DE LA PARTIE A SUPPRIMER*/
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>


Supprimez la partie mentionnée par les commentaires :
 /* DEBUT DE LA PARTIE A SUPPRIMER*/
et

 /*FIN DE LA PARTIE A SUPPRIMER*/
et remplacez par celle-ci:

Code:

   

<!-- BEGIN profile_field -->
<div class="M14_label">
  <div>{postrow.displayed.profile_field.LABEL}</div>
  <span class="M14_label_bulle">
 {postrow.displayed.profile_field.CONTENT}<br />
  {postrow.displayed.POSTER_RPG}
</span>
</div>
 <!-- END profile_field -->
  <br />


Pensez à enregistrer puis à valider en cliquant respectivement sur    puis


Dans la feuille de style:Affichage/Images et Couleurs/Couleurs/Feuille de style

Collez ce contenu:

Code:


/* Le bloc complet*/
.M14_label
{
margin-left:2px;/*on decale le bloc de 2px de la gauche*/
position:relative;/*ne pas toucher*/
margin-top:10px;/*on decale le bloc de 10px du haut*/
width: 150px;/*on redonne la meme largeur que le template*/
}
/* Le libelle */
.M14_label div
{
/*la couleur de police est definie dans le PA*/
font-size:12px;/*la taille de police*/
cursor:pointer;/*Le style de curseur*/
}
/*L infobulle cachee*/
.M14_label_bulle
{
position:absolute;/*ne pas toucher*/
top:2px;/*ne pas toucher*/
left: 140px;/*on positionne l infobulle a 140px de la gauche*/
display:none;/*ne pas toucher*/
padding:5px;/*le texte sera espace de 5px du bord de l infobulle*/
word-wrap: break-word;/*on evite tous debordement*/
color:#000000;/* la couleur de police*/
font-size:10px;/*la taille de police*/
min-height:24px;/*la hauteur minimale de l infobulle*/
min-width:48px;/*la largeur minimale de l infobulle*/
height:auto;/*ne pas toucher*/
max-width:150px;/*la largeur maximale de l infobulle*/
-moz-border-radius: 6px;/*les bordures arrondies*/
-webkit-border-radius: 6px;
border-radius: 6px;
/*l effet autour de l infobulle*/
/*changez la couleur en fonction de votre fond de corps de message*/
-moz-box-shadow: 0px 0px 19px #000000;
-webkit-box-shadow: 0px 0px 19px #000000;
box-shadow: 0px 0px 19px #000000;
}

/*Au survol du libellé on affiche l infobulle */
.M14_label:hover .M14_label_bulle
{
display:block;/*ne pas toucher*/
cursor:pointer;/*Le style de curseur*/
}



Pense à valider les modifications en cliquant sur le bouton   .

Je regarde ça Milouze, merci  

Bon, je fais mon curieux comme d'hab :chewin: . Merci Milouze pour ce partage.

a voir Merci

ça a l'air bien sympas  

Merci

J'ai essayé ça fonctionne bien  
Le souci avec les champs du profil c'est que ça rallonge la hauteur du message surtout quand y en a plus d'une dizaine...
Certains sont indispensables à chaque messages, le sexe, l'âge....mais d'autres n'ont pas besoins d'être visible à chaque fois
J'ai cherché mais j'ai pas trouvé si il y a une autre façon comme sur le forum avec menu déroulant qui apparaîtrait en passant sur l'avatar par exemple ou comme toi Philippe en passant sur "voir son profil"

  ,

tu peux désactiver des champs dans les profils pour diminuer la hauteur  .

Ensuite je ferais prochainement un tutoriel pour répondre à ta demande  .

Mais quand !!!!

C'est bien là le soucis  .

Merci pour le partage

Merci pour le partage .

Merci

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !