Upmost Side Tables By Game (CB)

We all know of the infamous Smangiis Side Tables, but the request that I always see is users wanting to align the side tables next to the welcome table. That is what this code does.

INCLUDED

• Left side
  
• Right side
  
• Both sides
  

PREVIEW of both sides

WHAT TO EDIT

• Welcome table width (located in header portion of code)
  
• Forum width (located in footer portion of code)
  
• Side boxes content
  
• Add your banner image via your admin panel
  

IMPORTANT

• Banner Image should be the same width as forum and welcome table
  
• Remove any forum width re size codes from your headers and footers
  

TIP

• To add more boxes just keep adding this part:
  
  <table class = "boxes"><tr><td class = "boxtitle">BOX 1</td></tr>
  <tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
  </table>
  
  
• You can edit the space between the forum and side tables in the CSS portion of the code using the ids #rightside, #leftside. The ids have already been supplied in the style sheet.
  
• Each section of the boxes have there own class which can be edited through CSS. The classes have already been supplied in the style sheet.
  

LEFT SIDE

HEADER

<!-- (start) Left Side Tables by Game (header section) -->
<style>
.boxes {
width: 200px;
height: 200px;
vertical-align: top;
}
.boxtitle {
color: white;
background-color: blue;
text-align: center;
font-weight: bold;
}
.boxcontent {
height: 300px;
background-color: white;
text-align: center;
}
#leftside {
/**Set distance between side tables and forum**/
padding-right: 10px;
}
</style>

<script>
//EDIT HERE
var wtw = "700px" //Width for Welcome Table. (Should be the same as banner image width)

//NO EDIT HERE
document.getElementsByTagName("table")[0].style.width = wtw
</script>

<!-- Start Table-->
<center>
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top">
<!--Left Side Table-->
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top" id = "leftside">

<!--EDIT HERE-->

<!--box 1-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 1</td></tr>
<tr><td class = "boxcontent" height = "300px" valign = "top">Content Here</td></tr>
</table>

<!--box 2-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 2</td></tr>
<tr><td class = "boxcontent" height = "300px" valign = "top">Content Here</td></tr>
</table>

<!--box 3-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 3</td></tr>
<tr><td class = "boxcontent" height = "300px" valign = "top">Content Here</td></tr>
</table>

<!-- NO EDIT -->
</td><td valign = "top">

<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top">
<div id = "weltab"></div></td></tr>
<tr><td valign = "top">


<script type="text/javascript">
/* Remove "Hey, X" and « Home » */
var td=document.getElementsByTagName("td");
td[1].lastChild.style.display="none";
td[2].style.display="none";
</script>
<script type="text/javascript">
var tab = document.getElementsByTagName("table")[0];
document.getElementById("weltab").appendChild(tab)
</script>

<!-- (end) UPMOST SIDE TABLES BY GAME-->

FOOTER

<!-- (start) UPMOST SIDE TABLES BY GAME (footer portion)-->  
<script type="text/javascript">
<!--
wtw = document.getElementsByTagName("table")[0].style.width
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {

//EDIT HERE
//Forum width (should be the same as welcome table width)

width = '700px';

}}}
//-->
</script>

</td></tr></table>
</td></tr></table>
</center>
<!-- (end) UPMOST SIDE TABLES BY GAME -->

RIGHT SIDE

HEADER
<!-- (start) UPMOST SIDE TABLES BY GAME -->
<style>
.boxes {
width: 200px;
vertical-align: top;
}
.boxtitle {
color: white;
background-color: blue;
text-align: center;
font-weight: bold;
}
.boxcontent {
height: 300px;
background-color: white;
text-align: center;
}
#rightside {
padding-left: 10px; /****Set distance between side tables and forum****/
}
</style>

<script>
//EDIT HERE
var wtw = "700px" //Width for Welcome Table. (Should be the same as banner image width)

//NO EDIT HERE
document.getElementsByTagName("table")[0].style.width = wtw
</script>

<!-- Start Table-->
<center>
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top">


<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top">
<div id = "weltab"></div></td></tr>
<tr><td valign = "top">

