Tutorial 2x Custom Account Details - Tuỳ chỉnh chi tiết tài khoản cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,851
Được Like
8,561
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
  1. Đến Admin CP > Appearance > Templates > account_details
  2. Đến Admin CP > Appearance > Templates > extra.less
Chi tiết bước 1:
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:

joyfreak_account_details.png

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

thahtrung06

Thượng Đế
Tham gia
12/11/2019
Bài viết
526
Được Like
198
Lỗi dòng 56 trên XF 2.1 nên không lưu được admin ơi
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom