XF 2.2 Move the members view sidebar under the profile cover

oO5 Dynasty

Well-known member
Was wondering how to make the profile cover, extend out, and move all sidebar widgets under it?
Web capture_3-6-2022_103841_user.oo5dynasty.com.jpeg

Right now the sidebar is equal height to the profile cover.
Would like to move it down under the profile cover.
This is how my xf1 site functioned.
 
Last edited:
Solution
It's a lot easier if you move the whole upper part (except the navigation) to the top:

Frist undo the recent changes.

Then insert this anywhere in the member_view template:

HTML:
<xf:page option="headerHtml">
    <div class="block">
        <div class="block-container">

        </div>
    </div>
</xf:page>

then cut this part out and insert it into the blank line in the code avove:

HTML:
        <div class="block-body">
            <div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}">
                <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
                    <div class="memberHeader-mainContent">
                        <span...

oO5 Dynasty

Well-known member
It seems you did not search resources?

There is a free addon by @RobinHood that does this:

Hey, thanks for the info, but this add-on doesn't move the sidebar widgets under the profile cover block similar to how xf1 profile pages would.

 

nocte

Well-known member
Oh, sorry, my fault! I just remembered this addon when I saw your screenshot, but did not pay too much attention to the "above sidebar" part.

Basically you just have to add this to the template member_view:

HTML:
<xf:if is="$user.Profile.banner_date">
    <xf:page option="headerHtml">
        <div class="block">
            <div class="block-container">
                <div class="block-body">
                    <div class="memberHeader memberHeader--withBanner">
                        <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
                        </xf:profilebanner>
                    </div>
                </div>
            </div>
        </div>
    </xf:page>
</xf:if>
it does not really matter where you add it.

If you want to remove the profile banner from below, then find:

HTML:
            <div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}">
                <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">

replace with:

HTML:
            <div class="memberHeader">

and finally remove this line:

HTML:
                </xf:profilebanner>
 

oO5 Dynasty

Well-known member
Oh, sorry, my fault! I just remembered this addon when I saw your screenshot, but did not pay too much attention to the "above sidebar" part.

Basically you just have to add this to the template member_view:

HTML:
<xf:if is="$user.Profile.banner_date">
    <xf:page option="headerHtml">
        <div class="block">
            <div class="block-container">
                <div class="block-body">
                    <div class="memberHeader memberHeader--withBanner">
                        <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
                        </xf:profilebanner>
                    </div>
                </div>
            </div>
        </div>
    </xf:page>
</xf:if>
it does not really matter where you add it.

If you want to remove the profile banner from below, then find:

HTML:
            <div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}">
                <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">

replace with:

HTML:
            <div class="memberHeader">

and finally remove this line:

HTML:
                </xf:profilebanner>
amazing, now one more thing. Let's say I wanted to keep the avatar block and info inside the profile banner.
How can I achieve this?
<div class="memberHeader-content memberHeader-content--info">Web capture_4-6-2022_43324_user.oo5dynasty.com.jpeg
 

nocte

Well-known member
It's a lot easier if you move the whole upper part (except the navigation) to the top:

Frist undo the recent changes.

Then insert this anywhere in the member_view template:

HTML:
<xf:page option="headerHtml">
    <div class="block">
        <div class="block-container">

        </div>
    </div>
</xf:page>

then cut this part out and insert it into the blank line in the code avove:

