Post by Smangii on Jun 17, 2009 15:02:27 GMT -5
CLICK HERE FOR LIVE PREVIEWS - This has the tables directly as if you would copy & paste the code as is.
Important Notes - *** PLEASE READ BEFORE USING!!***
- First, REMOVE any "forum width resize" codes you may have in your headers/footers.
WHY? This code comes with one already and it's essential to the way this code works. - Also, REMOVE any "banner under ads" or "welcome table under ads" codes you may have. This code comes with one (if you want the side tables next to your banner) and it can easily be removed. (see next bullet)
- If you want the side tables BELOW your welcome table remove this part of the code:
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script> - How do I add another box? - Copy and paste the following code right below your other boxes.
<!-- CUSTOM SIDE BOX //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX INFORMATION
</td>
</tr>
</table>
<br />
Editing the Code(s)[/size]
- 200px - This number is the width of the actual boxes on the sides. 200px is the default.
- BOX # TITLE - This is going to be the title of the box, as shown in the preview as "BOX #1 TITLE". You may change this to whatever.
- BOX # INFORMATION - This is going to be the content within the boxes. Change this to whatever.
- 700 - This is the width of your ENTIRE forum (the boards and info center) as if the side boxes were NOT there. 700 is the default.
Boxes on the LEFT Side of your forum:
GLOBAL HEADERS:
<!--
===================================
HTML Left Side Tables for ProBoards - Smangii Style
GLOBAL HEADERS
===================================
//-->
<!-- Start Main Table //-->
<table align="center" width="auto" cellpadding="5">
<tr>
<td align="center" width="200px" vAlign="top">
<!-- Start Side Tables //-->
<table width="100%" cellpadding="0">
<tr>
<td>
<!-- CUSTOM SIDE BOX #1 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #1 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #1 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #2 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #2 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #2 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #3 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #3 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #3 INFORMATION
</td>
</tr>
</table>
<br />
<!-- Close Side Tables //-->
</td>
</tr>
</table>
</td>
<td vAlign="top">
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script>
<!-- END SIDE TABLES GLOBAL HEADERS HTML //-->
TOP OF GLOBAL FOOTERS:
<!-- SIDE TABLES GLOBAL FOOTERS //-->[/blockquote]
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table) {
if(width == '92%') {
width = '700';
}}}
//-->
</script>
</td></tr></table>
<!-- END SIDE TABLES GLOBAL FOOTERS //-->
Boxes on the RIGHT Side of your forum:
GLOBAL HEADERS:
<!--
===================================
HTML Right Side Tables for ProBoards - Smangii Style
GLOBAL HEADERS
===================================
//-->
<!-- Start Main Table //-->
<table align="center" width="auto" cellpadding="5">
<tr>
<td vAlign="top">
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script>
<!-- END SIDE TABLES GLOBAL HEADERS HTML //-->
GLOBAL FOOTERS:
<!-- SIDE TABLES GLOBAL FOOTERS //-->
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table) {
if(width == '92%') {
width = '700';
}}}
//-->
</script>
<!-- Start Side Tables //-->
</td>
<td align="center" width="200px" vAlign="top">
<table width="100%" cellpadding="0">
<tr>
<td>
<!-- CUSTOM SIDE BOX #1 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #1 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #1 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #2 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #2 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #2 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #3 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #3 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #3 INFORMATION
</td>
</tr>
</table>
<br />
<!-- Close Side Tables //-->
</td></tr></table></td></tr></table>
<!-- END SIDE TABLES GLOBAL FOOTERS //-->
Boxes on BOTH Sides of your forum:
GLOBAL HEADERS:
<!--
===================================
HTML Both Side Tables for ProBoards - Smangii Style
GLOBAL HEADERS
===================================
//-->
<!-- Start Main Table //-->
<table align="center" width="auto" cellpadding="5">
<tr>
<td align="center" width="200px" vAlign="top">
<!-- Start Side Tables //-->
<table width="100%" cellpadding="0">
<tr>
<td>
<!-- CUSTOM SIDE BOX #1 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #1 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #1 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #2 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #2 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #2 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #3 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #3 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #3 INFORMATION
</td>
</tr>
</table>
<br />
<!-- Close Side Tables //-->
</td>
</tr>
</table>
</td>
<td vAlign="top">
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script>
<!-- END SIDE TABLES GLOBAL HEADERS HTML //-->
TOP OF GLOBAL FOOTERS:
<!-- SIDE TABLES GLOBAL FOOTERS //-->[/blockquote]
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table) {
if(width == '92%') {
width = '500';
}}}
//-->
</script>
</td>
<td align="center" width="[red]200[/red]px" vAlign="top">
<table width="100%" cellpadding="0">
<tr>
<td>
<!-- CUSTOM SIDE BOX #1 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #1 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #1 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #2 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #2 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #2 INFORMATION
</td>
</tr>
</table>
<br />
<!-- CUSTOM SIDE BOX #3 //-->
<table align="center" width="100%" class="bordercolor" cellpadding="4" cellspacing="1">
<tr>
<td align="center" class="titlebg">BOX #3 TITLE</td>
</tr>
<tr>
<td class="windowbg" align="center">
BOX #3 INFORMATION
</td>
</tr>
</table>
<br />
<!-- Close Side Tables //-->
</td></tr></table></td></tr></table>
<!-- END SIDE TABLES GLOBAL FOOTERS //-->