آموزش تغییر شکل نمایه ها

در الگویmember_view کد زیر را پیدا کنید.

<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>

با کد زیر جایگزین کنید.
[HIDESHOWTOGROUPS=12,13,3,10,11,8,6,5,7]

 <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>

[/HIDESHOWTOGROUPS]
و بعد کد زیر را در extra.less بزارید.
[HIDEREACT=1,2,3,4]

.mast {
  float: left;
}
.mastContainer {
    padding: 10px;
    }
.mainBlock {
  margin-left: 220px;
}
.memberHeader-content {
    padding: 10px;
    padding-right: 15px;
}

[/HIDEREACT]

قبل:



بعد: