<xf:if is="$xf.visitor.user_id">
<div class="visitor-panel-new">
<div class="visitor">
<div class="vpn-header"></div>
<div class="contentRow-figure">
<xf:avatar user="{$xf.visitor}" size="l" 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>
<xf:if is="$xf.app.userUpgradeCount AND !{$xf.visitor.isMemberOf([3, 4])} AND {$xf.visitor.user_state} == 'valid'">
<div class="button-prem">
<a href="{{ link('account/upgrades') }}" target="_blank"><span>Купить премиум</span><span>Перейти к оплате</span></a>
</div>
</xf:if>
</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>
.visitor-panel-new {
background: @xf-contentBg;
position: relative;
padding: 0;
margin-bottom: 20px;
.visitor {
text-align: center;
.vpn-header {
width: 100%;
height: 100px;
background: @xf-paletteColor4;
}
.avatar {
width: 150px;
height: 150px;
margin-top: -90px;
border: 8px solid @xf-contentBg;
border-radius: 50%;
font-size: 100px;
line-height: 1.35;
}
div {
&:nth-of-type(1) {
margin-bottom: 10px;
}
}
.button-prem {
font-size: .8em;
font-weight: 500;
text-transform: uppercase;
padding: 10px 0;
margin: 10px 20px 0;
border: 2px solid @xf-paletteColor4;
&:hover {
border-color: @xf-textColorAttention;
transition: .3s ease-out;
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;
}
}
}
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;
}
}
}
}
.stats {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: @xf-paletteColor4;
color: contrast(@xf-paletteColor4);
margin-top: 10px;
.column {
flex-basis: calc(100% / 3);
order: 1;
font-size: .85em;
text-align: center;
padding: 5px;
margin: 5px 0;
border-left: 1px solid @xf-paletteColor5;
&:nth-of-type(1) {
border: none;
}
div {
&:nth-of-type(2) {
font-size: 1.1em;
font-weight: 500;
}
}
}
}
}
<xf:if is="$xf.app.userUpgradeCount AND !{$xf.visitor.isMemberOf([3, 4])}">
Спасибо этим методом все получилось отлично!Я так делал:
Создаем новый виджет HTML:
Ключ виджета: visitor_panel_new
Заголовок: не нужен
Позиции для отображения: Список разделов: Боковая панель 1
Шаблон:
HTML:<xf:if is="$xf.visitor.user_id"> <div class="visitor-panel-new"> <div class="visitor"> <div class="vpn-header"></div> <div class="contentRow-figure"> <xf:avatar user="{$xf.visitor}" size="l" 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> <xf:if is="$xf.app.userUpgradeCount AND !{$xf.visitor.isMemberOf([3, 4])} AND {$xf.visitor.user_state} == 'valid'"> <div class="button-prem"> <a href="{{ link('account/upgrades') }}" target="_blank"><span>Купить премиум</span><span>Перейти к оплате</span></a> </div> </xf:if> </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>
Ставим галочку "Расширенный режим"
В extra.less
Less:.visitor-panel-new { background: @xf-contentBg; position: relative; padding: 0; margin-bottom: 20px; .visitor { text-align: center; .vpn-header { width: 100%; height: 100px; background: @xf-paletteColor4; } .avatar { width: 150px; height: 150px; margin-top: -90px; border: 8px solid @xf-contentBg; border-radius: 50%; font-size: 100px; line-height: 1.35; } div { &:nth-of-type(1) { margin-bottom: 10px; } } .button-prem { font-size: .8em; font-weight: 500; text-transform: uppercase; padding: 10px 0; margin: 10px 20px 0; border: 2px solid @xf-paletteColor4; &:hover { border-color: @xf-textColorAttention; transition: .3s ease-out; 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; } } } 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; } } } } .stats { display: flex; flex-direction: row; flex-wrap: nowrap; background: @xf-paletteColor4; color: contrast(@xf-paletteColor4); margin-top: 10px; .column { flex-basis: calc(100% / 3); order: 1; font-size: .85em; text-align: center; padding: 5px; margin: 5px 0; border-left: 1px solid @xf-paletteColor5; &:nth-of-type(1) { border: none; } div { &:nth-of-type(2) { font-size: 1.1em; font-weight: 500; } } } } }
Если есть платные повышения, то будет видна кнопка для перехода на страницу повышений, так же в шаблоне виджета указано условие для определенных групп, которым не нужно отображение этой кнопки
где 3 и 4 группы администраторов и модераторов, можно заменить или добавить свои.HTML:<xf:if is="$xf.app.userUpgradeCount AND !{$xf.visitor.isMemberOf([3, 4])}">