Terrible

Libre-service de codages pour vos forums


    Do the focus

    Admin



    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 !


    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-around;
    }
    /*Bloc membre*/
    .membres {
        height: 150px;
        width: 250px;
        background: red;
        position: relative;
        font-family: 'Montserrat', sans-serif;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .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: -60px;
        margin-left: -20px;
        filter: blur(10px);
    }
    .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%;
    }