Jan 13, 2014 22:12:09 GMT -5 Smangii's Side Tables ... for V5!

Based on my old V4 code found here. I know the PB admins made a plugin for this already...but meh, I felt like doing it anyway.
Maybe someone can find this useful so my time wasn't wasted 


READ FIRST:

If you have MULTIPLE THEMES... This code will best work in Global Headers, to be viewable on all your themes. However, if you have multiple themes, I would recommend sticking to the Sidebar Redux plugin if that works for you

If you have ONE THEME... (Or just a few themes) This code will work best in the Forum Wrapper template, since it can utilize the Forum Wrapper Loops & Variables, and you can control where you wan the side tables placed. 

Currently this code is only for the LEFT side... if requested enough, I'll make one specific for the Right side, but if you are nifty with HTML it's not hard to figure out.

PREVIEW:



Want a live preview? Check out my test board and sign up so you can change the theme to "Smangii's Side Tables".

---

STYLESHEET / CSS CODE:

This can go either directly into your Theme's Stylesheet, or if you are putting this in Global Headers, remember to wrap it in <style> </style>


/* SMANGII'S SIDE TABLES FOR V5 - CSS */
#smangiiSideTables, #sideforum { width: 100%; }
#sidebar, #sideforum { vertical-align: top; }

/* Adjust size and spacing of the side tables below */
.sidetable { width: 225px; margin-bottom: 20px; margin-right: 20px; }
#sidebar { width: 245px; }


All you have to edit to adjust the width/spacing of the sidebars are these values:
The margins are the space between the side tables and the forum, and the side tables to each other.
The #sidebar width should be your .sidetable width + your margin (so in this case, +20 more).

.sidetable { width: 225px; margin-bottom: 20px; margin-right: 20px; }
#sidebar { width: 245px; }

EXTRA QUICK LINKS:




HTML / LAYOUT TEMPLATE CODE:

This can do directly into your Forum Wrapper template, or Global Headers.
If placing into Forum Wrapper, this code is best placed below </header>


<!-- START SMANGII'S *LEFT* SIDE TABLES FOR V5 - SMANGII.PROBOARDS.COM -->
<table id="smangiiSideTables"><tr><td id="sidebar">


<!-- SIDE TABLE #1 START -->
<div class="sidetable container">
<div class="title-bar"><h2>Side tables!!!</h2></div>
<div class="content cap-bottom pad-all-double">
Welcome to $[forum.name]!
<br /><br />
You can put lots of stuff here! Links, text, and even use ProBoard's loops and variables from the Forum Wrapper template such as:
<br /><br />
$[login_link] or $[register_link]
</div>
</div>


<!-- SIDE TABLE #2 START -->
<div class="sidetable">
<div class="container content-box pad-all-double">
Remember to use <b>HTML!</b><br>
You can customize the boxes however you want.
</div>
</div>                        


<!-- SIDE TABLE #3 START -->
<div class="sidetable container">
<div class="title-bar"><h2>Quick Links</h2></div>
<ol class="quick_links">
<li><a href="http://smangii.proboards.com">Slightly Insane</a></li>
<li><a href="http://smangii.proboards.com/board/27/proboards-themes-database">V5 Themes</a></li>
<li><a href="http://smangii.proboards.com/board/29/proboards-code-database">V5 Codes</a></li>
<li><a href="http://support.proboards.com">ProBoards Support</a></li>
</ol>
</div>


<!-- place this code below your last side table -->
</td><td id="sideforum">
<!-- END SMANGII'S SIDE TABLES - BEGIN REST OF FORUM -->


...one last bit of code, but is most important!
Place this bottom code below $[footer] in your Forum Wrapper.
OR if you are using Global Headers/Footers, place this into your Global Footers.


<!-- place this code below $[footer] -->
</td></tr></table>
<!-- END SMANGII'S SIDE TABLES FOR V5 - SMANGII.PROBOARDS.COM -->

That's all! If you need help adding a side table or editing anything, let me know

Enjoy!