Eklentisiz profil kartı nasıl oluşturulur?

PaulWalker

🏅
Kıdemli Üye
Katılım
8 Ocak 2025
Konular
53
Mesajlar
55
Tepkime puanı
29
TL
115
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="cRf">
<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>