[help me] sidebar horizontally above the forums

Gustavo Fernandez · Jan 6, 2011

Hi people, I need to move the sidebar above the forums, horizontally.

image

Help me?

grettings

Jake Bunce · Jan 6, 2011

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.

Paul B · Jan 6, 2011

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:

You will just have to change the dimensions to suit your layout.

Gustavo Fernandez · Jan 6, 2011

thanks but not stay as I wanted to see

look at the results

Jake Bunce:

Brogan:

Example of what I want:

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

Paul B · Jan 6, 2011

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.

Gustavo Fernandez · Jan 6, 2011

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

Paul B · Jan 6, 2011

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

Gustavo Fernandez · Jan 6, 2011

Yes. there are 4 columns, but I need the format of the image number three.

Paul B · Jan 6, 2011

You will have to split the contents of the sidebar_online_users template if you want to separate staff and normal members.

Gustavo Fernandez · Jan 6, 2011

Yes. But what i will Primarily focus is on the format.
How do I get get the same format as the sidebar?

Paul B · Jan 6, 2011

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.

[help me] sidebar horizontally above the forums

Gustavo Fernandez

Active member

Jake Bunce

Well-known member

Paul B

XenForo moderator

Gustavo Fernandez

Active member

Paul B

XenForo moderator

Gustavo Fernandez

Active member

Paul B

XenForo moderator

Gustavo Fernandez

Active member

Paul B

XenForo moderator

Gustavo Fernandez

Active member

Paul B

XenForo moderator

Similar threads

We value your privacy