• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[help me] sidebar horizontally above the forums

Jake Bunce

XenForo moderator
Staff member
#2
You would have to edit this template:

Admin CP -> Appearance -> Templates -> forum_list

I was unable to create the exact layout you want, but these changes will move the sidebar content to the top of the page.

Replace this code:

Code:
<xen:h1>{$xenOptions.boardTitle}</xen:h1>

<xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:index'}" /></xen:container>

<xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
	<meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>

<xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>

<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}:</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>
...with this:

Code:
<xen:h1>{$xenOptions.boardTitle}</xen:h1>

<xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:index'}" /></xen:container>

<xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
	<meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>

<xen:include template="sidebar_visitor_panel" />

<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}:</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:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
Basically you remove the xen:sidebar tags and then move the content of the sidebar above the node list. Then include the sidebar_visitor_panel template.

Then you need to figure out how to put them into columns. I don't have code for that.
 

Brogan

XenForo moderator
Staff member
#3
I've been working on some css based divs to make a grid without a table.
You could use it for this.

This is the basic css:
Code:
.grid_row {
position: relative;
width: 972px;
float: left;
margin: 10px 0;
}

.grid_cell {
position: relative;
width: 228px;
height: 246px;
float: left;
}

    .grid_cell1 {
    left: 6px;
    }

    .grid_cell2 {
    left: 22px;
    }

    .grid_cell3 {
    left: 38px;
    }

    .grid_cell4 {
    left: 54px;
    }
And this would be the html:
Code:
<div class="grid_row">
    <div class="grid_cell grid_cell1">
        Content here
    </div>
    <div class="grid_cell grid_cell2">
        Content here
    </div>
    <div class="grid_cell grid_cell3">
        Content here
    </div>
    <div class="grid_cell grid_cell4">
        Content here
    </div>
</div>
The result is as follows:

grid.PNG

You will just have to change the dimensions to suit your layout.
 
#4
thanks but not stay as I wanted to see

look at the results

Jake Bunce:
img.png

Brogan:
img1.png

Example of what I want:
img2.png


I hope I have been clear ... I appreciate your help
 

Brogan

XenForo moderator
Staff member
#5
Can you implement the code in the second screenshot again and let me know the URL?

It looks like the columns are partly working, it probably just needs some tweaking.
As some of the boxes in the sidebar are dynamic, i.e. the size changes depending on staff online, etc., then you will have to remove any height attributes and just have basic width settings.
 
#6
Done!

My forum_list:
Code:
<xen:h1>{$xenOptions.boardTitle}</xen:h1>

<xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:index'}" /></xen:container>

<xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
    <meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>

<div class="grid_row">
    <div class="grid_cell grid_cell1">
        <xen:include template="sidebar_online_users" />
    </div>
    <div class="grid_cell grid_cell2">
                <!-- 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}:</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 -->
    </div>
    <div class="grid_cell grid_cell3">
        Content here
    </div>
    <div class="grid_cell grid_cell4">
        Content here
    </div>
</div>

<xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
my site: http://forum.desload.net/

thanks ;)
 

Brogan

XenForo moderator
Staff member
#7
I can't really see a problem - it looks to me as if there are 4 columns with content in them.

columns.PNG
 

Brogan

XenForo moderator
Staff member
#9
You will have to split the contents of the sidebar_online_users template if you want to separate staff and normal members.
 

Brogan

XenForo moderator
Staff member
#11
You will just need to play with the css to get it to match as you have effectively replaced the sidebar with this new layout.