Template 1.X Améliorer l’esthétique de la member card

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

Messages
125
Ressources
0
J'aime
34
Points
1 433
Hors ligne
#1
Remplacer le template Member_card par :

Code:
<xen:edithint template="xenforo_overlay.css" />
<xen:require css="member_card.css" />

<div id="memberCard{$user.user_id}" data-overlayClass="memberCard">
    <div class="avatarCropper">
        <a class="avatar NoOverlay Av{$user.user_id}l" href="{xen:link members, $user}">
            <img src="{xen:helper avatar, {$user}, l}" alt="" style="{xen:helper avatarCropCss, $user}" />
        </a>
        <xen:if hascontent="true">
            <div class="modControls" style="position:absolute; bottom:0px; right:0px">
                <xen:contentcheck>
                    <xen:if is="{$canEditUser}"><a href="{xen:link members/edit, $user}">{xen:phrase edit}</a></xen:if>
                    <xen:if is="{$canCleanSpam}"><a href="{xen:link spam-cleaner, $user}" class="OverlayTrigger">{xen:phrase spam}</a></xen:if>
                    <xen:if is="{$canWarn}"><a href="{xen:link members/warn, $user}">{xen:phrase warn}</a></xen:if>
                    <xen:if is="{$canBanUsers}">
                        <xen:if is="{$user.is_banned}">
                            <a href="{xen:adminlink banning/users/lift, $user}">{xen:phrase lift_ban}</a>
                        <xen:else />
                            <a href="{xen:adminlink banning/users/add, $user}">{xen:phrase ban}</a></xen:if>
                        </xen:if>
                </xen:contentcheck>
            </div>
        </xen:if>
    </div>
   
    <div class="userInfo">
        <h3 class="username"><xen:username user="$user" class="NoOverlay" /></h3>
       
        <div class="userTitleBlurb">
            <h4 class="userTitle">{xen:helper userTitle, $user}</h4>
            <div class="userBlurb">{xen:helper userBlurb, $user, 0}</div>
        </div>
       
        <blockquote class="status">{xen:helper bodytext, $user.status}</blockquote>

         <xen:if is="{xen:property xb_fa_messageUserInfo}"><i class="fa fa-user-plus fa-lg Tooltip" title="{xen:date $user.register_date}" data-offsetX="-6" data-offsetY="0"></i><xen:else /><i class="fa fa-user-plus fa-lg Tooltip" title="{xen:date $user.register_date}" data-offsetX="-6" data-offsetY="0"></i></xen:if>
        <div class="userLinks">
        <xen:hook name="member_card_links">
            <a href="{xen:link members, $user}">{xen:phrase profile_page}</a>
            <xen:if is="{$visitor.user_id} AND {$user.user_id} != {$visitor.user_id}">
                <xen:if is="{$canStartConversation}"><a href="{xen:link conversations/add, '', 'to={$user.username}'}">{xen:phrase start_conversation}</a></xen:if>
                <xen:follow user="$user" class="Tooltip" />
                <xen:if is="{xen:helper isIgnored, $user.user_id}"><a href="{xen:link members/unignore, $user}" class="FollowLink">{xen:phrase unignore}</a><xen:elseif is="{$canIgnore}" /><a href="{xen:link members/ignore, $user}" class="FollowLink">{xen:phrase ignore}</a></xen:if>
            </xen:if>
        </xen:hook>
        </div>
       
        <dl class="userStats pairsInline">
        <xen:hook name="member_card_stats">
       
            <!-- slot: pre_messages -->
            <dt>{xen:phrase messages}:</dt> <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
            <!-- slot: pre_likes -->
            <dt>{xen:phrase likes_received}:</dt> <dd>{xen:number $user.like_count}</dd>
                <!-- slot: pre_trophies -->
                <dt>Points:</dt> <dd>{xen:number $visitor.trophy_points}</dd>
                <dt>J'aime reçues</dt> <dd>{xen:number $visitor.like_count}</dd><br>
        </xen:hook>
        </dl>
   
        <xen:if is="{$canViewOnlineStatus}">
                <br><dt>{xen:phrase x_was_last_seen, 'username={$user.username}'}:</dt>
                <dd>
                    <xen:if is="{$user.activity} AND {$canViewCurrentActivity}">
                        <xen:if is="{$user.activity.description}">
                            {$user.activity.description}<xen:if is="{$user.activity.itemTitle}"> <em><a href="{$user.activity.itemUrl}" class="concealed">{$user.activity.itemTitle}</a></em></xen:if>,
                        <xen:else />
                            {xen:phrase viewing_unknown_page},
                        </xen:if>
                        <xen:datetime time="{$user.effective_last_activity}" class="muted" />
                    <xen:else />
                        <xen:datetime time="{$user.effective_last_activity}" />
                    </xen:if>
                </dd>
            </dl>
        </xen:if>
    </div>
   
    <a class="close OverlayCloser"></a>
