Liste des Membres en forme d'Infobulle.

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

Résolu Liste des Membres en forme d'Infobulle.

Message par Victor-57 le Mar 13 Aoû 2013 - 16:07

Bonjour chers membres,

J'aimerais que la liste des membres de mon forum soit en forme d'infobulle. Voici ce que je voudrait en forme d'infobulle :

Mon forum est en Phpbb2. Je suis le fondateur du forum. Mon navigateur est : Google Chrome.

Mais comment faire ?

Cordialement.
Victor-57


Dernière édition par Victor-57 le Dim 18 Aoû 2013 - 10:30, édité 1 fois

Victor-57
****

Masculin
Messages : 335
Inscrit(e) le : 06/03/2013

http://speedcraft.forumofficiel.fr
Victor-57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Neptunia le Mar 13 Aoû 2013 - 17:18

Coucou ^^

Je ne comprends pas votre demande.
Pourquoi faire une info-bulle si c'est pour afficher exactement la même chose que sans infobulle ?

Neptunia
+ Hyperactif +

Féminin
Messages : 10398
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Victor-57 le Mar 13 Aoû 2013 - 18:54

Bonsoir,

Excusez-en moi. Je veux que les informations apparaissent avec ce cadre : , une forme d'infobulle, au lieu qu'elles apparaissent avec le cadre carré comme sur la capture d'écran ci-dessus.

Cordialement.

Victor-57
****

Masculin
Messages : 335
Inscrit(e) le : 06/03/2013

http://speedcraft.forumofficiel.fr
Victor-57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Victor-57 le Mer 14 Aoû 2013 - 19:27

Up ! Sujet toujours d'actualité !

Victor-57
****

Masculin
Messages : 335
Inscrit(e) le : 06/03/2013

http://speedcraft.forumofficiel.fr
Victor-57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Victor-57 le Jeu 15 Aoû 2013 - 19:34

Up ! Sujet toujours d'actualité ! Si vous voulez des précisions en plus, demandez-les moi ! Smile

Victor-57
****

Masculin
Messages : 335
Inscrit(e) le : 06/03/2013

http://speedcraft.forumofficiel.fr
Victor-57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Matriochka le Jeu 15 Aoû 2013 - 21:48

Bonsoir,

Si tu connais le principe de l’infobulle c’est très simple, dans ton template memberlist_body tu appliques simplement ton infobulle comme ceci :

Élément sur lequel on passe la souris : {memberrow.AVATAR_IMG}
Éléments à afficher au passage de la souris : {memberrow.USERNAME}, {memberrow.INTERESTS}, {memberrow.JOINED}, {memberrow.LASTVISIT}, {memberrow.POSTS}, {memberrow.PM_IMG}, {memberrow.WWW_IMG}

Et si tu ne connais pas le principe, une simple recherche sur le Net ou sur ce forum, avec le mot clé infobulle, devrait te permettre de te débrouiller assez facilement Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Victor-57 le Sam 17 Aoû 2013 - 10:08

Bonjour,

J'ai bien cherché sur google le principe de l'infobulle mais on ne me dit pas comment l’insérer dans un template.
Etant très nul en codage, je ne sais point comment l'insérer dans le template.

Cordialement.

Victor-57
****

Masculin
Messages : 335
Inscrit(e) le : 06/03/2013

http://speedcraft.forumofficiel.fr
Victor-57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Milouze14 le Dim 18 Aoû 2013 - 9:18

Salut Victor-57,

on peut arriver à faire quelque chose comme ceci:




Dans le template mentionné par Matriochka (que je salue ) :
Affichage/Templates/Général/memberlist_body

Recherches ceci:
Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">#</th>
      <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
      <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
      <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
      <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
      <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
      <th class="thTop" nowrap="nowrap">{L_PM}</th>
      <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
   </tr>
   <!-- BEGIN memberrow -->
   <tr>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>
      <!-- BEGIN switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
      <!-- END switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr>
      <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
   </tr>
   <!-- END switch_no_user -->
</table>
Supprimes et remplaces par:
Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">#</th>
      <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
      
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      
   </tr>
   <!-- BEGIN memberrow -->
   <tr>
<td class="{memberrow.ROW_CLASS}" align="center">
  <span class="gen"> {memberrow.ROW_NUMBER} </span></td>
<td class="{memberrow.ROW_CLASS}" >
  <div id="info">
