Liste des Membres #1

Codes

Code:

<link href="https://fonts.googleapis.com/css?family=Raleway:200,400,700&display=swap" rel="stylesheet">
<div class="memberlist_t">
 Liste des membres
</div>
<form action="{S_MODE_ACTION}" method="get">
 <div class="tli-fields">
 <div>
 <input type="text" placeholder="Pseudo" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
 {S_MODE_SELECT}{S_ORDER_SELECT}
 <input type="submit" name="submit" value="{L_SUBMIT}" />
 </div>
 </div>
 {S_HIDDEN_SID}  
</form>
<ul class="tli-member">
 
 <!-- BEGIN memberrow -->
 <div class="content_list">
  
 <div class="block_left_list">
                  <a class="gen tli-pseudo js-title" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
 <div class="lastvisit_list jsTEST">
 Dernière visite {memberrow.LASTVISIT}
 </div>
 <div class="joinedlist jsB">
 Inscrit le {memberrow.JOINED}
 </div>
 <span class="infosmember jsTEST">{memberrow.POSTS} messages</span>
 <span class="infosmember jsTEST">voir le  <a href="{memberrow.U_VIEWPROFILE}">Profil</a></span>
 <span class="infosmember jsTEST">{memberrow.PM_IMG}</span>
 </div>
 <div class="block_rightmember">
 <a href="{memberrow.U_VIEWPROFILE}"><span>{memberrow.AVATAR_IMG}</span></a>
 <div class="blocdeco jsTEST"></div>
 </div>
 </div>
 <!-- END memberrow -->
</ul>
<!-- 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 -->
<!-- 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 -->
<script type="text/javascript">
//<![CDATA[
$( document ).ready(function() {
$('.content_list').each(function(){
var color = $(this).find('span').css("color");
$(this).find('.jsTEST').css("background-color", color);
});
});
//]]>
</script>
  
  <script type="text/javascript">
//<![CDATA[
$( document ).ready(function() {
$('.content_list').each(function(){
var color = $(this).find('span').css("color");
$(this).find('.jsB').css("border-color", color);
});
});
//]]>
</script>
  
    <script type="text/javascript">
//<![CDATA[
$( document ).ready(function() {
$('.content_list').each(function(){
var color = $(this).find('span').css("color");
$(this).find('.jsB').css("color", color);
});
});
//]]>
</script>

Code:

/* liste des membres | artemis pour artifices */

.memberlist_t {
  width: 800px;
  height: 90px;
 background: -webkit-gradient(linear, left top, right top, from(#fedc45), to(#fb7099));
 background: -o-linear-gradient(left, #fedc45, #fb7099);
 background: linear-gradient(to right, #fedc45, #fb7099);
  border: 1px solid white;
  outline: 1px solid white;
  outline-offset: -10px;
  margin: auto;
  text-align: center;
  color: white;
  font: 15px raleway;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 34px;
  font-weight: 700;
  margin-bottom: 10px;
}

.tli-member {
  width: 800px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
}

.content_list {
  width: 395px;
  height: 150px;
  background: #f7f7f7;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #e2e2e2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
  
}

.block_left_list {
  width: 265px;
  height: 145px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.block_left_list > a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font: 20px raleway;
  
 
}

.lastvisit_list {
  width: 100%;
  height: 15px;
  color: white;
  text-align: center;
  font: 11px calibri;
  text-transform: uppercase;
  line-height: 15px;
  letter-spacing: 1px;
  background: gray;
}

.joinedlist {
  width: 100%;
  height: 15px;
  border: 1px solid gray;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: gray;
  text-align: center;
  font: 11px calibri;
  text-transform: uppercase;
}

.block_left_list > span {
  width: 75px;
  height: 45px;
  background: gray;
  display: inline-block;
  text-align: center;
  color: white;
  font: 11px calibri;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px 10px 10px 10px;
  line-height: 8px;
}

.block_left_list > span > a {
  color: white;
  text-decoration: none;
}

.block_left_list > span img {
  margin-top: -4px;
}

.block_rightmember {
  width: 120px;
  position: relative;
}

.block_rightmember img {
  width: 80px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 5px solid white;
  margin: 10px 0;
  position: relative;
  z-index: 2;
  
}

.blocdeco {
  width: 65px;
  height: 148px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.tli-fields {
  width: 800px;
  margin: auto;
  text-align: center;
  margin-bottom: 10px;
}

.tli-fields input {
  border: 1px solid #e2e2e2;
  background: white;
}

.tli-fields select {
  border: 1px solid #e2e2e2;
}