code à insérer dans l'html
OU ci-dessous le css commenté et non minifié, à copier directement :
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:
<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>