[5] Liste des membres

 :: Libre service :: Codage :: Templates Voir le sujet précédent Voir le sujet suivant Aller en bas
Message[5] Liste des membres Mer 3 Juin - 3:34
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad

Remplacer l'intégralité du code par celui-ci :
Code:
<form action="{S_MODE_ACTION}" method="get">
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
     <tr>
     <th nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
     </tr>
     <tr>
     <td>
     <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
     <tr>
     <td width="100%">{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="1" cellpadding="0">
     <!-- BEGIN memberrow -->
     <tr>
     <td align="center"><div class="LMBER"><div class="imgLMBER"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a><div>{memberrow.POSTS} M.</div></div><div class="boxLMBER"><div class="nameLMBER"><div class="mpwLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
     <div class="joinLMBER">inscrit le {memberrow.JOINED}</div><div class="lstvLMBER">dernière visite : {memberrow.LASTVISIT}</div>
     <div class="moodLMBER"><span class="gen">{memberrow.INTERESTS}</span></div>
 <div class="grpLMBER"><a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.grpLMBER').css("background-color", color);});});//]]></script>
 <!-- BEGIN switch_td_group -->
    <div style="opacity:0; margin-top:-15px;">{memberrow.GROUPS}</div>
     <!-- END switch_td_group --></div></div>
     </td>
     </tr>
     <!-- END memberrow -->
     <!-- BEGIN switch_no_user -->
     <tr>
     <td 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>
    <!-- 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 -->

Partie CSS pour avatars 200*320 :
Code:
/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC MEMBRE */
.LMBER {
margin:5px auto; width:800px; height:125px; overflow:hidden;
}
/* BLOC AVATAR & NOMBRE MESSAGES */
.imgLMBER{
display:inline-block; vertical-align:top; margin-top:-38px;
width:200px; height:125px;
}
/* AVATAR MINIATURISE */
.imgLMBER img{
width:125px; height:200px;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
/* NOMBRE DE MESSAGES */
.imgLMBER div{
position:absolute; margin-top:-150px; margin-left:12px;
width:175px; height:60px; padding-top:40px;
background:rgba(250,250,250,0.7); color:black; /* MODIFIABLE */
font-size:11px; opacity:0;
}
.imgLMBER:hover div{
opacity:1;
}
/* BLOC PSEUDONYME / INSCRIPTION / DERNIERE VISITE / HUMEUR / BANDE GROUPE */
.boxLMBER {
display:inline-block; vertical-align:top; width:600px;
}
/* IMAGES MP * PROFIL */
.mpwLMBER {
position:absolute; margin-left:25px; margin-top:-3px;
}
/* PSEUDONYME */
.nameLMBER{
margin-left:15px; width:570px; height:15px; padding:10px;
text-align:right; text-transform:uppercase; letter-spacing:2px;
background:#191919; /* MODIFIABLE */
}
/* DATE INSCRIPTION */
.joinLMBER{
display:inline-block; margin:7px 5px; margin-left:15px;
width:250px; padding:5px;
font-size:11px; text-align:center;
background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
}
/* DERNIERE VISITE */
.lstvLMBER {
display:inline-block; margin:7px 0;
width:310px; padding:5px;
background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
font-size:11px; text-align:left;
}
/* HUMEUR */
.moodLMBER {
margin-left:15px; width:575px; height:20px; padding:5px; overflow:hidden;
text-align:center;
background:rgba(250,250,250,0.2); color:black; /* MODIFIABLE */
}
/* BANDE COULEUR GROUPE */
.grpLMBER {
margin-top:7px; margin-left:15px; width:585px; height:15px;  
}

Partie CSS pour avatars 200*400 :
Code:
/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC MEMBRE */
.LMBER {
margin:5px auto; width:800px; height:125px; overflow:hidden;
}
/* BLOC AVATAR & NOMBRE MESSAGES */
.imgLMBER{
display:inline-block; vertical-align:top; margin-top:-63px;
width:250px; height:125px;
}
/* AVATAR MINIATURISE */
.imgLMBER img{
width:125px; height:250px;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
/* NOMBRE DE MESSAGES */
.imgLMBER div{
position:absolute; margin-top:-175px; margin-left:13px;
width:225px; height:60px; padding-top:40px;
background:rgba(250,250,250,0.7); color:black; /* MODIFIABLE */
font-size:11px; opacity:0;
}
.imgLMBER:hover div{
opacity:1;
}
/* BLOC PSEUDONYME / INSCRIPTION / DERNIERE VISITE / HUMEUR / BANDE GROUPE */
.boxLMBER {
display:inline-block; vertical-align:top; width:550px;
}
/* IMAGES MP * PROFIL */
.mpwLMBER {
position:absolute; margin-left:25px; margin-top:-3px;
}
/* PSEUDONYME */
.nameLMBER{
margin-left:15px; width:520px; height:15px; padding:10px;
text-align:right; text-transform:uppercase; letter-spacing:2px;
background:#191919; /* MODIFIABLE */
}
/* DATE INSCRIPTION */
.joinLMBER{
display:inline-block; margin:7px 5px; margin-left:15px;
width:220px; padding:5px;
font-size:11px; text-align:center;
background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
}
/* DERNIERE VISITE */
.lstvLMBER {
display:inline-block; margin:7px 0;
width:290px; padding:5px;
background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
font-size:11px; text-align:left;
}
/* HUMEUR */
.moodLMBER {
margin-left:15px; width:525px; height:20px; padding:5px; overflow:hidden;
text-align:center;
background:rgba(250,250,250,0.2); color:black; /* MODIFIABLE */
}
/* BANDE COULEUR GROUPE */
.grpLMBER {
margin-top:7px; margin-left:15px; width:535px; height:15px;  
}

Partie CSS pour avatars 250*350 :
Code:
/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC MEMBRE */
.LMBER {
margin:5px auto; width:800px; height:125px; overflow:hidden;
}
/* BLOC AVATAR & NOMBRE MESSAGES */
.imgLMBER{
display:inline-block; vertical-align:top; margin-top:-25px;
width:175px; height:125px;
}
/* AVATAR MINIATURISE */
.imgLMBER img{
width:125px; height:175px;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
/* NOMBRE DE MESSAGES */
.imgLMBER div{
position:absolute; margin-top:-137px; margin-left:15px;
width:145px; height:60px; padding-top:40px;
background:rgba(250,250,250,0.7); color:black; /* MODIFIABLE */
font-size:11px; opacity:0;
}
.imgLMBER:hover div{
opacity:1;
}
/* BLOC PSEUDONYME / INSCRIPTION / DERNIERE VISITE / HUMEUR / BANDE GROUPE */
.boxLMBER {
display:inline-block; vertical-align:top; width:625px;
}
/* IMAGES MP * PROFIL */
.mpwLMBER {
position:absolute; margin-left:25px; margin-top:-3px;
}
/* PSEUDONYME */
.nameLMBER{
margin-left:15px; width:595px; height:15px; padding:10px;
text-align:right; text-transform:uppercase; letter-spacing:2px;
background:#191919; /* MODIFIABLE */
}
/* DATE INSCRIPTION */
.joinLMBER{
display:inline-block; margin:7px 5px; margin-left:15px;
width:255px; padding:5px;
font-size:11px; text-align:center;
background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
}
/* DERNIERE VISITE */
.lstvLMBER {
display:inline-block; margin:7px 0;
width:330px; padding:5px;
background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
font-size:11px; text-align:left;
}
/* HUMEUR */
.moodLMBER {
margin-left:15px; width:600px; height:20px; padding:5px; overflow:hidden;
text-align:center;
background:rgba(250,250,250,0.2); color:black; /* MODIFIABLE */
}
/* BANDE COULEUR GROUPE */
.grpLMBER {
margin-top:7px; margin-left:15px; width:610px; height:15px;  
}
Revenir en haut Aller en bas
MessageRe: [5] Liste des membres Sam 6 Juin - 4:24
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad

Remplacer l'intégralité du code par celui-ci :
Code:
<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" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
 {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
 {L_ORDER} {S_ORDER_SELECT}     &nbsp;
 {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="1" cellpadding="0">
<tr><td class="{memberrow.ROW_CLASS}" align="center">
 <!-- BEGIN memberrow -->
 <div id="LMBER"><div id="MBER"><div class="nameLMBER"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
 <div class="imgLMBER">{memberrow.AVATAR_IMG}<div><div>{memberrow.POSTS} messages<br/><br/>inscrit le {memberrow.JOINED}<br/><br/>dernière visite : {memberrow.LASTVISIT}<br/><br/><span class="gen">{memberrow.INTERESTS}</span></div></div></div>
 <div class="mpwLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div>
 <!-- BEGIN switch_td_group -->
 <span class="gen">{memberrow.GROUPS}</span>
 <!-- END switch_td_group -->
 </div></div>
 <!-- END memberrow -->
 </td>
 </tr>
 <!-- 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>
<!-- 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 -->

Partie CSS pour avatars 200*320 :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:675px; margin:auto;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:200px; height:385px; margin:10px;
}
/* PSEUDONYME */
.nameLMBER{
width:180px; height:15px; padding:10px;
text-align:center; text-transform:uppercase;
}
/* AVATAR MINIATURISE */
.imgLMBER img{
width:200px; height:320px;
}
.imgLMBER div {
position:relative; margin-top:-320px;
width:200px; height:320px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE / HUMEUR */
.imgLMBER div div{
width:180px; height:300px; padding:10px; overflow:auto;
background:rgba(250,250,250,0.6); /* MODIFIABLE */
font-size:11px; text-align:left;
transform:translateY(640px); -webkit-transform:translateY(640px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.imgLMBER:hover div div{
transform:translateY(320px); -webkit-transform:translateY(320px);
}
 /* IMAGES MP * PROFIL */
.mpwLMBER {
position:relative; z-index:3; margin:-10px auto 0 auto;
}

Partie CSS pour avatars 200*400 :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:675px; margin:auto;
}
 /* BLOC MEMBRE */
#MBER {
float:left; width:200px; height:465px; margin:10px;
}
/* PSEUDONYME */
.nameLMBER{
width:180px; height:15px; padding:10px;
text-align:center; text-transform:uppercase;
}
/* AVATAR MINIATURISE */
.imgLMBER img{
width:200px; height:400px;
}
.imgLMBER div {
position:relative; margin-top:-400px;
width:200px; height:400px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE / HUMEUR */
.imgLMBER div div{
width:180px; height:380px; padding:10px; overflow:auto;
background:rgba(250,250,250,0.6); color:black; /* MODIFIABLE */
font-size:11px; text-align:left;
transform:translateY(800px); -webkit-transform:translateY(800px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.imgLMBER:hover div div{
transform:translateY(400px); -webkit-transform:translateY(400px);
}
/* IMAGES MP * PROFIL */
.mpwLMBER {
position:relative; z-index:3; margin:-10px auto 0 auto;
}
Revenir en haut Aller en bas
MessageRe: [5] Liste des membres Sam 19 Déc - 3:56
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad

Remplacer l'intégralité du code par celui-ci :
Code:
<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" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
 {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
 {L_ORDER} {S_ORDER_SELECT}     &nbsp;
 {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="1" cellpadding="0">
<tr><td class="{memberrow.ROW_CLASS}" align="center">
 <!-- BEGIN memberrow -->
 <div id="LMBER"><div id="MBER"><div class="triLMBER"></div><div class="triRMBER"></div><div id="nameLMBER"><div class="nameLMBER"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="mpwLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div><div class="triMBER"></div></div>
 <div class="imgLMBER"><div>{memberrow.AVATAR_IMG}<div><span style="width:90px; margin-right:5px;">{memberrow.POSTS} messages</span><span style="width:95px;">{memberrow.JOINED}</span><br/><span style="width:100%; margin:5px auto;">dernière visite</span><span style="width:100%;">{memberrow.LASTVISIT}</span></div></div></div>
 <!-- BEGIN switch_td_group -->
 <span class="gen">{memberrow.GROUPS}</span>
 <!-- END switch_td_group -->
 </div></div>
 <!-- END memberrow -->
 </td>
 </tr>
 <!-- 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>
<!-- 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 -->

Partie CSS pour avatars 200*320 :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:675px; margin:auto; text-align:center;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:200px; height:345px; margin:15px 10px 10px;
}
/* BLOC PSEUDONYME */
#nameLMBER {
position:absolute; z-index:3; margin-top:-10px; margin-left:85px; width:100px; height:auto;
}
/* OMBRES BLOC PSEUDONYME */
.triLMBER {
position:absolute; z-index:2; margin-top:-10px; margin-left:80px;
width:0; height:0; border-style:solid; border-width:0 0 15px 5px; border-color:transparent;
border-bottom-color:black; /* MODIFIABLE */
}
.triRMBER {
position:absolute; margin-top:-10px; margin-left:185px;
width:0; height:0; border-style:solid; border-width:15px 0 0 5px; border-color:transparent;
border-left-color:black; /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER{
width:80px; padding:10px;
text-align:center; text-transform:uppercase;
background:rgba(250,250,250,0.9); /* MODIFIABLE */
}
/* IMAGES MP * PROFIL */
.mpwLMBER {
width:100px; text-align:center;
background:rgba(250,250,250,0.9); /* MODIFIABLE */
}
/* TRIANGLE BAS PSEUDONYME */
.triMBER {
width:0; height:0; border-style:solid; border-width:20px 50px 0 50px; border-color:transparent;
border-top-color:rgba(250,250,250,0.9); /* MODIFIABLE */
}
/* AVATAR MINIATURISE */
.imgLMBER img{
position:absolute; z-index:2; margin-left:-100px; width:200px; height:320px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
.imgLMBER {
width:200px; height:320px; overflow:hidden;
}
.imgLMBER div {
position:relative;
width:200px; height:320px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div{
width:190px; height:145px; padding:5px; overflow:hidden;
background:rgba(0,0,0,0.6); /* MODIFIABLE */
font-size:11px; text-align:center;
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.imgLMBER:hover div div{
transform:translateY(240px); -webkit-transform:translateY(240px);
}
.imgLMBER:hover img{
transform:translateY(-85px); -webkit-transform:translateY(-85px);
}
/* CONTENU MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div span{
display:inline-block; height:16px; padding-top:4px; text-align:center; text-transform:uppercase; font-size:10px;
background:rgba(250,250,250,0.6); color:black; /* MODIFIABLE */
}

Partie CSS pour avatars 200*400 :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:675px; margin:auto; text-align:center;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:200px; height:425px; margin:15px 10px 10px;
}
/* BLOC PSEUDONYME */
#nameLMBER {
position:absolute; z-index:3; margin-top:-10px; margin-left:85px; width:100px; height:auto;
}
/* OMBRES BLOC PSEUDONYME */
.triLMBER {
position:absolute; z-index:2; margin-top:-10px; margin-left:80px;
width:0; height:0; border-style:solid; border-width:0 0 15px 5px; border-color:transparent;
border-bottom-color:black; /* MODIFIABLE */
}
.triRMBER {
position:absolute; margin-top:-10px; margin-left:185px;
width:0; height:0; border-style:solid; border-width:15px 0 0 5px; border-color:transparent;
border-left-color:black; /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER{
width:80px; padding:10px;
text-align:center; text-transform:uppercase;
background:rgba(250,250,250,0.9); /* MODIFIABLE */
}
/* IMAGES MP * PROFIL */
.mpwLMBER {
width:100px; text-align:center;
background:rgba(250,250,250,0.9); /* MODIFIABLE */
}
/* TRIANGLE BAS PSEUDONYME */
.triMBER {
width:0; height:0; border-style:solid; border-width:20px 50px 0 50px; border-color:transparent;
border-top-color:rgba(250,250,250,0.9); /* MODIFIABLE */
}
/* AVATAR MINIATURISE */
.imgLMBER img{
position:absolute; z-index:2; margin-left:-100px; width:200px; height:400px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
.imgLMBER {
width:200px; height:400px; overflow:hidden;
}
.imgLMBER div {
position:relative;
width:200px; height:400px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div{
margin-top:75px;
width:190px; height:145px; padding:5px; overflow:hidden;
background:rgba(0,0,0,0.6); /* MODIFIABLE */
font-size:11px; text-align:center;
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.imgLMBER:hover div div{
transform:translateY(245px); -webkit-transform:translateY(245px);
}
.imgLMBER:hover img{
transform:translateY(-85px); -webkit-transform:translateY(-85px);
}
/* CONTENU MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div span{
display:inline-block; height:16px; padding-top:4px; text-align:center; text-transform:uppercase; font-size:10px;
background:rgba(250,250,250,0.6); color:black; /* MODIFIABLE */
}
Revenir en haut Aller en bas
MessageRe: [5] Liste des membres Jeu 24 Déc - 2:34
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad

Remplacer l'intégralité du code par celui-ci :
Code:
<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" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
 {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
 {L_ORDER} {S_ORDER_SELECT}     &nbsp;
 {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="1" cellpadding="0">
<tr><td class="{memberrow.ROW_CLASS}" align="center">
 <!-- BEGIN memberrow -->
 <div id="LMBER"><div id="MBER"><div class="nameLMBER"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
 <div class="stsLMBER"><div>{memberrow.POSTS} M.</div><div>{memberrow.JOINED}</div><div>{memberrow.LASTVISIT}</div><div class="mpwLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div></div>
 <div id="imgLMBER"><div class="imgLMBER"><div>{memberrow.AVATAR_IMG}</div><span>{memberrow.INTERESTS}</span></div></div>
 <!-- BEGIN switch_td_group -->
 <span class="grpLMBER">{memberrow.GROUPS}</span>
 <!-- END switch_td_group -->
 </div></div>
 <!-- END memberrow -->
 </td>
 </tr>
 <!-- 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>
<!-- 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 -->

Partie CSS pour avatars 200*320 :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:700px; margin:auto;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:220px; height:210px; margin:5px;
}
/* PSEUDONYME */
.nameLMBER{
margin-bottom:5px;
width:215px; padding-left:5px;
text-align:left; text-transform:uppercase;
}
/* INFORMATIONS */
.stsLMBER {
display:inline-block; vertical-align:top;
width:100px; font-size:11px;
}
/* CONTENU INFORMATIONS */
.stsLMBER div{
margin:5px 0; padding:5px;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGES PROFIL & WWW */
.mpwLMBER {
background:none !important;
}
/* AVATAR MINIATURISE */
#imgLMBER {
display:inline-block; margin-left:10px; width:100px; height:160px; overflow:hidden;
}
.imgLMBER {
position:relative;
width:100px; height:160px; overflow:hidden;
}
.imgLMBER div img{
position:absolute; margin-left:-50px; width:100px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
#imgLMBER:hover .imgLMBER div img{
transform:translateX(100px); -webkit-transform:translateX(100px);
}
/* HUMEUR */
.imgLMBER span {
position:absolute;
width:90px; height:150px; padding:5px; overflow:auto;
text-align:justify; font-size:10px;
background:rgba(0,0,0,0.6); color:white; /* MODIFIABLE */
transform:translateX(-150px); -webkit-transform:translateX(-150px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
#imgLMBER:hover .imgLMBER span{
transform:translateX(-50px); -webkit-transform:translateX(-50px);
}
/* AFFICHAGE GROUPES LISTE DES MEMBRES */
.grpLMBER {
display:block; margin:5px auto; padding:5px;
text-transform:uppercase; font-weight:bold; font-size:12px;
border:1px solid black; /* MODIFIABLE */
}

Partie CSS pour avatars 200*400 :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:700px; margin:auto;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:220px; height:245px; margin:5px;
}
/* PSEUDONYME */
.nameLMBER{
margin-bottom:5px;
width:215px; padding-left:5px;
text-align:left; text-transform:uppercase;
}
/* INFORMATIONS */
.stsLMBER {
display:inline-block; vertical-align:top;
width:100px; font-size:11px;
}
/* CONTENU INFORMATIONS */
.stsLMBER div{
margin:5px 0; padding:5px;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGES PROFIL & WWW */
.mpwLMBER {
background:none !important;
}
/* AVATAR MINIATURISE */
#imgLMBER {
display:inline-block; margin-left:10px; width:100px; height:190px; overflow:hidden;
}
.imgLMBER {
position:relative;
width:100px; height:200px; overflow:hidden;
}
.imgLMBER div img{
position:absolute; margin-left:-50px; width:100px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
#imgLMBER:hover .imgLMBER div img{
transform:translateX(100px); -webkit-transform:translateX(100px);
}
/* HUMEUR */
.imgLMBER span {
position:absolute;
width:90px; height:190px; padding:5px; overflow:auto;
text-align:justify; font-size:10px;
background:rgba(0,0,0,0.6); color:white; /* MODIFIABLE */
transform:translateX(-150px); -webkit-transform:translateX(-150px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
#imgLMBER:hover .imgLMBER span{
transform:translateX(-50px); -webkit-transform:translateX(-50px);
}
/* AFFICHAGE GROUPES LISTE DES MEMBRES */
.grpLMBER {
display:block; margin:5px auto; padding:5px;
text-transform:uppercase; font-weight:bold; font-size:12px;
border:1px solid black; /* MODIFIABLE */
}
Revenir en haut Aller en bas
MessageRe: [5] Liste des membres Jeu 14 Jan - 7:31
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad

Remplacer l'intégralité du code par celui-ci :
Code:
<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" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
 {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
 {L_ORDER} {S_ORDER_SELECT}     &nbsp;
 {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="1" cellpadding="0">
<tr><td class="{memberrow.ROW_CLASS}" align="center">
 <!-- BEGIN memberrow -->
 <div id="LMBER"><div id="MBER"><div id="imgLMBER"><div class="imgLMBER"><div>{memberrow.AVATAR_IMG}</div></div><div class="nameLMBER"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="stsLMBER"><div style="margin-right:10px;">{memberrow.POSTS} M.</div><div>{memberrow.JOINED}</div><br/><b>Dernière visite :</b> {memberrow.LASTVISIT}<br/><b>Humeur :</b> {memberrow.INTERESTS}<div class="mpwLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div></div></div>
 <!-- BEGIN switch_td_group -->
 <span class="grpLMBER">{memberrow.GROUPS}</span>
 <!-- END switch_td_group -->
 </div></div>
 <!-- END memberrow -->
 </td>
 </tr>
 <!-- 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>
<!-- 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 -->

Partie CSS :
Code:
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:700px; margin:auto;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:220px; height:195px; margin:5px;
}
/* BLOC AVATAR */
#imgLMBER {
width:200px; height:160px; overflow:hidden;
}
/* SURVOL BLOC AVATAR */
#imgLMBER:hover {
box-shadow:0 0 3px rgba(0,0,0,0.1); /* MODIFIABLE */
}
/* AVATAR */
.imgLMBER {
position:relative;
width:200px; height:160px; overflow:hidden;
}
.imgLMBER div img{
position:absolute; margin-left:-100px; width:200px;
}
/* PSEUDONYME */
.nameLMBER{
position:absolute; z-index:3; margin-top:-145px; margin-left:-15px;
width:150px; height:15px; padding:5px;
text-align:left; text-transform:uppercase;
background:white; /* MODIFIABLE */
transform:rotate(-5deg); -webkit-transform:rotate(-5deg);
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
#imgLMBER:hover .nameLMBER{
margin-top:-160px; margin-left:0;
width:190px; height:20px; text-align:center;
transform:rotate(0deg); -webkit-transform:rotate(0deg);
}
/* INFORMATIONS */
.stsLMBER {
position:absolute; margin-top:-130px;
width:180px; height:110px; padding:10px; overflow:auto;
font-size:9px; text-align:justify;
background:rgba(0,0,0,0.7); color:white !important; /* MODIFIABLE */
opacity:0; transition:opacity 0.35s linear; -webkit-transition:opacity 0.35s linear;
}
#imgLMBER:hover .stsLMBER {
opacity:1;
}
/* NOMBRE MESSAGES & DATE D'INSCRIPTION */
.stsLMBER div{
display:inline-block; margin-bottom:5px;
width:75px; padding:5px; text-align:center;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGES PROFIL & WWW */
.mpwLMBER {
display:block !important; background:none !important;
width:160px !important;
}
/* AFFICHAGE GROUPES LISTE DES MEMBRES */
.grpLMBER {
display:block; margin:5px auto;
width:190px; padding:5px;
text-transform:uppercase; font-weight:bold; font-size:12px;
border:1px solid black; /* MODIFIABLE */
}

Taille minimale des avatars : 200*160
Revenir en haut Aller en bas
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CCCrush. :: Libre service :: Codage :: Templates-