<script type="text/javascript">
/* Remove "Hey, X" and « Home » */
var td=document.getElementsByTagName("td");
td[1].lastChild.style.display="none";
td[2].style.display="none";
</script>
<script type="text/javascript">
var tab = document.getElementsByTagName("table")[0];
wel = document.getElementById("weltab");
wel.innerHTML = tab.innerHTML;
tab.style.display = "none";
</script>

<!-- (end) UPMOST SIDE TABLES BY GAME-->

FOOTER
<!-- (start) UPMOST SIDE TABLES BY GAME (footer portion)-->
</td></tr></table>
</td><td valign = "top">
<!--Right Side Table-->
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top"  id = "rightside">

<!--EDIT HERE-->

<!--box 1-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 1</td></tr>
<tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
</table>

<!--box 2-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 2</td></tr>
<tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
</table>

<!--box 3-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 3</td></tr>
<tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
</table>


</td></tr></table>
</td></tr></table>
</center>

<script type="text/javascript">
<!--
wtw = document.getElementsByTagName("table")[0].style.width
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {

//EDIT HERE
//Forum width (should be the same as welcome table width)

width = '700px';

}}}
//-->
</script>

<!-- (end) UPMOST SIDE TABLES BY GAME -->

BOTH SIDES

HEADER

<!-- (start) Left Side Tables by Game (header section) -->
<style>
.boxes {
width: 200px;
height: 200px;
vertical-align: top;
}
.boxtitle {
color: white;
background-color: blue;
text-align: center;
font-weight: bold;
}
.boxcontent {
height: 300px;
background-color: white;
text-align: center;
}
#leftside {
/**Set distance between side tables and forum**/
padding-right: 10px;
}
#rightside {
/**Set distance between side tables and forum**/
padding-left: 10px;
}
</style>

<script>
//EDIT HERE
var wtw = "727px" //Width for Welcome Table. (Should be the same as banner image width)

//NO EDIT HERE
document.getElementsByTagName("table")[0].style.width = wtw
</script>

<!-- Start Table-->
<center>
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top">
<!--Left Side Table-->
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top" id = "leftside">

<!--EDIT HERE-->

<!--box 1-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 1</td></tr>
<tr><td class = "boxcontent" height = "300px" valign = "top">Content Here</td></tr>
</table>

<!--box 2-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 2</td></tr>
<tr><td class = "boxcontent" height = "300px" valign = "top">Content Here</td></tr>
</table>

<!--box 3-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 3</td></tr>
<tr><td class = "boxcontent" height = "300px" valign = "top">Content Here</td></tr>
</table>

<!-- NO EDIT -->
</td><td valign = "top">

<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top">
<div id = "weltab"></div></td></tr>
<tr><td valign = "top">


<script type="text/javascript">
/* Remove "Hey, X" and « Home » */
var td=document.getElementsByTagName("td");
td[1].lastChild.style.display="none";
td[2].style.display="none";
</script>
<script type="text/javascript">
var tab = document.getElementsByTagName("table")[0];
wel = document.getElementById("weltab");
wel.innerHTML = tab.innerHTML;
tab.style.display = "none";
</script>

<!-- (end) UPMOST SIDE TABLES BY GAME-->

FOOTER

<!-- (start) UPMOST SIDE TABLES BY GAME (footer portion)-->
</td></tr></table>
</td><td valign = "top">
<!--Right Side Table-->
<table cellspacing = "0" cellpadding = "0"><tr><td valign = "top"  id = "rightside">

<!--EDIT HERE-->

<!--box 1-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 1</td></tr>
<tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
</table>

<!--box 2-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 2</td></tr>
<tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
</table>

<!--box 3-->
<table class = "boxes"><tr><td class = "boxtitle">BOX 3</td></tr>
<tr><td class = "boxcontent" valign = "top">Content Here</td></tr>
</table>


</td></tr></table>
</td></tr></table>
</center>

<script type="text/javascript">
<!--
wtw = document.getElementsByTagName("table")[0].style.width
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {

//EDIT HERE
//Forum width (should be the same as welcome table width)

width = '727px';

}}}
//-->
</script>

<!-- (end) UPMOST SIDE TABLES BY GAME -->


ENJOY!