2.x Изменяем вид профиля

Совместимость с XenForo: 2.0, 2.1


Часто видел вопросы как сделать такой вид профиля.


И вот наконец решил написать

Создаём модификацию шаблона member_view

Найти:

HTML:

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <div class="memberHeader">

                <div class="memberHeader-main">
                    <span class="memberHeader-avatar">
                        <span class="avatarWrapper">
                            <xf:avatar user="{$user}" size="l"
                                href="{{ $user.getAvatarUrl('o') ?: '' }}" />
                            <xf:if is="$user.user_id == $xf.visitor.user_id && $xf.visitor.canUploadAvatar()">
                                <a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
                            </xf:if>
                        </span>
                    </span>
                    <div class="memberHeader-content memberHeader-content--info">
                        <xf:if contentcheck="true">
                            <div class="memberHeader-actionTop">
                                <div class="buttonGroup">
                                <xf:contentcheck>
                                    <xf:if is="$user.canBeReported()">
                                        <xf:button href="{{ link('members/report', $user) }}"
                                            class="button--link" overlay="true">
                                            {{ phrase('report_verb') }}
                                        </xf:button>
                                    </xf:if>
                                    <xf:if contentcheck="true">
                                        <div class="buttonGroup-buttonWrapper">
                                            <xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator_tools') }}</xf:button>
                                            <div class="menu" data-menu="menu" aria-hidden="true">
                                                <div class="menu-content">
                                                    <h3 class="menu-header">{{ phrase('moderator_tools') }}</h3>
                                                    <xf:contentcheck>
                                                        <xf:macro template="member_macros" name="moderator_menu_actions"
                                                            arg-user="{$user}"
                                                            arg-context="profile" />
                                                    </xf:contentcheck>
                                                </div>
                                            </div>
                                        </div>
                                    </xf:if>
                                </xf:contentcheck>
                                </div>
                            </div>
                        </xf:if>

                        <h1 class="memberHeader-name"><xf:username user="{$user}" rich="true" href="" /></h1>

                        <xf:if contentcheck="true">
                            <div class="memberHeader-banners">
                                <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>
                            </div>
                        </xf:if>

Заменить:

HTML:

<xf:css>
.memberHeader-content {
    padding-left: 10px;
}
</xf:css>
<div class="block mast">
<div class="block-container block-container--noStripRadius mastContainer">
<xf:avatar user="{$user}" size="l" href="" update="{{ link('account/avatar', $user) }}" />
                        <xf:if contentcheck="true">
                            <div class="memberHeader-banners">
                                <xf:contentcheck><xf:userbanners style="width: 100%;" user="$user" /></xf:contentcheck>
                            </div>
                        </xf:if></div>
   </div>
<div class="block mainBlock">
    <div class="block-container">
        <div class="block-body">
            <div class="memberHeader">

                <div class="memberHeader-main">
                    <div class="memberHeader-content memberHeader-content--info">
                        <xf:if contentcheck="true">
                            <div class="memberHeader-actionTop">
                                <div class="buttonGroup">
                                <xf:contentcheck>
                                    <xf:if is="$user.canBeReported()">
                                        <xf:button href="{{ link('members/report', $user) }}"
                                            class="button--link" overlay="true">
                                            {{ phrase('report_verb') }}
                                        </xf:button>
                                    </xf:if>
                                    <xf:if contentcheck="true">
                                        <div class="buttonGroup-buttonWrapper">
                                            <xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator_tools') }}</xf:button>
                                            <div class="menu" data-menu="menu" aria-hidden="true">
                                                <div class="menu-content">
                                                    <h3 class="menu-header">{{ phrase('moderator_tools') }}</h3>
                                                    <xf:contentcheck>
                                                        <xf:macro template="member_macros" name="moderator_menu_actions"
                                                            arg-user="{$user}"
                                                            arg-context="profile" />
                                                    </xf:contentcheck>
                                                </div>
                                            </div>
                                        </div>
                                    </xf:if>
                                </xf:contentcheck>
                                </div>
                            </div>
                        </xf:if>

                        <h1 class="memberHeader-name"><xf:username user="{$user}" rich="true" href="" /></h1>

В екстру закидываем такой код

Код:

.mast {
  float: left;
}
.mastContainer {
    padding: 10px;
    }
.mainBlock {
  margin-left: 224px;
}

@media (max-width: @xf-responsiveMedium) {
.mast {
    float: unset;
    width: 192px;
    margin: 10px auto;
}
.mainBlock {
    margin-left: 0;
}
}