Description
This guide will run you through on how to make your account details page look trendy with this customisation.
Guide
Step 1 details:
Replace contents of accounts_details tempate with:
Step 2 details:
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:
<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;" data-xf-click="overlay" title="{{ phrase('change_username') }}" data-xf-init="tooltip"><i class="fas fa-edit"></i></a>
<xf:if is="$xf.visitor.canChangeUsername()">
</xf:if></span></h1>
<div class="memberHeader-blurb" style="text-align:center!important;font-size:11px;"><xf:userbanners user="$xf.visitor" tag="div" class="message-userBanner" itemprop="jobTitle" /></div>
<div class="memberHeader-content memberHeader-content--info">
<xf:if contentcheck="true">
<div class="memberHeader-actionTop" style="position:absolute;top:0;right:0;padding:10px;">
<xf:contentcheck>
<!--[XF:action_top_start]-->
<xf:if contentcheck="true">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$xf.visitor.canUploadProfileBanner()">
<xf:button href="{{ link('account/banner') }}"
class="button--link" overlay="true" title="{{ phrase('edit_profile_banner') }}" data-xf-init="tooltip">
<i class="fas fa-camera"></i>
</xf:button></xf:if>
</xf:contentcheck>
</div>
</xf:if>
<!--[XF:action_top_end]-->
</xf:contentcheck>
</div>
</xf:if>
</div></div></xf:profilebanner></div></div></div></div>
<xf:form action="{{ link('account/account-details') }}" ajax="true" class="block" data-force-flash-message="true">
<div class="block-container">
<div class="block-body">
<xf:formrow rowtype="button"
label="{{ phrase('email') }}">
<xf:if is="$xf.visitor.email">
{$xf.visitor.email}
<xf:else />
<i>{{ phrase('none') }}</i>
</xf:if>
<xf:button href="{{ link('account/email') }}" class="button--link" overlay="true">{{ phrase('change') }}</xf:button>
</xf:formrow>
<xf:if is="{{ $xf.visitor.Profile.dob_day && $xf.visitor.Profile.dob_month && $xf.visitor.Profile.dob_year }}">
<xf:formrow
label="{{ phrase('date_of_birth') }}"
explain="{{ phrase('once_your_birthday_has_been_entered_it_cannot_be_changed') }}">
<xf:set var="$birthday" value="{{ $xf.visitor.Profile.getBirthday(true) }}" />
{{ date($birthday.timeStamp, $birthday.format) }}
</xf:formrow>
<xf:else />
<xf:macro template="helper_user_dob_edit" name="dob_edit" arg-dobData="{$xf.visitor.Profile}" />
</xf:if>
<xf:if is="$xf.visitor.canEditProfile()">
<xf:if is="{{ $xf.visitor.hasPermission('general', 'editCustomTitle') }}">
<xf:textboxrow name="user[custom_title]" value="{$xf.visitor.custom_title_}"
maxlength="{{ max_length($xf.visitor, 'custom_title') }}"
label="{{ phrase('custom_title') }}"
explain="{{ phrase('if_specified_replace_title_that_displays_under_name_in_posts') }}" />
</xf:if>
<hr class="formRowSep" />
<xf:textboxrow name="profile[location]" value="{$xf.visitor.Profile.location_}"
maxlength="{{ max_length($xf.visitor.Profile, 'location') }}"
label="{{ phrase('location') }}" />
<xf:textboxrow name="profile[website]" value="{$xf.visitor.Profile.website_}" type="url"
maxlength="{{ max_length($xf.visitor.Profile, 'website') }}"
label="{{ phrase('website') }}" />
<xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="personal" arg-set="{$xf.visitor.Profile.custom_fields}" />
<hr class="formRowSep" />
<xf:editorrow name="about" value="{$xf.visitor.Profile.about_}" previewable="0"
label="{{ phrase('about_you') }}"/>
</xf:if>
</div>
<xf:if is="$xf.visitor.canEditProfile()">
<xf:if contentcheck="true">
<h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('identities') }}</span></h2>
<div class="block-body">
<xf:contentcheck>
<xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="contact" arg-set="{$xf.visitor.Profile.custom_fields}" />
</xf:contentcheck>
</div>
</xf:if>
<xf:submitrow icon="save" sticky="true" />
</xf:if>
</div>
</xf:form>Step 2 details:
Code:
[data-template="account_details"] {
.avatar img {
background-color: transparent !important;
}
}