Le Deal du moment : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €

Terrible :: Codes forum :: Divers
Awful
Dim 23 Juil - 22:44
Awful
Do the focus 1500841818-liste-membre-min

Au survol du bloc du membre, la date d'inscription s'affiche.

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}     &nbsp;
 {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%;
}
Netya
Dim 3 Oct - 15:34
avatar
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 :Do the focus Captur10

Help me please Cry forever

Plein de bisous et encore ravi de vous voir ouvert de nouveau !!