</div>
Remplacer le template : member_card.css par :

Code:
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: 'PT Sans', sans-serif;
    color: rgb(176, 176, 176);
    word-wrap: break-word;
    line-height: 1.28;
}

.xenOverlay.memberCard .userInfo {
    text-align: center !important;
}

.xenOverlay.memberCard .userInfo {
    margin-left: 205px;
    font-size: 11px;
}


.xenOverlay.memberCard .cardUserBanner {
    margin: 5px 0 5px 0;
}


.xenOverlay.memberCard {
    border: 1px solid #222222;
    background: url(rgba.php?r=50&g=50&b=50&a=255) !important;
    background: rgba(50, 50, 50, 1) !important;
    _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF323232,endColorstr=#FF323232);
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -khtml-border-radius: 0px !important;
    border-radius: 0px !important;
}



.xenOverlay.memberCard {
    color: white;
    background: url(http://hackandmodz.net/rgba.php?r=0&g=0&b=0&a=204);
    background: rgba(0, 0, 0, .8);
    _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    max-width: 565px;
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0, 0.8);
    -moz-box-shadow: 0 0 15px 0 rgba(0,0,0, 0.8);
    -khtml-box-shadow: 0 0 15px 0 rgba(0,0,0, 0.8);
    box-shadow: 0 0 15px 0 rgba(0,0,0, 0.8);
}
   
    .xenOverlay.memberCard .avatarCropper
    {
        float: left;
        border: none;
        padding: 0;
        position: relative;
    }
   
    .xenOverlay.memberCard .avatarCropper .modControls
    {
        display: none;
    }
   
        .xenOverlay.memberCard .avatarCropper:hover .modControls,
        .Touch .xenOverlay.memberCard .avatarCropper .modControls
        {
            display: block;
        }
   
    .xenOverlay.memberCard .avatarCropper .modControls a
    {
        display: block;
        float: left;
        height: auto;
        width: auto;
        overflow: visible;
        position: static;
        background: rgba(0,0,0, 0.5);
        color: white;
        padding: 3px 6px;
        font-size: 11px;
        text-align: center;
        min-width: 32px;
    }
   
        .xenOverlay.memberCard .avatarCropper .modControls a:hover
        {
            background: rgba(0,0,0, 0.75);
            text-decoration: none;
        }

    .xenOverlay.memberCard .userInfo
    {
        margin-left: 205px;
        font-size: 11px;
    }

        .xenOverlay.memberCard .userInfo h3
        {
            @property "memberCardUserName";
            font-size: 18px;
            color: @uix_primaryColor;
            @property "/memberCardUserName";
        }

            .xenOverlay.memberCard .userInfo h3 a
            {
                color: @memberCardUserName.color;
            }
           
        .xenOverlay.memberCard .userInfo .userTitleBlurb
        {
            margin: 0 0 3px;
        }

            .xenOverlay.memberCard .userInfo h4
            {
                color: @mutedTextColor;
                font-size: 10pt;
            }
           
            .xenOverlay.memberCard .userInfo .userBlurb
            {
                font-size: 11px;
            }

        .xenOverlay.memberCard .userInfo .status
        {
            font-size: 11px;
            font-style: italic;
            margin: 3px 0;
        }
       
            .xenOverlay.memberCard .userInfo .status a
            {
                color: inherit;
            }
       
        .xenOverlay.memberCard .userInfo .userStats
        {
            width: 100%;
        }
       
            .xenOverlay.memberCard .userInfo .userStats dd
            {
                margin-right: 5px;
            }

    .xenOverlay.memberCard .userLinks
    {
        @property "memberCardUserLinks";
        font-weight: bold;
        color: @uix_primaryColor;
        padding: 2px 0;
        margin: 3px 0;
        border-bottom: 1px solid @dimmedTextColor;
        @property "/memberCardUserLinks";
    }
   
        .xenOverlay.memberCard .userLinks a
        {
            margin-right: 10px;
            color: inherit;
            white-space: nowrap;
        }
       
    .xenOverlay.memberCard .lastActivity
    {
        @property "memberCardLastActivity";
        padding-top: 3px;
        margin-top: 3px;
        border-top: 1px solid @dimmedTextColor;
        @property "/memberCardLastActivity";
    }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .xenOverlay.memberCard
    {
        max-width: 320px;
    }

    .Responsive .xenOverlay.memberCard .avatarCropper
    {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .Responsive .xenOverlay.memberCard .userInfo
    {
        margin-left: 0;
    }
   
    .Responsive .xenOverlay.memberCard .userInfo h3,
    .Responsive .xenOverlay.memberCard .userInfo .userTitleBlurb,
    .Responsive .xenOverlay.memberCard .userInfo .status
    {
        text-align: center;
    }
}


.userLinks {
    text-align: center;
}

</xen:if>
Résultat final :

 
Haut Bas