[ModernBB] Affichage de la liste des membres

**LilaCH** · **LilaCH** Ven 2 Aoû 2019 - 0:04

Bonsoir forum

J'aime beaucoup la présentation de la liste des membres sur ce forum. Comment reproduire cet affichage sur mon forum ?

Cordialement farao

**Splash** · **Splash** Ven 2 Aoû 2019 - 7:23

Hi Lila,
Je ne retrouve pas le lien direct du tuto mais voici les codes

Direction le template

Panneau d'administration / Affichage /Templates / Général / memberlist_body

[ModernBB] Affichage de la liste des membres Imp11

Avec cette astuce l'intégralité du template sera remplacée.
Pense à faire un backup de ton template actuelle si ce dernier est déjà modifié

Si tu n'es pas à l'aise avec la modification de templates, regarde ce tuto > Clique

Remplace intégralement le template memberlist_body par celui-ci :

Code:: <form action="{S_MODE_ACTION}" method="get"> <table cellspacing="0" cellpadding="5" border="0" align="center" class="tleLMBER"> <tr> <th nowrap="nowrap">{L_ORDER_OR_SELECT}</th> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" border="0" align="center" class="genmed"> <tr> <td width="100%" style="padding:5px 0;">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /> {L_SELECT_SORT_METHOD} {S_MODE_SELECT} {L_ORDER} {S_ORDER_SELECT} {S_HIDDEN_SID} <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td> </tr> </table> </td> </tr> </table> </form> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td class="{memberrow.ROW_CLASS}" align="center">  <div id="LMBER"><div class="MBER"><a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><script type="text/javascript">//<![CDATA[ $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('.MBER').css("background-color", color);});}); $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('.boxLMBER').css("color", color);});});//]]></script><div class="imgLMBER"><div class="msgLMBER">{memberrow.POSTS}</div><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div> <div class="boxLMBER"><div class="nameLMBER"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><div class="joinLMBER">{memberrow.JOINED}</div></div><div class="lstvLMBER">{memberrow.LASTVISIT}</div><div class="btnLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div></div>  <div style="display:none;">{memberrow.GROUPS}</div>  </div></div>  </td></tr>  <tr> <td colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td> </tr>  </table>  <table style="margin:auto; width:765px;" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="nav">{PAGE_NUMBER}</span></td> <td align="right"><span class="nav">{PAGINATION}</span></td> </tr> </table> <br />

Pense à

et à publier les modifications en cliquant sur Valider

Direction le CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS

Place ce code à la CSS :

Code:: /* AFFICHAGE LISTE DES MEMBRES */ #LMBER { margin:auto; width:775px; } /* ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */ .tleLMBER { margin:0 auto 5px; width:765px; background:rgba(255,255,255,0.5); /* MODIFIABLE */ } /* TITRE ENTÊTE */ .tleLMBER th { margin-bottom:5px; padding:5px 0; text-transform:uppercase; font-family:Arial; font-size:16px; background:black; color:white; /* MODIFIABLE */ } /* BLOC MEMBRE */ .MBER { float:left; margin:5px; width:145px; padding-top:10px; text-align:center; background:grey; /* MODIFIABLE - COULEUR PAR DEFAUT */ } /* AVATAR */ .imgLMBER{ margin:auto; margin-bottom:-55px; width:100px; height:100px; border-radius:100px; overflow:hidden; } .imgLMBER img{ width:100px; } /* NOMBRE DE MESSAGES */ .msgLMBER { position:absolute; margin-top:10px; margin-left:10px; width:80px; height:50px; padding-top:30px; border-radius:80px; font-family:Arial; font-size:16px; text-align:center; font-weight:bold; background:rgba(250,250,250,0.7); /* MODIFIABLE */ opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease; } .imgLMBER:hover .msgLMBER { opacity:1; } /* BLOC PSEUDONYME & INSCRIPTION / DERNIERE VISITE / IMAGES MP & WWW */ .boxLMBER { padding:45px 10px 7px; font-family:Arial; text-align:center; background:rgba(255,255,255,0.8); /* MODIFIABLE */ } /* BLOC PSEUDONYME & INSCRIPTION */ .nameLMBER{ margin-top:20px; height:30px; padding:5px 0; text-align:center; text-transform:uppercase; letter-spacing:-0.5px; font-family:Arial; font-size:12px; background:#FEFEFE; /* MODIFIABLE */ } /* DATE INSCRIPTION */ .joinLMBER{ font-size:10px; text-align:center; letter-spacing:0; } /* DERNIERE VISITE */ .lstvLMBER { margin-top:5px; padding:2px 0; background:rgba(255,255,255,0.6); /* MODIFIABLE */ font-size:9px; text-align:center; } /* IMAGES MP & WWW */ .btnLMBER { margin-top:5px; height:15px; } .btnLMBER img{ max-height:15px; filter:grayscale(1); -webkit-filter:grayscale(1); } /* FIN AFFICHAGE LISTE DES MEMBRES */