How To Add a Left Column to your Forums

[Jake Bunce]

How do I add a left column to my forums?

NOTE: There is a lot of tweaking involved in modifying your layout like this. This code is just an example, minus the tweaking. I recommend you post on www.vbulletintemplates.com for help with the tweaking aspect of editing your layout.

To add content to the left of your forum requires modifying the header and footer templates. These templates can be edited in your:

Admin CP -> Styles & Templates -> Style Manager -> Common Templates (in the menu)

An example of the code you would use in your header template is below. Add the code in red:


<!-- /logo -->

<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

<td width="150" valign="top">
YOUR CONTENT HERE
</td>

<td valign="top">

<!-- content table -->
$spacer_open

$_phpinclude_output


And then in your footer you would use:


<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />

$spacer_close
<!-- /content area table -->

</td>

</tr>
</table>

<form action="$vboptions[forumhome].php" method="get">


edit - changed to cellpadding="0", layout error.

[Jake Bunce]

Or a right column...

An example of the code you would use in your header template is below. Add the code in red:

<!-- /logo -->

<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

<td valign="top">

<!-- content table -->
$spacer_open

$_phpinclude_output


And then in your footer you would use:


<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />

$spacer_close
<!-- /content area table -->

</td>

<td width="150" valign="top">
YOUR CONTENT HERE
</td>

</tr>
</table>

<form action="$vboptions[forumhome].php" method="get">


edit - changed to cellpadding="0", layout error.

[Jake Bunce]

The instructions above will work to create a column, but they also cause some width and spacing problems. This post addresses those problems.

First, notice how the overall width of the forum is off when the column is added:

14327

This is because the content spacer uses your forum width, but the column adds an additional chunk which isn't accounted for. You can fix this by editing this template:

Admin CP -> Styles & Templates -> Style Manager -> « » -> spacer_open

Replace the red code:


<!-- open content container -->
<if condition="$show['old_explorer']">
<table cellpadding="0" cellspacing="0" border="0" width="$stylevar[outertablewidth]" align="center"><tr><td class="page" style="padding:0px $stylevar[spacersize]px 0px $stylevar[spacersize]px">
<else />
<div align="center">
<div class="page" style="width:$stylevar[outerdivwidth]; text-align:$stylevar[left]">
<div style="padding:0px $stylevar[spacersize]px 0px $stylevar[spacersize]px">
</if>


...with the blue code:


<!-- open content container -->
<if condition="$show['old_explorer']">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"><tr><td class="page" style="padding:0px $stylevar[spacersize]px 0px $stylevar[spacersize]px">
<else />
<div align="center">
<div class="page" style="width:100%; text-align:$stylevar[left]">
<div style="padding:0px $stylevar[spacersize]px 0px $stylevar[spacersize]px">
</if>


Now the content area will contract to fill 100% of the available space (after the column is accounted for). Notice the difference this makes:

14328

Now we can add some padding to the column content by adding the blue code in addition to the red code in the header template:


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
<!--
NEW HEADER &amp; NAVBAR

Now that the nav buttons are in the
navbar template, you can stick whatever
you like into this space.

This makes it much easier for novice
admins to customize their header
template without affecting important
navigation elements.
-->
</td>
</tr>
</table>
<!-- /logo -->

<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

<td width="150" valign="top" style="padding: $stylevar[cellpadding]px;">
YOUR CONTENT HERE
</td>

<td valign="top">

<!-- content table -->
$spacer_open

$_phpinclude_output


You will notice the column content isn't flush with the edge anymore which makes it look a little cleaner:

14329

Now we can make it so the column background matches with the rest of the page by adding a class reference (in green):


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
<!--
NEW HEADER &amp; NAVBAR

Now that the nav buttons are in the
navbar template, you can stick whatever
you like into this space.

This makes it much easier for novice
admins to customize their header
template without affecting important
navigation elements.
-->
</td>
</tr>
</table>
<!-- /logo -->

<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

<td width="150" valign="top" class="page" style="padding: $stylevar[cellpadding]px;">
YOUR CONTENT HERE
</td>

<td valign="top">

<!-- content table -->
$spacer_open

$_phpinclude_output


Now the background matches:

14330

The end result is a much cleaner column addition.