MyBB Community Forums

Full Version: [Tutorial] Adding sidebar to your forums
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4
(2012-06-14, 11:52 AM)FooFighter Wrote: [ -> ]I would want a latest posts and another for latest threads in two different side bars, without a pluggin, thanks Smile

That's not possible without a plugin. The data you want isn't loaded on the forum index.
How do I get a sidebar to show up consistently on all pages - threads, sub-forums, etc?

For those who wanted a sidebar on more pages of your forum, I've gone ahead and worked out the code to add it to your forum display and thread display sections.

I started with the base code provided with this tutorial.

However, the first thing you want to do is go to the advanced editor of your global CSS stylesheets. Add this (you can adjust the widths to meet your needs):

#mainwrapper
{
	width:1140px;
	margin: 0 auto;
}
#wrapper_right
{
	width:180px;
	float:right;
}
#wrapper_left
{
	width:960px;
	float:left;
}

Then, in your Header template file, add this before the content div

<div id="mainwrapper">

Close that by going to the footer, and right at the top of the file adding a close div mark

</div>

Then, in your index, forum display and show thread template files, after the header, insert this code:

<div id="wrapper_right">

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

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

<tr>
   <td class="trow2" style="text-align: center">
   </td>
</tr>
</table>
</div>

Then, find the main section of that type of page - whether it's the forums, the posts itself, etc... it's the main areas following the header. Surround those tags with this:

<div id="wrapper_left"> 

{THE MAIN CONTENT TAGS OF THAT TYPE OF PAGE}

</div>
<hr class="hidden" />		<br class="clear" />

And you're all set!
Thanks, very useful.
I wouldn't suggest this..
http://i.imgur.com/7ffKkno.png
You didn't follow the guide correctly, you put the sidebar code under the {$forums}. You must place it above.
Hello, Everything went well for my sidebar but the links are colored white  so it cant be read because mybb has a light background unless you will highlight them. Even the username of the posters cant be seen except for those who customized their username to different colors. The base color of my theme is "leaf". The main forum is fine because the color of the usernames and topics are green so it can be seen unlike with the side bar . Please guide me what else i should add so it can be seen. thank you

{$header}
 <div class="side" style="float: right; width: 19%">
 
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>
  <td class="thead">
       {$boardstats}
{$topStats['LastThreads']}
{$topStats['LastActiveThreads']}
{$topStats['MostViews']}
{$topStats['Posters']}
{$topStats['Reputation']}
{$topStats['Referrals']}
{$topStats['Timeonline']}
{$topStats['NewestUsers']}
  </td>
</tr>

<tr>
  <td class="trow2">
   Text Here
  </td>
</tr>
</table>
 </div>
 {$announcement}
<div class="forum" style="float: left; width: 80%;">{$forums}</div>
Please help
How can I style the search box differently? The way it looks by default is disgusting.
for those who have installed prostats and shoutbox
add the following tags around your {$forums};
<div class="forum" style="float: left; width: 80%;">{$forums}</div>
Below your
<div class="forum" style="float: left; width: 80%;">{$forums}</div>
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>
what do i need to do to get this to follow the page


position: fixed; done but i don't know what i can do
Pages: 1 2 3 4