Jawn

# LISTE DES MEMBRES SOMBRE AVEC HOVER - Dim 29 Nov - 17:54

Allez dans Panneau d'administration > Affichage > Templates > Général puis remplacez l'intégralité de votre template memberlist_body par :
- Code:
<div class="member_list_title">▹ Ils sont par minou ◃</div>
<form action="{S_MODE_ACTION}" method="get">
<div class="panel">
<p style="text-align:right; margin: 0; padding: 0;">
{L_USER_SELECT} <input type="text" class="inputbox tiny" 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="button2" type="submit" name="submit" value="{L_SUBMIT}" />
</p>
</div>
</form>
<div class="liste_des_membres">
<!-- BEGIN memberrow -->
<div class="inside_member">
<div class="membre_liste">{memberrow.AVATAR_IMG}</div>
<div class="hover_inside_membre">
<div class="hovy_inside">
<div class="member_pro">{memberrow.GROUPS}</div>
<div class="member_pro">{memberrow.INTERESTS}</div>
<div class="member_pro">{memberrow.JOINED}</div>
<div class="member_pro">{memberrow.VISITED}</div>
<div class="member_pro">{memberrow.PM_IMG}</div>
</div>
</div>
<div class="nom_member">{memberrow.USERNAME}</div>
</div>
<!-- END memberrow -->
</div>
<div class="pagination" style="float:none;">
<!-- BEGIN switch_pagination -->
{PAGINATION}<br /><br />
<!-- END switch_pagination -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
@font-face {
font-family: "Abenda";
src: url("https://files.jcink.net/uploads/protegorp/cruel_intentions/Abenda_MVV6P.ttf")
format("truetype");
font-weight: normal;
font-style: normal;
}
.liste_des_membres {
display: flex;
flex-wrap: wrap;
justify-content: center;
border: solid 1px #ccc;
padding: 30px;
}
.membre_liste {
border-radius:10px;
margin:2px;
width:250px;
height:450px;
background-image:linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.inside_member {
text-align: center;
height: 510px;
}
.membre_liste img {
border-radius: 10px;
width: 100%;
}
.hover_inside_membre {
position: relative;
width: 252px;
height: 450px;
background: rgba(0, 0, 0, 0.5);
top: -452px;
transition: all 800ms;
opacity: 0;
}
.hovy_inside {
background-image: url(https://imgur.com/iKLfjw4.png);
height: 452px;
background-size: 100%;
transition:all 800ms;
}
.hover_inside_membre:hover, .hovy_inside {
transition:all 800ms;
opacity:1;
}
.member_pro {
padding: 10px 20px 6px 20px;
text-align: center;
font: 8px Roboto;
text-transform: uppercase;
letter-spacing: 3px;
color: #a4c3b5;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
.nom_member {
width: 243px;
text-align: center;
padding: 10px 10px 5px 10px;
margin: -442px 5px 0px 5px;
outline-offset: -2px;
outline: 1px solid #0b0b0b;
font: 17px Abenda;
line-height: 20px;
background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%);
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|