XF 2.2 Move the members view sidebar under the profile cover

oO5 Dynasty

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.
Love the Profile page set up on my site.

Love the Profile page set up on my site.

  • Media owner oO5 Dynasty
  • Date added
  • Comments 5
Can not wait to finish the website, and fully Launch in January of 2016. Still a lot more work...
This is how my xf1 site functioned.
 
Last edited:
Solution
nocte
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...
Sort by date Sort by votes
nocte said:
It seems you did not search resources?

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

xenforo.com

Unmaintained - Profile Cover Photo / Banner Image Enhancements

This addon moves user profile cover image outside of the user info area to give it it's own spotlight. On the user profile page you can now click on both the user cover photo and the user avatar and they will open in the native XenForo lightbox...
xenforo.com xenforo.com
Click to expand...
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.
Love the Profile page set up on my site.

Love the Profile page set up on my site.

  • Media owner oO5 Dynasty
  • Date added
  • Comments 5
Can not wait to finish the website, and fully Launch in January of 2016. Still a lot more work...

2nd picture

2nd picture

www.oO5Dynasty.com
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
nocte said:
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>
Click to expand...
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.webp
 
Upvote 0 Downvote
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".
 
Upvote 1 Downvote
Solution
nocte said:
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".
Click to expand...
Perfect! Exactly what I needed.
Web capture_4-6-2022_153611_user.oo5dynasty.com.webp
The Office Thank You GIF
Way To Go Reaction GIF by Hyper RPG
 
Upvote 0 Downvote
nocte said:
cool. Looks nice (y)
Click to expand...
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.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Hareon
  • Solved
XF 2.2 Increase the Profile Cover area
Replies
2
Views
120
Hareon
Hareon
Wilouness
  • Question Question
Sidebar under the conversation list
Replies
0
Views
305
Wilouness
Wilouness
polle
  • Question Question
XF 1.1 Facebook chat in members view sidebar
Replies
4
Views
750
polle
polle
Back
Top Bottom