[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


Messages In This Thread
[Tutorial] Adding sidebar to your forums - by koz - 2011-07-01, 01:41 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)