[JoyFreak] Custom Account Details

[XMAN]

Description

This guide will run you through on how to make your account details page look trendy with this customisation.

Guide

1. Go to Admin CP > Appearance > Templates > Search: account_details
2. Go to Admin CP > Appearance > Templates > Search: extra.less

Step 1 details:

Replace contents of accounts_details tempate with:

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