Eklentisiz profil kartı nasıl oluşturulur?

Bu anlatımda forumlarımızda eklenti kullanmadan nasıl üye profil kartı oluşturabileceğimizi aktaracağız.
Bu işlemi iki adımda gerçekleştireceğiz.

İlk adım için aşağıdaki kodu temanızın extra.less şablonuna ekleyip kaydedin

@vpn-background: @xf-contentBg;
@vpn-border-color: @xf-borderColor;

.visitor-panel-new {
background: @vpn-background;
padding: 10px;
margin-bottom: 20px;
.visitor {
text-align: center;
div {
&:nth-of-type(1) {
margin-bottom: 10px;
}
}
.button-prem {
font-size: .8em;
font-weight: 500;
text-transform: uppercase;
position: relative;
padding: 10px 0;
margin: 15px 0 10px;
border: 2px solid @vpn-border-color;
&:hover {
border-color: @xf-textColorAttention;
span {
&:nth-of-type(1) {
font-size: 0;
opacity: 0;
transition: .3s ease-out;
}
&:nth-of-type(2) {
font-size: inherit;
opacity: 1;
transition: .3s ease-out;
}
}
&:before {
opacity: 1;
}
}
a {
&:hover {
text-decoration: none;
color: @xf-textColorAttention;
}
}
span {
&:nth-of-type(2) {
font-size: 0;
opacity: 0;
transition: .3s ease-out;
}
&:nth-of-type(1) {
font-size: inherit;
opacity: 1;
transition: .3s ease-out;
}
}
&:before {
display: block;
font-size: .8em;
position: absolute;
content: attr(data-sale);
top: -15px;
left: 5px;
background: @xf-contentAccentBg;
color: @xf-textColorAccentContent;
padding: 3px 5px;
border: 2px solid @xf-textColorAttention;
transform: rotate(0deg) scale(1, 1) skew(-10deg, 0deg) translate(0, 0);
opacity: 0;
transition: opacity .6s ease-out;
}
}
}
.stats {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border: 1px solid @vpn-border-color;
.column {
flex-basis: calc(100% / 3);
order: 1;
font-size: .85em;
text-align: center;
padding: 5px;
margin: 5px 0;
border-left: 1px solid @vpn-border-color;
&:nth-of-type(1) {
border: none;
}
div {
&:nth-of-type(2) {
font-size: 1.1em;
font-weight: 500;
}
}
}
}
}
İkinci adım için visitor_panel adında html widget oluşturun ve aşağıdaki kodu bu widget şablonuna ekleyip kaydedin
<xf:if is="$xf.visitor.user_id">
<div class="visitor-panel-new">
<div class="visitor">
<div class="contentRow-figure">
<xf:avatar user="{$xf.visitor}" size="m" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
</div>
<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
<div class="contentRow-lesser">
<xf:usertitle user="$xf.visitor" />
</div>
<div class="button-prem" data-sale="Vip Üyelik">
<a href="account/upgrades" target="_blank"><span>Premium Satın Al</span><span>Ödeme Yap</span></a>
</div>
</div>
<div class="stats">
<div class="column">
<div>{{ phrase('messages') }}</div>
<div>{$xf.visitor.message_count|number}</div>
</div>
<div class="column">
<div>{{ phrase('likes') }}</div>
<div>{$xf.visitor.like_count|number}</div>
</div>
<div class="column">
<div>{{ phrase('trophy_points') }}</div>
<div>{$xf.visitor.trophy_points|number}</div>
</div>
</div>
</div>
</xf:if>