Créditez-moi quelque part sur votre forum si vous utilisez ce code !
Code pour forum en phpBB2. J'utilise la propriété "calc" et comme Forumactif est parfois capricieux sans raison, si ça ne fonctionne pas, cochez la case "non" à " Optimiser votre CSS" dans les options de la feuille de style.
Codes et explications
Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :
- Code:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Dans votre panneau d'administration, Affichage > Templates > Général > memberlist_body, remplacez l'intégralité du template par le suivant :
- 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}
{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>
<div class="membres-bloc">
<!-- BEGIN memberrow -->
<div class="membres">
<div class="membres-nom">
<a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
</div>
<div class="membres-avatar-fond">{memberrow.AVATAR_IMG}</div>
<div class="membres-avatar">{memberrow.AVATAR_IMG}</div>
<div class="membres-bas">
<div class="membres-mp">{memberrow.PM_IMG}</div>
<div class="membres-arrivee">Arrivé le <b>{memberrow.JOINED}</b></div>
<div class="membres-messages"><b>{memberrow.POSTS}</b> messages</div>
</div>
</div>
<!-- END memberrow -->
</div></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 -->
Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
- Code:
/*LISTE DES MEMBRES PAR AWFUL*/
/*Bloc principal*/
.membres-bloc {
background: #ccc;
padding: 20px 20px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.membres-bloc::after {
content: "";
width: calc(100% / 3 - 10px);
}
/*Bloc membre*/
.membres {
height: 150px;
width: calc(100% / 3 - 10px);
background: red;
position: relative;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
margin-bottom: 15px;
}
.membres a {
text-decoration: none!important;
}
.membres-nom {
position: absolute;
text-align: center;
width: 100%;
top: 10px;
z-index: 2;
color: #fff;
}
.membres-avatar-fond img {
width: 115%;
margin-top: -100px;
margin-left: -20px;
filter: blur(10px);
max-width: none !important;
}
.membres-avatar {
height: 70px;
width: 70px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: 50px;
left: calc(50% - 35px);
border: 3px solid #fff;
z-index: 2;
}
.membres-avatar img {
width: 70px;
margin-top: -30px;
}
.membres-bas {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
background: #fff;
}
.membres-mp {
background: #e63535;
position: absolute;
bottom: 5px;
right: 5px;
color: #fff;
text-decoration: none;
border-radius: 3px;
padding: 2px 4px;
font-size: 11px;
transition: all 0.3s;
}
.membres-mp img {
display: none;
}
.membres-mp a:before {
content: "MP";
color: #fff!important;
}
.membres-mp:hover {
background: #ba2626;
}
.membres-messages,
.membres-arrivee {
text-transform: uppercase;
position: absolute;
bottom: 5px;
left: 7px;
transition: all 0.3s;
font-size: 10px;
}
.membres-arrivee {
left: -100%;
}
.membres:hover .membres-arrivee {
left: 7px;
}
.membres:hover .membres-messages {
left: -100%;
}
Hello et déjà merci infiniment pour tous ces codes magnifiques et ces explications limpides c'est toujours un plaisir d'avoir affaire à votre travail. De plus un plus grand plaisir encore de vous voir de retour !!
Cependant, même avec tout l'amour du monde je n'ai pas réussi à corriger un bug d'affichage dans le code. Une fois tout installé les avatars des membres ne s'affichent que si l'on clique dessus pour aller voir les profils. (même en ayant désactivé l'optimisation du code CSS par forumactif)
Je vous met un petit screen de tout ça :
Help me please
Plein de bisous et encore ravi de vous voir ouvert de nouveau !!
Cependant, même avec tout l'amour du monde je n'ai pas réussi à corriger un bug d'affichage dans le code. Une fois tout installé les avatars des membres ne s'affichent que si l'on clique dessus pour aller voir les profils. (même en ayant désactivé l'optimisation du code CSS par forumactif)
Je vous met un petit screen de tout ça :
Help me please
Plein de bisous et encore ravi de vous voir ouvert de nouveau !!
|
|