code à insérer dans l'html

Code:

<link type="text/css" rel="stylesheet" href="http://strandhogg.fr/epicode/css/34.css?color1p=e7c571&color2p=d8a752&color3p=263644&polices="/>

OU ci-dessous le css commenté et non minifié, à copier directement :

Code:

/******************************************************
CSS de @linus pour Epicode : http://epicode.bbactif.com
Téléchargé le 22/07/2018
En cas de pépin contactez-moi par MP sur Epicode!
******************************************************/

/*** import google fonts ***/
@import 'http://fonts.googleapis.com/css?family=Oswald';

/*reset des styles par défault du navigateur*/
.template-linus-34 ul{ list-style:none; }
.template-linus-34 ul, .template-linus-34 h5, .template-linus-34 h4, .template-linus-34 h3, .template-linus-34 h2, .template-linus-34 h1, .template-linus-34 p, .template-linus-34 figure{margin:0;padding:0;font-weight:normal;}
.template-linus-34 a, .template-linus-34 a:hover{text-decoration:none;text-decoration:none!important;}
.template-linus-34 a img{border:none;}

.template-linus-34 {
  font-size:12px;
  line-height:15px;
  font-family:arial,serif;
  overflow:hidden;
  background:#263644;
  min-width:670px;
  margin:auto;
}

.template-linus-34 .tli-pseudo{
  display:block;
  font-family:"Oswald";
  text-transform:uppercase;
  font-size: 14px;
  line-height: 16px;
  margin-bottom:3px;
  color:#e7c571;
}

.template-linus-34 .tli-pseudo strong,
.template-linus-34 .tli-pseudo b{
  font-weight:normal!important;
}

.template-linus-34 .tli-avatar{
  width:60px;
  height:60px;
  border-radius:100%;
  overflow:hidden;
  position:relative;
  background:#202e3a;
  flex-shrink:0;
  flex-grow:0;
  transition:transform 1s;
  -webkit-transition:-webkit-transform 1s;
}

