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

PVS

Super Moderator
Thành viên BQT
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​
 

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

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

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top