Smangii
Pro Member
member is offline
![[avatar]](http://i27.photobucket.com/albums/c163/Smangii/logo.png "[avatar]")
![[msn]](http://images.proboards.com/new/msn.png "[msn]")
![[homepage]](http://images.proboards.com/new/buttons/www_sm.png "[homepage]")
Joined: Feb 2006
Posts: 4,364
Location: Basement
|  | Smangii's Side Tables
« Thread Started on Jul 31, 2008, 2:47am » | |
Smangii's Side Tables
REVISED VERSION!!
Click Here For Live Previews
Looking for the old version? Click Here
BEFORE USING PLEASE FOLLOW THESE STEPS:
1) Placing the code
Place the Side Tables Global Headers ABOVE your other content in global headers.
Place the Side Tables Global Footers BELOW your other content in global footers.
* Some problems might arise from placement depending on what codes you have already. Swap back and forth just to see what works.
If you are using the "Border-Around-Forum" code and want the side tables WITHIN that border, place the Side Table Global Headers BELOW the Border-Around-Forum Global Headers. Then, place the Side Tables Global Footers ABOVE the Border-Around-Forum Global Footers. If you want the side tables OUTSIDE that border, place the Side Tables Global Headers ABOVE the Border-Around-Forum Global Headers. Then, place the Side Tables Global Footers BELOW the Border-Around-Forum Global Footers. (I know that's very wordy, but I'm sure you'll figure it out  )
2) Resizing your forum
IMPORTANT!!
REMOVE ALL CODES you currently have that resize the forum's width before continuing.
This is a crucial step--DO IT!!!
FLUID FORUMS:
If you want your forum to be FLUID, or stretch across the entire page, ignore this step #2 and go right to step #3.
FIXED FORUMS:
To resize your forum to a specific width, just find the following line in the side tables code:
<table width="95%" align="center" cellpadding="0px" cellspacing="0px"> Edit the "95%" to a specific width, like "1024px". This is the width of the ENTIRE forum, side tables included. If you resize your forum's width to a specific amount, you may also want to resize the welcome table. Find this section in the side tables code:
<script>
// Resize the welcome table - can be % or a number of pixels
document.getElementsByTagName('table')[0].style.width='95%';
</script> And edit the '95%' to any pixel amount, like '1024px'.
3) Adding more boxes
You may add or remove as many boxes as you like. For the codes for LEFT and RIGHT side tables, copy this code:
<!-- ===== BOX START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table> And paste it above the line that says:
<! -- ***NOTE*** Place any extra added side tables above this line // -->
For the DOUBLE sided code, also copy the above section but change this variable:
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1"> Use "sidetablesright" if you are adding another box on the right (in your global footers), or "sidetablesleft" if you are adding another box on the left (in your global headers).
4) Resizing the side tables
For the LEFT and RIGHT side table codes, find this part of the code:
<style type="text/css">
#sidetables { width: 200px; margin-bottom: 20px; margin-right: 20px; }
</style> Change 200px to any width, in pixels.
For the DOUBLE Sided table code, find this part:
<style type="text/css">
#sidetablesright { width: 200px; margin-bottom: 20px; margin-left: 20px; }
#sidetablesleft { width: 200px; margin-bottom: 20px; margin-right: 20px; }
</style> Change the 200px to adjust the width of each.
Also, find this portion of the code to resize the welcome table:
<script>
// Resize the welcome table - can be % or a number of pixels
document.getElementsByTagName('table')[0].style.width='95%';
</script> Change whatever number you have in the '95%' spot to '100%'. Even if you resized the table in step 1, DO THIS CHANGE. This makes the welcome table and forum the same width.
================================================================
LEFT SIDE
GLOBAL HEADER:
Code:<!-- =====
START Smangii's {LEFT} Side Tables *REVISED*
Global Header
===== -->
<script>
// Resize the welcome table - can be % or a number of pixels
document.getElementsByTagName('table')[0].style.width='95%';
</script>
<style type="text/css">
#sidetables { width: 200px; margin-bottom: 20px; margin-right: 20px; }
</style>
<table width="95%" align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td vAlign="top">
<!-- ===== BOX #1 START ===== -->
<table id="sidetables" cellpadding="4px" class="bordercolor" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #2 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #3 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<! -- ***NOTE*** Place any extra added side tables above this line // -->
</td><td align="center" vAlign="top" width="100%"> |
|
GLOBAL FOOTER:
Code:<!-- =====
START Smangii's {LEFT} Side Tables *REVISED*
Global Footer
===== -->
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {
width = '100%';
}}}
//-->
</script>
</td></tr></table> |
|
RIGHT SIDE
GLOBAL HEADER:
Code:<!-- =====
START Smangii's {RIGHT} Side Tables *REVISED*
Global Header
===== -->
<script>
// Resize the welcome table - can be % or a number of pixels
document.getElementsByTagName('table')[0].style.width='95%';
</script>
<style type="text/css">
#sidetables { width: 200px; margin-bottom: 20px; margin-left: 20px; }
</style>
<table width="95%" align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td align="center" vAlign="top" width="100%"> |
|
GLOBAL FOOTER:
Code:<!-- =====
START Smangii's {RIGHT} Side Tables *REVISED*
Global Footer
===== -->
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {
width = '100%';
}}}
//-->
</script>
</td>
<td vAlign="top">
<!-- ===== BOX #1 START ===== -->
<table id="sidetables" cellpadding="4px" class="bordercolor" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #2 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #3 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<! -- ***NOTE*** Place any extra added side tables above this line // -->
</td></tr></table> |
|
DOUBLE SIDED
GLOBAL HEADER:
Code:<!-- =====
START Smangii's {DOUBLE} Side Tables *REVISED*
Global Header
===== -->
<script>
// Resize the welcome table - can be % or a number of pixels
document.getElementsByTagName('table')[0].style.width='95%';
</script>
<style type="text/css">
#sidetablesright { width: 200px; margin-bottom: 20px; margin-left: 20px; }
#sidetablesleft { width: 200px; margin-bottom: 20px; margin-right: 20px; }
</style>
<table width="95%" align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td vAlign="top">
<!-- ===== BOX #1 START ===== -->
<table id="sidetablesleft" cellpadding="4px" class="bordercolor" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr><tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #2 START ===== -->
<table id="sidetablesleft" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #3 START ===== -->
<table id="sidetablesleft" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<! -- ***NOTE*** Place any extra added side tables above this line // -->
</td>
<td align="center" vAlign="top" width="100%"> |
|
GLOBAL FOOTER:
Code:<!-- =====
START Smangii's {DOUBLE} Side Tables *REVISED*
Global Footer
===== -->
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {
width = '100%';
}}}
//-->
</script>
</td>
<td vAlign="top">
<!-- ===== BOX #1 START ===== -->
<table id="sidetablesright" cellpadding="4px" class="bordercolor" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #2 START ===== -->
<table id="sidetablesright" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<!-- ===== BOX #3 START ===== -->
<table id="sidetablesright" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
Side Box Title
</td></tr>
<tr><td class="windowbg">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</td></tr></table>
<! -- ***NOTE*** Place any extra added side tables above this line // -->
</td></tr></table> |
|
|
|
|
![[Home]](http://images.proboards.com/new/menu/home.png "[Home]")
![[New Topics]](http://s2.images.proboards.com/menu/topics.png "[New Topics]")
![[Help]](http://images.proboards.com/new/menu/help.png "[Help]")
![[Search]](http://images.proboards.com/new/menu/search.png "[Search]")
![[Login]](http://images.proboards.com/new/menu/login.png "[Login]")
![[Register]](http://images.proboards.com/new/menu/register.png "[Register]")
![[Search This Thread]](http://images.proboards.com/new/buttons/search2.png "[Search This Thread]")
![[Share Topic]](http://s2.images.proboards.com/new/buttons/share.png "[Share Topic]")
![[Print]](http://images.proboards.com/new/buttons/print.png "[Print]")
Author
Logged![[image]](http://smangii.proscripts.co.uk/si/text4.png "[image]")
![[image]](http://i27.photobucket.com/albums/c163/Smangii/proboards%20skin%20tutorial/SIG.png "[image]")