FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!

MyBB Tutorial: How to add a sidebar to your forums




In this MyBB tutorial, I will be showing you how to add a sidebar to your forum index through the use of html. It's a very simple method that can be done without using a plugin.

Sidebar Preview: http://i.imgur.com/NKJeo.png

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;
Code:
{$header}
{$forums}
{$boardstats}


Below your {$header} add the following code;
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};
Code:
<div class="forum" style="float: left; width: 80%;">{$forums}</div>


When you're done your index should look a little something like this;
Code:
<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;
Code:
   <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>




2 blog comments below

THANKS Koz! This is really a great tutorial. I've got a dummy myBB Forum, so will try this out.
deanhills on Fri Oct 12, 2012 6:23 pm
You're completely welcome. Take a screen shot and show me after. I always like people who enjoy the tutorials I write.
drunkenkoz on Sat Oct 13, 2012 4:40 am



FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.