MyBB Community Forums
[Tutorial] Adding sidebar to your forums - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [Tutorial] Adding sidebar to your forums (/thread-97828.html)

Pages: 1 2 3


[Tutorial] Adding sidebar to your forums - koz - 2011-07-01

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;
{$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>



RE: [Tutorial] Adding sidebar to your forums - Camgaertner - 2011-08-17

Thanks much for this tutorial. Helpful.


RE: [Tutorial] Adding sidebar to your forums - Everett777 - 2011-08-17

Bookmarked for future, thanks Smile


RE: [Tutorial] Adding sidebar to your forums - FooFighter - 2011-08-19

What tells us whether the sidebar will be on the left or right side?

Thanks


RE: [Tutorial] Adding sidebar to your forums - Camgaertner - 2011-08-19

(2011-08-19, 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%">




RE: [Tutorial] Adding sidebar to your forums - Ady Moldovan - 2011-08-19

very good tutorial! thanks man Smile


RE: [Tutorial] Adding sidebar to your forums - zillionz - 2011-08-19

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.


RE: [Tutorial] Adding sidebar to your forums - FooFighter - 2011-08-20

(2011-08-19, 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?


RE: [Tutorial] Adding sidebar to your forums - koz - 2011-09-01

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.


RE: [Tutorial] Adding sidebar to your forums - vodka - 2011-09-02

Bookmarked.