Liste des Membres en forme d'Infobulle.
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Liste des Membres en forme d'Infobulle.
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
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
Re: Liste des Membres en forme d'Infobulle.
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 ?
Je ne comprends pas votre demande.
Pourquoi faire une info-bulle si c'est pour afficher exactement la même chose que sans infobulle ?
Re: Liste des Membres en forme d'Infobulle.
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.
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.
Re: Liste des Membres en forme d'Infobulle.
Up ! Sujet toujours d'actualité !
Re: Liste des Membres en forme d'Infobulle.
Up ! Sujet toujours d'actualité ! Si vous voulez des précisions en plus, demandez-les moi !
Re: Liste des Membres en forme d'Infobulle.
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
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
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Liste des Membres en forme d'Infobulle.
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.
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.
Re: Liste des Membres en forme d'Infobulle.
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:
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:
C'est un peu barbare comme procédé , mais le résultat est bien là .
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:
a++
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>
- 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>
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;
}
C'est un peu barbare comme procédé , mais le résultat est bien là .
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*/
- Code:
visibility:hidden;/*on cache le contenu*/
- Code:
display:none;
- Code:
visibility:visible;/*on rend visible le contenu*/
- Code:
display:block;
a++
Invité- Invité
Re: Liste des Membres en forme d'Infobulle.
Bonjour Milouze,
Merci beaucoup, vous êtes génial !!! Cela marche parfaitement et le rendu est magnifique ! Sujet résolu !
Merci encore,
Cordialement.
Merci beaucoup, vous êtes génial !!! Cela marche parfaitement et le rendu est magnifique ! Sujet résolu !
Merci encore,
Cordialement.
Sujets similaires
» Mise en forme liste des sujets
» Mise en forme de la liste des sujets
» Mise en forme de la liste des sujets
» des membres supprimés du forum de nouveau dans la liste des membres
» Afficher le calendrier sous forme de liste.
» Mise en forme de la liste des sujets
» Mise en forme de la liste des sujets
» des membres supprimés du forum de nouveau dans la liste des membres
» Afficher le calendrier sous forme de liste.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum