Fondu Avatar dans la Liste de Membres
Ce LS est pour forum en PHPBB2.
Bonjour,
Alors je propose un LS pour l'affichage de la liste des membres. Il s'agit d'une refonte du LS déposée par Marie(Allhyka) juste Là, qui m'a servi de base pour faire cette LS. J'ai changé pas mal d'éléments afin de l'adapter au codage dans ma section "affichage d'un sujet" donc je me suis ajoutée sur le copyright. A vous de voir si c'est mérité ou non.
Alors voici une mise en page pour l'affichage de la liste des membres. On y affiche les avatars qui, au passage de la souris font un fondu pour afficher les éléments du profil.
Aperçus : Normal et Ouvert
Alors tout d'abord, rendez vous sur le panneau d'administration -> Affichage ->Templates (section Général) -> memberlist_body (liste des membres)
et changer le tout pour celui-ci :
- Code:
<!-- BEGIN switch_user_logged_in -->
<p class="right rightside">{LAST_VISIT_DATE}</p>
<!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<div class="titrePA row2">{PAGE_TITLE}
<form action="{S_MODE_ACTION}" method="get">
<table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
<tr>
<th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
</tr>
<tr>
<td class="row1">
<table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
<tr>
<td width="100%">{L_USER_SELECT} <input type="text" class="post row2" 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>
<!-- BEGIN memberrow -->
<div class="memberlist">
<div class="facebase">
<div class="flip">
<div class="face1"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
</div>
<div class="face2">
<div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
<div class="stat_member"> Arrivé(e) le : {memberrow.JOINED}. <br/><br/>Dernière errance : {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Le joindre : {memberrow.PM_IMG}</div></div></div></div>
</div>
<!-- END memberrow -->
<!-- BEGIN switch_no_user -->
<!-- END switch_no_user -->
<br/><div class="copyright_memberlist">Codé par Allhyka et modifié par Littleelda pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></div>
<!-- BEGIN switch_pagination -->
<table width="100%" 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 />
<!-- END switch_pagination -->
</div>
Enregistrez puis allez dans le CSS (Affichage ->Images et Couleurs (Couleur) -> Feuilles de style CSS) et ajoutez ce code-ci
- Code:
/**** CODE PAR MARIE, MODIFIE PAR LITTLEELDA POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/
/**** AFFICHAGE MEMBRER LISTE****/
.memberlist {
display:inline-block;
vertical-align:top;
margin-bottom: 15px;
margin-right: 10px;
margin-left:10px;
margin-top: 15px;
}
/*** FORMAT DE L'IMAGE DE L'AVATAR ***/
.avatar_member_list img{/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
width:150px;
height:300px;
}
/*** L'ANIMATION FLIP CARD ***/
.facebase, .face1, .face2 {
width: 150px;/*largeur de l'avatar*/
height: 300px;/*hauteur de l'avatar*/
}
.facebase{
margin: 0;
position: relative;
box-shadow : 1px 2px 9px 5px rgba(66,101,90,0.8);
background-color: #9AB8AF;
}
.flip {
-moz-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all 1.5s ease-in-out;
width: 100%;
z-index: 2;
}
.face1 {
background-color: #9AB8AF;
left: 0;
position: absolute;
top: 0;
z-index: 3;
transition: all 1.5s ease-in-out;
}
.face2 {
border-bottom: 2px solid #39210c;
border-top: 2px solid #39210c;
box-sizing: border-box;
font-size: 13px;
left: 0;
overflow: auto;
padding: 15px;
position: absolute;
top: 0;
z-index: 0;
}
.facebase:hover > .face2 {
display: block;
z-index:5;
}
.facebase:hover .face1 {
opacity: 0.2;
filter: alpha(opacity=20);
-moz-opacity:0.5;
z-index:1;
}
/*** DERRIERE L'AVATAR ***/
.pseudo_member {
font-family: Cinzel Decorative, cursive; /**L'écriture**/
text-align: center;
color: #000;
line-height: 100%;
font-size: 14px;
text-transform: uppercase;
}
.stat_member {
font-size: 10px;
text-align: left;
}
.groups {
font-family: arial; /**L'écriture**/
text-align: center;
font-size: 7px;
color: #000;
line-height: 100%;
text-transform: uppercase;
margin-bottom: 5px;
border-bottom:1px solid #000;
}
.copyright_memberlist {
font-size: 10px;
text-align: right;
font-family: georgia;
}
Et enfin enregistrez et normalement tout est bon. Si vous avez des questions, n'hésitez pas à les poser. =)