.template-linus-34 .tli-avatar:hover{
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

.template-linus-34 .tli-avatar>a>span,
.template-linus-34 .tli-avatar>a{
  position:absolute;
  width:calc(100% - 4px);
  height:calc(100% - 4px);
  left:0;
  top:0;
  margin:2px;
  border-radius:100%;
  overflow:hidden;
}

.template-linus-34 .tli-avatar>a{
  z-index:10;
  background:#263644;
}

.template-linus-34 .tli-avatar>a img{
  position:absolute;
  width:100%;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

.template-linus-34 .tli-lastvisit:not([data-val="Jamais"]):before{
  content:'dernière visite ';
}

.template-linus-34 .tli-lastvisit[data-val="Jamais"]{
  font-size:0;
  line-height:0;
}

.template-linus-34 .tli-lastvisit[data-val="Jamais"]:before{
  content:'aucune visite';
  font-size:11px;
  line-height:12px;
}

.template-linus-34 .tli-lastvisit{
  text-transform:lowercase;
}

.template-linus-34 .tli-posts{
  background:#202e3a;
  color: white;
  font-size: 7px;
  text-transform: uppercase;
  padding:4px;
  margin-right:5px; 
}

.template-linus-34 .tli-posts:after{
  content:'messages';
  margin-left:2px;
}

.template-linus-34 .tli-posts[data-val="0"]:after,
.template-linus-34 .tli-posts[data-val="1"]:after{
  content:'message';
  margin-left:2px;
}

.template-linus-34 .tli-buttons{
  margin-top:6px;
}

.template-linus-34 .tli-buttons img{
  display:none;
}

.template-linus-34 .tli-buttons a[href^="/privmsg"]:before{
  content:'MP';
}

.template-linus-34 .tli-buttons a{
  background:#202e3a;
  color: white;
  font-size: 7px;
  text-transform: uppercase;
  padding:4px;
  margin-right:5px;
}

.template-linus-34 .tli-members{
  display:flex;
  flex-wrap:wrap;
}

.template-linus-34 .tli-members li:nth-child(3n):not(:nth-last-child(1)),
.template-linus-34 .tli-members li:nth-child(3n+2):not(:nth-last-child(1)):not(:nth-last-child(2)),
.template-linus-34 .tli-members li:nth-child(3n+1):not(:nth-last-child(1)):not(:nth-last-child(2)):not(:nth-last-child(3)){
  border-bottom:1px solid #243341!important;
}

.template-linus-34 .tli-members li:nth-child(3n+1),
.template-linus-34 .tli-members li:nth-child(3n+2){
  border-right:1px solid #243341!important;
}

.template-linus-34 .tli-members li{
  display: flex;
  align-items: center;
  padding: 20px;
  width: 33.33%;
  box-sizing: border-box;
  overflow: hidden;
}

.template-linus-34 .tli-infos{
  padding-left:10px;
  font-size:11px;
  line-height:12px;
  color:gray;
}

/*** FORMULAIRE ***/
.template-linus-34 .tli-title{
  text-align:right;
  text-transform:uppercase;
  font-family:"Oswald",serif;
  font-size: 20px;
  line-height: 20px;
  padding:20px 30px;
  background: #e7c571;
  background: -webkit-linear-gradient(to right, #e7c571, #d8a752);
  background: linear-gradient(to right, #e7c571, #d8a752);
  color:white;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  font-style:italic;
  width:calc(33.33% - 60px);
  display:flex;
  align-items:center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  position:relative;
}

.template-linus-34 .tli-title:after{
  content:' ';
  display:block;
  width:0;
  height:0;
  border-left:10px solid #d8a752;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  position:absolute;
  top:0;
  bottom:0;
  right:-10px;
  margin:auto;
}

.template-linus-34 form{
  background: #22313d;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  position:relative;
  display:flex;
}

.template-linus-34 .tli-fields{
  margin:20px 20px 20px 25px;
  width:100%;
}

.template-linus-34 .tli-fields>div{
  min-height:30px;
  border-radius: 30px;
  overflow: hidden;
  height:100%;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
}

.template-linus-34 input[type="submit"]{
  text-transform: uppercase;
  width: 45px!important;
  text-align: center;
  background: #d8a752;
  color:white;
  font-family:"Oswald",serif;
  font-size: 12px;
  line-height: 12px;
  vertical-align: middle;
  margin:0!important;
  padding:0 5px 0 0!important;
  border-radius:0!important;
  text-shadow:none!important;
  cursor:pointer;
}

.template-linus-34 input[type="text"]{
  width:calc(100% - (120px*2) - 45px);
}

.template-linus-34 input[type="text"],
.template-linus-34 select{
  padding:0 10px;
  background:white!important;
  font-size:11px!important;
  line-height:30px!important;
  font-family:arial!important;
  margin:0!important;
  vertical-align: middle;
  border-radius:0!important;
  text-shadow:none!important;
}

.template-linus-34 input,
.template-linus-34 button,
.template-linus-34 select{
  outline:none;
  border:none!important;
  height:100%;
  box-sizing: border-box;
  display:inline-block;
}

.template-linus-34 select{
  border-left:1px solid rgba(0,0,0,0.05)!important;
  width:120px;
}

.template-linus-34 .tli-pagination{
  font-size:0!important;
  line-height:0!important;
}

.template-linus-34 .tli-pagination:not(:empty){
  border-top:1px solid #243341!important;
  padding:10px;
}

.template-linus-34 .tli-pagination:not(:empty):before{
  content:'Pagination : ';
  font-size:10px!important;
  line-height:10px!important;
  text-transform:uppercase;
  color:gray;
}

.template-linus-34 .tli-pagination>b,
.template-linus-34 .tli-pagination>a[href^="/search"]{
  font-size:12px!important;
  line-height:12px!important;
  margin-left:3px;
  font-weight:normal!important;
}

.template-linus-34 .tli-pagination>a[href^="/search"]{
  color:#e7c571!important;
}

html
dans "affichage" du panneau d'administration > section templates > "général", modifiez le template memberlist_body

supprimez tout le code et remplacez le par le code suivant :

Code:

<div class="template-linus-34">
  <form action="{S_MODE_ACTION}" method="get">
    <h2 class="tli-title">Recherche d'utilisateurs</h2>
    <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-members">   
    <!-- BEGIN memberrow -->
    <li class="tli-member">
      <div class="tli-avatar">
        <a href="{memberrow.U_VIEWPROFILE}">
          <span>{memberrow.AVATAR_IMG}</span>
        </a>
      </div>
      <div class="tli-infos">
        <a class="tli-pseudo" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
        <div class="tli-joined">inscrit le {memberrow.JOINED}</div>
        <div class="tli-lastvisit" data-val="{memberrow.LASTVISIT}">{memberrow.LASTVISIT}</div>
        <div class="tli-buttons">
          <span class="tli-posts" data-val="{memberrow.POSTS}">{memberrow.POSTS}</span>
          {memberrow.PM_IMG}
          <a href="{memberrow.U_VIEWPROFILE}">Profil</a>
        </div>
      </div>
    </li>
    <!-- END memberrow -->
  </ul>
<!-- BEGIN switch_no_user -->
<!-- END switch_no_user -->
<!-- BEGIN switch_pagination -->
<div class="tli-pagination">{PAGINATION}</div>
<!-- END switch_pagination -->
</div>
<script>$('.template-linus-34 .tli-pseudo span[style^="color"]').each(function(){var c=$(this).css('color'),m=$(this).closest('.tli-member');m.find('.tli-avatar, .tli-buttons a').css('background-color',c)})</script>