XF 1.2 Secondary Left SideBar in main Forum List (dual sidebars)

[The1LT]

Hi guys,

I've been searching around for a way to add dual sidebars on my main forum list. Mostly I keep coming across posts like this one:

http://xenforo.com/community/threads/how-to-add-a-sidebar-to-the-left.45538/

which describe how to move the existing sidebar from the right hand side to the left hand side but not really what I'm after.

I would like to keep my right hand sidebar where it is and add a second sidebar on the left hand side of my main forum area where I could populate it with more widgets.

I tried duplicating the sidebar code in the forum_list template and changing the css to float it on the opposite side but no joy. I'm fairly new at this, so just kind of trying things here and there with little success so far.

If anyone's got any pointers would be much appreciated.

Ross

 

[Bram]

Looking for something like this myself. Would be fantastic if a second bar can be included in XF by default.

 

[The1LT]

I just installed XenPorta and was playing around, thought I might be able to achieve it with a layout but it seems the layout is restricted even in the index view to having the forum index always be anchored against the left hand side.

Not sure if this is a XenPorta design element or some kind of underlying Xenforo restriction.

Going to try a couple of the other portals now and see if it's any different.

 

[The1LT]

Coincidence -> http://xenforo.com/community/threads/left-right-sidebar.61030/

 

[The1LT]

ok well looks like I'm not going to get much joy with this and haven't actually found anywhere that it's been done so going to give it a bash myself.

So far I've figured out that the two main templates in question are PAGE_CONTAINER and FORUM_LIST.

I added this to PAGE_CONTAINER.

<xen:if is="{$sidebar}">
                 <!-- sidebar -->
                 <xen:if is="{$contentTemplate} == 'forum_list'">
                       <aside>
                               <div class="sidebar2">
                                        {xen:raw $sidebar}
                               </div>
                      </aside>
                 </xen:if>

Adding this code creates a second side bar which I then styled using SIDEBAR.CSS to make sure it drops in the correct area with the position on the left hand side etc.

The trouble I have now is I don't particularly understand what "xen:raw $sidebar" is doing in terms of if it's creating a new sidebar instance or if I'm merely presenting the same sidebar instance in two different places.

My new secondary left hand placed side bar replicates all the widgets etc. that are in my right hand side bar.

I figured I could go into the CSS for sidebar2 and hide all the widgets except for the ones I want but I'm guessing this is highly inefficient since it will still be processing all the code.

So this is the second main area in forum_list:

<xen:sidebar>
    <xen:edithint template="sidebar.css" />
  
    <xen:hook name="forum_list_sidebar">
        <xen:include template="sidebar_online_users" />
      
        <!-- block: forum_stats -->
        <div class="section">
            <div class="secondaryContent statsList" id="boardStats">
                <h3>{xen:phrase forum_statistics}</h3>
                <div class="pairsJustified">
                    <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                        <dd>{xen:number $boardTotals.discussions}</dd></dl>
                    <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                        <dd>{xen:number $boardTotals.messages}</dd></dl>
                    <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
                        <dd>{xen:number $boardTotals.users}</dd></dl>
                    <dl><dt>{xen:phrase latest_member}:</dt>
                        <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                    <!-- slot: forum_stats_extra -->
                </div>
            </div>
        </div>
        <!-- end block: forum_stats -->                      
    </xen:hook>
</xen:sidebar>

The xen:sidebar tag seems to be what sets the value for whether a sidebar should be shown or not, the trouble I have is that any change to any of this code in terms of switching off the sidebar for forum list by commenting this out or say removing the sidebar_online_users block effects both. So I guess that I have a single sidebar instance being presented on both sides of the page.

Does anyone have any hints for me on splitting these two up?

Is there a way to use conditionals inside of xen:sidebar to identify my sidebar2 div that I've created in PAGE_CONTAINER so that I can switch off the various blocks that I don't want processed. Again I realise I may have this entire thing back to front and that I could be referring to the same instance and am need of two separate instances. Just learning as I'm going at the moment.

Ross

 

[Paul B]

You can create an empty sidebar just using the syntax, it doesn't need to replicate the content of the existing sidebar.

However, you will want to remove the user avatar block.
This is from the FAQ:
How can I add a sidebar without the member avatar block at the top?

<xen:sidebar>
    <xen:container var="$noVisitorPanel">1</xen:container>
    <xen:if is="!{$noVisitorPanel}">
        Sidebar content
    </xen:if>
</xen:sidebar>

You can then populate your sidebar with the content you want.

Don't forget you will need to factor in responsive design and what happens to this additional sidebar at lower browser widths.

 

[The1LT]

Thanks for the help @Brogan,

Is that code not just for activating a sidebar on a page that currently does not have a sidebar active?

What I'm trying to do is add a completely new sidebar onto the same page as one that already has one and create a dual sidebar set up, with one on the left and one on the right. (see attached for where I'm up to at a present with the code I posted)

I did try your suggested approach before going this route and couldn't get the second sidebar to render. I just retried it and wrapped it in a <div> statement to apply the same styling as with my previous approach but again it doesn't render the container at all.

My thought was that <xen:sidebar> was a switch to tell $sidebar that it should render the container but totally new to this so what do I know.

 

[The1LT]

oh and the reason the left side is missing the user block is I just hid it with css styling as a test. I wanted to see if it was possible to use that route which obviously it is but I'm guessing highly inefficient.