HTML:
        <div class="block-body">
            <div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}">
                <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
                    <div class="memberHeader-mainContent">
                        <span class="memberHeader-avatar">
                            <span class="avatarWrapper">
                                <xf:avatar user="{$user}" size="l"
                                    href="{{ $user.getAvatarUrl('o') ?: '' }}" />
                                <xf:if is="$user.user_id == $xf.visitor.user_id && $xf.visitor.canUploadAvatar()">
                                    <a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
                                </xf:if>
                            </span>
                        </span>
                        <div class="memberHeader-content memberHeader-content--info">
                        <xf:if contentcheck="true">
                            <div class="memberHeader-actionTop">
                                <xf:contentcheck>
                                <!--[XF:action_top_start]-->
                                <xf:if contentcheck="true">
                                    <div class="buttonGroup">
                                        <xf:contentcheck>
                                            <xf:if is="$user.canBeReported()">
                                                <xf:button href="{{ link('members/report', $user) }}"
                                                    class="button--link" overlay="true">
                                                    {{ phrase('report_verb') }}
                                                </xf:button>
                                            </xf:if>
                                            <xf:if is="$user.user_id == $xf.visitor.user_id && $xf.visitor.canUploadProfileBanner()">
                                                <xf:button href="{{ link('account/banner') }}"
                                                    class="button--link" overlay="true">
                                                    {{ phrase('edit_profile_banner') }}
                                                </xf:button>
                                            </xf:if>
                                            <xf:if contentcheck="true">
                                                <div class="buttonGroup-buttonWrapper">
                                                    <xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator_tools') }}</xf:button>
                                                    <div class="menu" data-menu="menu" aria-hidden="true">
                                                        <div class="menu-content">
                                                            <h3 class="menu-header">{{ phrase('moderator_tools') }}</h3>
                                                            <xf:contentcheck>
                                                                <xf:macro template="member_macros" name="moderator_menu_actions"
                                                                    arg-user="{$user}"
                                                                    arg-context="profile" />
                                                            </xf:contentcheck>
                                                        </div>
                                                    </div>
                                                </div>
                                            </xf:if>
                                        </xf:contentcheck>
                                    </div>
                                </xf:if>
                                <!--[XF:action_top_end]-->
                                </xf:contentcheck>
                            </div>
                        </xf:if>

                        <h1 class="memberHeader-name">
                            <span class="memberHeader-nameWrapper">
                                <xf:username user="{$user}" rich="true" href="" />
                            </span>
                            <xf:if is="$user.hasViewableUsernameHistory()">
                                <a class="memberHeader-nameChangeIndicator"
                                    data-xf-click="menu"
                                    data-xf-init="tooltip"
                                    title="{{ phrase('username_changed')|for_attr }}"
                                    role="button"
                                    tabindex="0"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    aria-label="{{ phrase('username_changed')|for_attr }}"><xf:fa icon="fa-history" /></a>
                                <div class="menu" data-menu="menu" aria-hidden="true"
                                    data-href="{{ link('members/username-history', $user, {'menu': 1}) }}"
                                    data-load-target=".js-usernameHistoryBody">
                                    <div class="menu-content">
                                        <h3 class="menu-header">{{ phrase('previous_usernames') }}</h3>
                                        <div class="js-usernameHistoryBody">
                                            <div class="menu-row">
                                                {{ phrase('loading...') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </xf:if>
                        </h1>

                        <xf:if contentcheck="true">
                            <div class="memberHeader-banners">
                                <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>
                            </div>
                        </xf:if>

                        <div class="memberHeader-blurbContainer">
                            <xf:userblurb user="$user" tag="div" class="memberHeader-blurb" />

                            <div class="memberHeader-blurb">
                                <dl class="pairs pairs--inline">
                                    <dt>{{ phrase('joined') }}</dt>
                                    <dd><xf:date time="$user.register_date" /></dd>
                                </dl>
                            </div>

                            <xf:if contentcheck="true">
                                <div class="memberHeader-blurb">
                                    <dl class="pairs pairs--inline">
                                        <dt>{{ phrase('last_seen') }}</dt>
                                        <dd dir="auto">
                                            <xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck>
                                        </dd>
                                    </dl>
                                </div>
                            </xf:if>
                        </div>
                    </div>
                    </div>
                </xf:profilebanner>

                <div class="memberHeader-content">
                    <div class="memberHeader-stats">
                        <div class="pairJustifier">
                            <xf:macro template="member_macros" name="member_stat_pairs"
                                arg-user="{$user}"
                                arg-context="profile" />
                        </div>
                    </div>

                    <xf:if contentcheck="true">
                        <hr class="memberHeader-separator" />

                        <div class="memberHeader-buttons">
                            <xf:contentcheck>
                                <xf:macro template="member_macros" name="member_action_buttons"
                                    arg-user="{$user}"
                                    arg-context="profile" />
                            </xf:contentcheck>
                        </div>
                    </xf:if>
                </div>

            </div>
        </div>

or in other words (if you have made changes already): Cut the part form <div class="block-body"> to the line before <h2 class="block-tabHeader block-tabHeader--memberTabs tabs hScroller".
 
Solution

oO5 Dynasty

Well-known member
It's a lot easier if you move the whole upper part (except the navigation) to the top:

Frist undo the recent changes.

Then insert this anywhere in the member_view template:

HTML:
<xf:page option="headerHtml">
    <div class="block">
        <div class="block-container">

        </div>
    </div>
</xf:page>

then cut this part out and insert it into the blank line in the code avove:

HTML:
        <div class="block-body">
            <div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}">
                <xf:profilebanner user="$user" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
                    <div class="memberHeader-mainContent">
                        <span class="memberHeader-avatar">
                            <span class="avatarWrapper">
                                <xf:avatar user="{$user}" size="l"
                                    href="{{ $user.getAvatarUrl('o') ?: '' }}" />
                                <xf:if is="$user.user_id == $xf.visitor.user_id && $xf.visitor.canUploadAvatar()">
                                    <a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
                                </xf:if>
                            </span>
                        </span>
                        <div class="memberHeader-content memberHeader-content--info">
                        <xf:if contentcheck="true">
                            <div class="memberHeader-actionTop">
                                <xf:contentcheck>
                                <!--[XF:action_top_start]-->
                                <xf:if contentcheck="true">
                                    <div class="buttonGroup">
                                        <xf:contentcheck>
                                            <xf:if is="$user.canBeReported()">
                                                <xf:button href="{{ link('members/report', $user) }}"
                                                    class="button--link" overlay="true">
                                                    {{ phrase('report_verb') }}
                                                </xf:button>
                                            </xf:if>
                                            <xf:if is="$user.user_id == $xf.visitor.user_id && $xf.visitor.canUploadProfileBanner()">
                                                <xf:button href="{{ link('account/banner') }}"
                                                    class="button--link" overlay="true">
                                                    {{ phrase('edit_profile_banner') }}
                                                </xf:button>
                                            </xf:if>
                                            <xf:if contentcheck="true">
                                                <div class="buttonGroup-buttonWrapper">
                                                    <xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator_tools') }}</xf:button>
                                                    <div class="menu" data-menu="menu" aria-hidden="true">
                                                        <div class="menu-content">
                                                            <h3 class="menu-header">{{ phrase('moderator_tools') }}</h3>
                                                            <xf:contentcheck>
                                                                <xf:macro template="member_macros" name="moderator_menu_actions"
                                                                    arg-user="{$user}"
                                                                    arg-context="profile" />
                                                            </xf:contentcheck>
                                                        </div>
                                                    </div>
                                                </div>
                                            </xf:if>
                                        </xf:contentcheck>
                                    </div>
                                </xf:if>
                                <!--[XF:action_top_end]-->
                                </xf:contentcheck>
                            </div>
                        </xf:if>

                        <h1 class="memberHeader-name">
                            <span class="memberHeader-nameWrapper">
                                <xf:username user="{$user}" rich="true" href="" />
                            </span>
                            <xf:if is="$user.hasViewableUsernameHistory()">
                                <a class="memberHeader-nameChangeIndicator"
                                    data-xf-click="menu"
                                    data-xf-init="tooltip"
                                    title="{{ phrase('username_changed')|for_attr }}"
                                    role="button"
                                    tabindex="0"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    aria-label="{{ phrase('username_changed')|for_attr }}"><xf:fa icon="fa-history" /></a>
                                <div class="menu" data-menu="menu" aria-hidden="true"
                                    data-href="{{ link('members/username-history', $user, {'menu': 1}) }}"
                                    data-load-target=".js-usernameHistoryBody">
                                    <div class="menu-content">
                                        <h3 class="menu-header">{{ phrase('previous_usernames') }}</h3>
                                        <div class="js-usernameHistoryBody">
                                            <div class="menu-row">
                                                {{ phrase('loading...') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </xf:if>
                        </h1>

                        <xf:if contentcheck="true">
                            <div class="memberHeader-banners">
                                <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>
                            </div>
                        </xf:if>

                        <div class="memberHeader-blurbContainer">
                            <xf:userblurb user="$user" tag="div" class="memberHeader-blurb" />

                            <div class="memberHeader-blurb">
                                <dl class="pairs pairs--inline">
                                    <dt>{{ phrase('joined') }}</dt>
                                    <dd><xf:date time="$user.register_date" /></dd>
                                </dl>
                            </div>

                            <xf:if contentcheck="true">
                                <div class="memberHeader-blurb">
                                    <dl class="pairs pairs--inline">
                                        <dt>{{ phrase('last_seen') }}</dt>
                                        <dd dir="auto">
                                            <xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck>
                                        </dd>
                                    </dl>
                                </div>
                            </xf:if>
                        </div>
                    </div>
                    </div>
                </xf:profilebanner>

                <div class="memberHeader-content">
                    <div class="memberHeader-stats">
                        <div class="pairJustifier">
                            <xf:macro template="member_macros" name="member_stat_pairs"
                                arg-user="{$user}"
                                arg-context="profile" />
                        </div>
                    </div>

                    <xf:if contentcheck="true">
                        <hr class="memberHeader-separator" />

                        <div class="memberHeader-buttons">
                            <xf:contentcheck>
                                <xf:macro template="member_macros" name="member_action_buttons"
                                    arg-user="{$user}"
                                    arg-context="profile" />
                            </xf:contentcheck>
                        </div>
                    </xf:if>
                </div>

            </div>
        </div>

or in other words (if you have made changes already): Cut the part form <div class="block-body"> to the line before <h2 class="block-tabHeader block-tabHeader--memberTabs tabs hScroller".
Perfect! Exactly what I needed.
Web capture_4-6-2022_153611_user.oo5dynasty.com.jpeg
The Office Thank You GIF
Way To Go Reaction GIF by Hyper RPG
 

oO5 Dynasty

Well-known member
cool. Looks nice (y)
Yes, I'm so excited, because I wanted members to hook up their profile pages. Plus I wanted a nice, and tight look and feel to them.
With the profile banner sitting at the top, it will allow members to make a great first impression. But, also set the tone for the rest of their pages.
Plus give me the ability to add stuff to the sidebar that doesn't compete or fight for presence at the top of their pages. Thank you so much again.
 
Top