How To Add a Left Column to your Forums

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Jake Bunce
    Senior Member
    • Dec 2000
    • 46598
    • 3.6.x

    How To Add a Left Column to your Forums

    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.

    Originally posted by Jake Bunce
    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:

    Code:
    <!-- /logo -->
    
    [color=red]<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">[/color]
    
    <!-- content table -->
    $spacer_open
    
    $_phpinclude_output
    And then in your footer you would use:

    Code:
    <br />
    <div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
    <br />
    
    $spacer_close
    <!-- /content area table -->
    
    	[color=red]</td>
    
    	</tr>
    </table>[/color]
    
    <form action="$vboptions[forumhome].php" method="get">
    edit - changed to cellpadding="0", layout error.
    Last edited by Jake Bunce; Sat 1 Oct '05, 11:00am.
  • Jake Bunce
    Senior Member
    • Dec 2000
    • 46598
    • 3.6.x

    #2
    Or a right column...

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

    Code:
    <!-- /logo -->
    
    [color=red]<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
    	<tr>
    
    	<td valign="top">[/color]
    
    <!-- content table -->
    $spacer_open
    
    $_phpinclude_output
    And then in your footer you would use:

    Code:
    <br />
    <div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
    <br />
    
    $spacer_close
    <!-- /content area table -->
    
    	[color=red]</td>
    
    	<td width="150" valign="top">
    		YOUR CONTENT HERE
    	</td>
    
    	</tr>
    </table>[/color]
    
    <form action="$vboptions[forumhome].php" method="get">
    edit - changed to cellpadding="0", layout error.
    Last edited by Jake Bunce; Sat 1 Oct '05, 10:59am.

    Comment

    • Jake Bunce
      Senior Member
      • Dec 2000
      • 46598
      • 3.6.x

      #3
      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:

      [ATTACH]14327[/ATTACH]

      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:

      Code:
      <!-- open content container -->
      <if condition="$show['old_explorer']">
      	<table cellpadding="0" cellspacing="0" border="0" width="[color=red]$stylevar[outertablewidth][/color]" 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:[color=red]$stylevar[outerdivwidth][/color]; text-align:$stylevar[left]">
      			<div style="padding:0px $stylevar[spacersize]px 0px $stylevar[spacersize]px">
      </if>
      ...with the blue code:

      Code:
      <!-- open content container -->
      <if condition="$show['old_explorer']">
      	<table cellpadding="0" cellspacing="0" border="0" width="[color=blue]100%[/color]" 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:[color=blue]100%[/color]; 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:

      [ATTACH]14328[/ATTACH]

      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:

      Code:
      <!-- 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 -->
      
      [color=red]<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
      	<tr>
      
      	<td width="150" valign="top" [color=blue]style="padding: $stylevar[cellpadding]px;"[/color]>
      		YOUR CONTENT HERE
      	</td>
      
      	<td valign="top">[/color]
      
      <!-- 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:

      [ATTACH]14329[/ATTACH]

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

      Code:
      <!-- 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 -->
      
      [color=red]<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
      	<tr>
      
      	<td width="150" valign="top" [color=green]class="page"[/color] [color=blue]style="padding: $stylevar[cellpadding]px;"[/color]>
      		YOUR CONTENT HERE
      	</td>
      
      	<td valign="top">[/color]
      
      <!-- content table -->
      $spacer_open
      
      $_phpinclude_output
      Now the background matches:

      [ATTACH]14330[/ATTACH]

      The end result is a much cleaner column addition.

      Comment

      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
      Working...