Thread Rating:
  • 5 Vote(s) - 4.6 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Adding sidebar to your forums
#1
If you want a JQuery collapsible side bar check out the tutorial by Joshee

This tutorial has been updated for 2012

Well I'm going to be showing you how to add a sidebar to your forum homepage. This is for people who know how to use HTML and can customize it without the use of a plugin.

Sidebar Preview:
   

First you need to go to your ACP > Templates & Style > Templates > Your Theme > Index Page Templates > index.

When this is open you want to look at find the following;
{$header}
{$forums}
{$boardstats}

Below your {$header} add the following code;
<div class="side" style="float: right; width: 19%">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>
   <td class="thead">
        Title Here
   </td>
</tr>

<tr>
   <td class="trow2">
	Text Here
   </td>
</tr>
</table>
</div>

Then add the following tags around your {$forums};
<div class="forum" style="float: left; width: 80%;">{$forums}</div>

When you're done your index should look a little something like this;
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<div class="side" style="float: right; width: 19%">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>
   <td class="thead">
		Title Here
   </td>
</tr>

<tr>
   <td class="trow2">
		Text Here
   </td>
</tr>
</table>
</div>

<div class="forum" style="float: left; width: 80%">{$forums}</div>
{$boardstats}

<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

You're done!

If you want search bar from preview add the follow to your side div;
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
		<tr>
			<td class="thead"><strong>Search</strong></td>
		</tr>
		<tr>
			<td class="trow1" align="center">
			<form method="post" action="{$mybb->settings['bburl']}/search.php">
			<input type="hidden" name="action" value="do_search" />
			<input type="hidden" name="postthread" value="1" />
			<input type="hidden" name="forums" value="all" />
			<input type="hidden" name="showresults" value="threads" />
			<input type="text" class="textbox" name="keywords" value="" />
			{$gobutton}
			</form>
			</td>
		</tr>
	</table>
Reply
#2
Thanks much for this tutorial. Helpful.
Reply
#3
Bookmarked for future, thanks Smile
Reply
#4
What tells us whether the sidebar will be on the left or right side?

Thanks
Reply
#5
(08-19-2011, 03:40 AM)FooFighter Wrote: What tells us whether the sidebar will be on the left or right side?

Thanks
<div class="forums" style="float: right; width: 79%;">
{$forums}
</div>
And
<div class="sidebar" style="float: left; width: 20%">

Reply
#6
very good tutorial! thanks man Smile
Reply
#7
Nice tutorial! Wouldn't you consider enclosing it all in a 'wrapper' div and then setting the left and right margins to auto... this would centre the whole layout rather than having it off-centre to the left. Its not very noticeable in the screenshot you've provided but if someone is viewing it in a large hi/res monitor it'd be much more noticeable.
Reply
#8
(08-19-2011, 04:36 AM)Camgaertner Wrote: <div class="forums" style="float: right; width: 79%;">
{$forums}
</div>
And
<div class="sidebar" style="float: left; width: 20%">

So that code is just the default coding for the side bars on the left side, I'm taking it?
Reply
#9
Well you can put the following into your css:
.forums{}
.sidebar{}

Then just customize the sidebars that way if you wish to customize their look, not you need to know css to customize them. These are not really the fault sidebar codings, there really is no default.
Reply
#10
Bookmarked.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)