<p class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></p>
<div>
<span style="color:#000000;font-size:11px;font-weight:bold;">Nom d'utilisateur:</span><br />
<a style="color:#800000;font-size:11px;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><br />
<span style="color:#000000;font-size:11px;font-weight:bold;">Humeur:</span> <br />
<span style="color:#800000;font-size:11px;"> {memberrow.INTERESTS}</span><br />
  <span style="color:#000000;font-size:11px;font-weight:bold;">Date d'inscription:</span><br />
<span style="color:#800000;font-size:11px;">{memberrow.JOINED}</span><br />
  <span style="color:#000000;font-size:11px;font-weight:bold;">Dernière visite:</span><br />
<span style="color:#800000;font-size:11px;">{memberrow.LASTVISIT}</span><br />
<span style="color:#000000;font-size:11px;font-weight:bold;">Messages:</span><br />
<span style="color:#800000;font-size:11px;">{memberrow.POSTS}</span> <br />
<span style="color:#000000;font-size:11px;font-weight:bold;">Envoyer un message privé:</span>
  <br />{memberrow.PM_IMG}<br />
<span style="color:#000000;font-size:11px;font-weight:bold;">Voir le site Web:</span>
  <br />{memberrow.WWW_IMG} <br />
</div>
</div>
</td>

<!-- BEGIN switch_td_group -->
<td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
<!-- END switch_td_group -->

   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr>
      <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
   </tr>
   <!-- END switch_no_user -->
</table>
Tu peux changer la couleur , la taille de police comme tu le souhaite avant de publier.
La couleur ici est noire pour les intitulés et rouge pour renseignements.


Pense a enregistrer les modifications en cliquant respectivement sur et



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

Colle ceci:
Code:


/*on place l avatar*/
#info
{
position:relative;
z-index:10;
left:30px;
}

/*on cache tout le contenu*/
#info div
{
visibility:hidden;/*on cache le contenu*/
position:absolute;/*ne pas toucher*/
/*Debut de la transition*/
left:200px;/*on place l infobulle a 200px de l avatar*/
bottom:200px;/*on place l infobulle a 200 px du bas*/
width:0;/*on donne une largeur de 0px*/
padding:0;/*on donne aucune marge*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
/*Fin de la transition*/
}
/*au survol de l avatar on affiche tout le contenu*/
#info:hover div
{
visibility:visible;/*on rend visible le contenu*/
text-align:center;/*on centre le texte*/
bottom:0;/* on positionne  l'infobulle a 0px du bas*/
left: 50px;/* on positionne  l'infobulle a 50px de l avatar*/
background-color:#ffffff;/* couleur de fond de l'infobulle */
padding: 10px 5px 10px 5px;/*on donne une marge haut droite bas et gauche*/
border: 1px solid #333333;/* couleur de la bordure de l'infobulle */
width:200px;/* largeur de l'infobulle */
/* bordures arrondis de 10px pour la plupart des navigateurs*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/*on arrondit les bordure de l avatar*/
p.avatar.mini
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Pense à valider les modifications en cliquant sur le bouton "Valider".



C'est un peu barbare comme procédé , mais le résultat est bien là Wink .

J'ai donné une transition pour l'affichage de l'infobulle ,
mais si cette dernière te dérange tu peux modifier en supprimant ce contenu:
Code:
/*Debut de la transition*/
left:200px;/*on place l infobulle a 200px de l avatar*/
bottom:200px;/*on place l infobulle a 200 px du bas*/
width:0;/*on donne une largeur de 0px*/
padding:0;/*on donne aucune marge*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
/*Fin de la transition*/
remplace :
Code:
visibility:hidden;/*on cache le contenu*/
Par
Code:
display:none;
Puis :
Code:
visibility:visible;/*on rend visible le contenu*/
Par:
Code:

display:block;
Voilà, c'est tout pour le moment Wink  .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4569
Inscrit(e) le : 18/04/2005

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

Résolu Re: Liste des Membres en forme d'Infobulle.

Message par Victor-57 le Dim 18 Aoû 2013 - 10:30

Bonjour Milouze,

Merci beaucoup, vous êtes génial !!! Cela marche parfaitement et le rendu est magnifique ! Sujet résolu !

Merci encore,

Cordialement.

Victor-57
****

Masculin
Messages : 335
Inscrit(e) le : 06/03/2013

http://speedcraft.forumofficiel.fr
Victor-57 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