2011-07-01, 01:41 PM
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:
[attachment=26516]
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;
Below your {$header} add the following code;
Then add the following tags around your {$forums};
When you're done your index should look a little something like this;
You're done!
If you want search bar from preview add the follow to your side div;
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:
[attachment=26516]
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>