XenForo 1.X Améliorer L’esthétique De La Member Card

  • Auteur de la discussion Shems
  • Date de début
  • Réponses 7
  • Affichages 1552
Shems

Shems

VeryLeak's Unique Member 👑
Level 5
VeryFriend's

Torrents Stats

Partagées
130 Go
Téléchargées
0 bytes
Ratio
-
Messages
585
J'aime
354
Trophées
1 538
Inscrit
31 Décembre 2015
Alors évidemment bonjour à tous.
Aujourd'hui on se retrouve pour un nouveaux tutoriel où nous allons modifier l'esthétique de la member card.

Dans template : Member_card
(remplacer vos contenue par celui si )
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>

dans template : member_card.css
(remplacer votre contenue par celui si)

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://.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>

​
 
BestForst

BestForst

Membre 🏅
Level 1

Torrents Stats

Partagées
130 Go
Téléchargées
0 bytes
Ratio
-
Messages
51
J'aime
11
Trophées
18
Inscrit
19 Mai 2016
jolie TUTO Shems :)
 
Slok

Slok

Master 🏆
Level 2

Torrents Stats

Partagées
130 Go
Téléchargées
0 bytes
Ratio
-
Messages
122
J'aime
790
Trophées
830
Inscrit
18 Février 2016
Screen ?
 
7even.

7even.

Nitro Booster ❤
Level 5
VeryFriend's

Torrents Stats

Partagées
130 Go
Téléchargées
0 bytes
Ratio
-
Messages
991
J'aime
168
Trophées
999
Inscrit
14 Décembre 2015
Préfix appliqué !
 
Mehdi

Mehdi

l'Accru 🥇
Level 2

Torrents Stats

Partagées
130 Go
Téléchargées
0 bytes
Ratio
-
Messages
55
J'aime
139
Trophées
145
Inscrit
29 Avril 2017
jolie rendu :)
 
Vous devez vous connecter ou vous enregistrer pour répondre ici.
Haut Bas