Description
This guide will run you through on how to make your account details page look trendy with this customisation.
Guide
- Go to Admin CP > Appearance > Templates > Search: account_details
- Go to Admin CP > Appearance > Templates > Search: extra.less
Step 1 details:
Replace contents of accounts_details tempate with:
Code:
Code:
<xf:title>{{ phrase('account_details') }}</xf:title>
<xf:wrap template="account_wrapper" />
<xf:if is="!$xf.visitor.canEditProfile()">
<div class="blockMessage blockMessage--important">{{ phrase('your_full_account_details_not_currently_editable') }}</div>
</xf:if>
<xf:if is="$pendingUsernameChange">
<div class="blockMessage blockMessage--important">
{{ phrase('pending_username_change_message', {'username': $pendingUsernameChange.new_username}) }}
</div>
</xf:if>
<div class="block">
<div class="block-container">
<div class="block-body">
<div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}" style="position:relative;">
<xf:profilebanner user="$xf.visitor" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
<div class="memberHeader-mainContent" style="text-align: center;padding:10px;">
<span class="memberHeader-avatar">
<span class="avatarWrapper">
<xf:avatar user="{$xf.visitor}" size="l" href="" notooltip="true" />
<xf:if is="$xf.visitor.canUploadAvatar()">
<a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
</xf:if>
</span>
</span>
<h1 class="message-name" style="margin: 5px 0px 0px;">
<span style="font-size:24px!important;font-weight:500; margin-top: 1px;">
<span class="username--style2">{$xf.visitor.username}</span> <a href="{{ link('account/username') }}" class="help_links" style="font-size:20px;"...Read more
Continue reading...