Custom Account Details - Tuỳ chỉnh chi tiết tài khoản cho XenForo 2
Hướng dẫn này sẽ hướng dẫn bạn cách làm cho trang chi tiết tài khoản của bạn trông hợp thời trang với tùy chỉnh này.
Cách làm
Thay thế nội dung của template accounts_details bằng:
Chi tiết bước 2:
Thêm đoạn code sau vào extra.less:
Demo:
Chúc các bạn thành công.
Hướng dẫn này sẽ hướng dẫn bạn cách làm cho trang chi tiết tài khoản của bạn trông hợp thời trang với tùy chỉnh này.
Cách làm
- Đến Admin CP > Appearance > Templates > account_details
- Đến Admin CP > Appearance > Templates > extra.less
Thay thế nội dung của template accounts_details bằng:
HTML:
<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>
Chi tiết bước 2:
Thêm đoạn code sau vào extra.less:
Less:
[data-template="account_details"] {
.avatar img {
background-color: transparent !important;
}
}
Demo:
Nguồn: xenforo.com
Bài viết liên quan
Được quan tâm
Bài viết mới