Torrents Stats
- Partagées
- 130 Go
- Téléchargées
- 0 bytes
- Ratio
- -
- Messages
- 946
- J'aime
- 751
- 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.
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 )
dans template : member_card.css
(remplacer votre contenue par celui si)
(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>
