[JoyFreak] Custom Account Details

XF 2 Tip [JoyFreak] Custom Account Details

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
S.V.I.P.S Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
10,995
Points
823

Reputation:

ENXF NET submitted a new resource:

[JoyFreak] Custom Account Details - Make your account details page look trendy with this customisation.

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 template with:
HTML:
<xf:title>{{ phrase('account_details') }}</xf:title>

<xf:wrap template="account_wrapper" />

<xf:if...

Read more about this resource...
 

skittels

Member
Registered
Joined
Mar 13, 2020
Messages
9
Points
13

Reputation:

settings can't be saved if template modified with any addon
 

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
S.V.I.P.S Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
10,995
Points
823

Reputation:

Did you follow the steps correctly?
 

skittels

Member
Registered
Joined
Mar 13, 2020
Messages
9
Points
13

Reputation:

yes. Some settings added by any addons not displayed and can't be saved
 

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
S.V.I.P.S Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
10,995
Points
823

Reputation:

@skittels you do it right? it works normally
 

Attachments

  • [JoyFreak] Custom Account Details
    1607644563121.png
    2.4 KB · Views: 20

skittels

Member
Registered
Joined
Mar 13, 2020
Messages
9
Points
13

Reputation:

@ENXF NET install any addon with profile settings customization (e.g "username color change" or etc). Settings Added by any addon not displayed if you use modification from thread
 

True123

Collaborate
Collaborate
Registered
Joined
Dec 26, 2021
Messages
45
Points
33

Reputation:

it is not a good idea to edit templates, it is easier to make a modification
 

True123

Collaborate
Collaborate
Registered
Joined
Dec 26, 2021
Messages
45
Points
33

Reputation:

add template - /admin.php?template-modifications/
Find:
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>

<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="{{ $xf.visitor.canChangeUsername() ? 'button' : '' }}"
                label="{{ phrase('user_name') }}">

                {$xf.visitor.username}
                <xf:if is="$xf.visitor.canChangeUsername()">
                    <xf:button href="{{ link('account/username') }}" class="button--link" overlay="true">{{ phrase('change') }}</xf:button>
                </xf:if>

                <xf:if contentcheck="true">
                    <div class="formRow-explain">
                        <xf:contentcheck>
                            <xf:if is="$xf.visitor.username_date">
                                {{ phrase('your_username_was_last_changed_on_x', {'date': date_time($xf.visitor.username_date)}) }}
                            </xf:if>
                            <xf:if is="$xf.visitor.next_allowed_username_change">
                                {{ phrase('you_may_next_change_your_username_on_or_after_x', {'date': date($xf.visitor.next_allowed_username_change)}) }}
                            </xf:if>
                        </xf:contentcheck>
                    </div>
                </xf:if>
            </xf:formrow>

            <xf:formrow rowtype="{{ $canChangeEmail ? 'button' : '' }}"
                label="{{ phrase('email') }}">

                <xf:if is="$xf.visitor.email">
                    {$xf.visitor.email}
                <xf:else />
                    <i>{{ phrase('none') }}</i>
                </xf:if>
                <xf:if is="$canChangeEmail">
                    <xf:button href="{{ link('account/email') }}" class="button--link" overlay="true">{{ phrase('change') }}</xf:button>
                </xf:if>
            </xf:formrow>

            <xf:macro template="helper_account" name="email_options_row" arg-showExplain="{{ true }}" />

            <xf:if is="$xf.visitor.canUploadAvatar()">
                <xf:formrow
                    label="{{ phrase('avatar') }}"
                    explain="{{ phrase('click_image_to_change_your_avatar') }}">

                    <xf:avatar user="{$xf.visitor}" size="m" href="{{ link('account/avatar') }}" data-xf-click="overlay" />
                </xf:formrow>
            </xf:if>

            <xf:if is="$xf.visitor.canUploadProfileBanner()">
                <xf:formrow
                    label="{{ phrase('profile_banner') }}">

                    <xf:profilebanner user="$xf.visitor" size="l" class="memberProfileBanner--small" href="{{ link('account/banner') }}" overlay="true" hideempty="true" />
                    <xf:button href="{{ link('account/banner') }}" data-xf-click="overlay" class="button--link">{{ phrase('edit_profile_banner') }}</xf:button>
                </xf:formrow>
            </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: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:macro template="helper_account" name="dob_privacy_row" />

                <hr class="formRowSep" />

                <xf:textboxrow name="profile[location]" value="{$xf.visitor.Profile.location_}"
                    maxlength="{{ max_length($xf.visitor.Profile, 'location') }}"
                    hint="{{ $xf.options.registrationSetup.requireLocation ? phrase('required') : '' }}"
                    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>
Replace:
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>
 

True123

Collaborate
Collaborate
Registered
Joined
Dec 26, 2021
Messages
45
Points
33

Reputation:

Can be made into a plugin, five minutes)
 
Top