Smangii
Administrator
member is offline
![[avatar]](http://smangii.com/me/av.png "[avatar]")
![[msn]](http://i63.photobucket.com/albums/h131/smangiisigfx/SIv4/v4point5/msn.jpg "[msn]")
Joined: Dec 2005
Gender: Male 
Posts: 15,962
Location: NJ, USA
|  | [A] Smangii's Side Tables
« Thread Started on Jul 30, 2007, 12:34pm » | |
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.
OPTIONAL:
5) Side tables NEXT to welcome table with ads above forum
In order to do this, you must copy and paste this code:
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script> Paste it right under the Global Headers of your side tables code.
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> |
|
|
|
|
Wrighty
Insanely Insane
The Bi of SI
member is offline
![[avatar]](http://av.wservices.co.uk/av.png "[avatar]")
Stinky Raped Me! :( [Yes I did] - Multiple Personalities ftw!!
Joined: Apr 2007
Gender: Male
Posts: 3,260
| | Re: [A] Left Side Tables for ProBoards
« Reply #1 on Jul 30, 2007, 1:42pm » | |
hehe you've been wanting to make this all the time haven't you!  Since that request!!
Nice stuff!
|
|
|
Smangii
Administrator
member is offline
Joined: Dec 2005
Gender: Male
Posts: 15,962
Location: NJ, USA
| | Re: [A] Left Side Tables for ProBoards
« Reply #2 on Jul 30, 2007, 3:01pm » | |
Quote:hehe you've been wanting to make this all the time haven't you! Since that request!!
Nice stuff! |
|
Ah, the wonders of HTML =P
And yeah, I got flooded with PMs so... made my life easier XD
Enjoy, all you members out there 
|
|
|
AWESOME ,
Sane
member is offline
![[avatar]](http://i192.photobucket.com/albums/z119/dayzee38lj/020907/013.png "[avatar]")
♥mcfly♥
Joined: Aug 2007
Gender: Female 
Posts: 5
| | Re: [A] Left Side Tables for ProBoards
« Reply #3 on Aug 7, 2007, 10:00pm » | |
omg...i'm so gonna use it!!!!
|
|
|
Wrighty
Insanely Insane
The Bi of SI
member is offline
Stinky Raped Me! :( [Yes I did] - Multiple Personalities ftw!!
Joined: Apr 2007
Gender: Male
Posts: 3,260
| | Re: [A] Left Side Tables for ProBoards
« Reply #4 on Aug 7, 2007, 10:41pm » | |
Kill the SPAM!
|
|
|
thewish
Sane
member is offline
![[avatar]](http://i97.photobucket.com/albums/l226/boysonlyforum/8.jpg "[avatar]")
Joined: Mar 2007
Gender: Male
Posts: 22
| | Re: [A] Left Side Tables for ProBoards
« Reply #5 on Aug 25, 2007, 5:07pm » | |
Zomg been looking for this code for a while.
Iv tried to use it on my site. When iv put in the code it was working but when ever i added another code to the header it messed up my site.
Any ideas why? I really want the code to work
| |
|
Wrighty
Insanely Insane
The Bi of SI
member is offline
Stinky Raped Me! :( [Yes I did] - Multiple Personalities ftw!!
Joined: Apr 2007
Gender: Male
Posts: 3,260
| | Re: [A] Left Side Tables for ProBoards
« Reply #6 on Aug 25, 2007, 6:19pm » | |
Post it in the Support area and we'll sort ya out!
|
|
|
HAWTSHOT
Beyond Insane
B A L L I N !!
member is offline
![[avatar]](http://i32.photobucket.com/albums/d32/Piurek18/hots6hotcopy.png "[avatar]")
![[aim]](http://i63.photobucket.com/albums/h131/smangiisigfx/SIv4/v4point5/aim.jpg "[aim]")
Joined: May 2006
Gender: Male
Posts: 7,518
Location: Deeee troit
| | Re: [A] Left Side Tables for ProBoards
« Reply #7 on Aug 27, 2007, 2:44pm » | |
Awesome ness smangii. You've gotten good at coding. =)
|
|
|
Chad
Asylumn Escapee
member is offline
Joined: Nov 2006
Gender: Male
Posts: 1,772
Location: Charlotte.
| | Re: [A] Left Side Tables for ProBoards
« Reply #8 on Aug 27, 2007, 8:58pm » | |
Wow, this is pretty good. I think I could do this, but would anyone mind explaining to me what the JS has to do in this script? From the looks of it, I think its to push the boards over, not sure, though.
| |
|
Wrighty
Insanely Insane
The Bi of SI
member is offline
Stinky Raped Me! :( [Yes I did] - Multiple Personalities ftw!!
Joined: Apr 2007
Gender: Male
Posts: 3,260
| | Re: [A] Left Side Tables for ProBoards
« Reply #9 on Aug 27, 2007, 9:23pm » | |
well the JS makes the boards smaller in width so that the fit in the right hand side of the table
|
|
|
Shuuhei
Losing Sanity
member is offline
![[avatar]](http://i97.photobucket.com/albums/l226/boysonlyforum/39.png "[avatar]")
![[homepage]](http://i63.photobucket.com/albums/h131/smangiisigfx/SIv4/v4point5/url.jpg "[homepage]")
Joined: Aug 2007
Gender: Male
Posts: 38
| | Re: [A] [CB] Left Side Tables for ProBoards
« Reply #10 on Oct 8, 2007, 11:57pm » | |
how do i move the to the right, and have no space between them to were they are together
| |
|
Wrighty
Insanely Insane
The Bi of SI
member is offline
Stinky Raped Me! :( [Yes I did] - Multiple Personalities ftw!!
Joined: Apr 2007
Gender: Male
Posts: 3,260
| | Re: [A] [CB] Left Side Tables for ProBoards
« Reply #11 on Oct 9, 2007, 12:00am » | |
For Right Side:
This kind of side tables stretches to the top of the banner.
If you need any support with this code, feel free to ask in the Code Support Board
200px - Edit the width of the left side column. 200 is the width of the live preview boxes.
BOX #1 TITLE - Title of the Left side box
BOX #2 INFORMATION - Information to put in the Left side box
700 - Width of the forum WITHOUT the side tables.
TOP OF GLOBAL FOOTERS:
<!--
===================================
HTML Left Side Tables for ProBoards - Smangii Style
GLOBAL FOOTERS
===================================
//-->
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {
width = '700';
}}}
//-->
</script>
<!-- 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>
</td></tr></table>
<!-- SIDE TABLES GLOBAL FOOTERS - DO NOT REMOVE //-->
Should be it!
|
|
|
Shuuhei
Losing Sanity
member is offline
Joined: Aug 2007
Gender: Male
Posts: 38
| |
Wrighty
Insanely Insane
The Bi of SI
member is offline
Stinky Raped Me! :( [Yes I did] - Multiple Personalities ftw!!
Joined: Apr 2007
Gender: Male
Posts: 3,260
| | Re: [A] [CB] Left Side Tables for ProBoards
« Reply #13 on Oct 9, 2007, 12:05am » | |
it says "GLOBAL FOOTERS"
|
|
|
Shuuhei
Losing Sanity
member is offline
Joined: Aug 2007
Gender: Male
Posts: 38
| | Re: [A] [CB] Left Side Tables for ProBoards
« Reply #14 on Oct 9, 2007, 12:08am » | |
Ok but look now it does not work.
I put this in my global Footer:
Code:<!--
===================================
HTML Left Side Tables for ProBoards - Smangii Style
GLOBAL FOOTERS
===================================
//-->
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(i = 0; i < table.length; i ++) {
with(table[i]) {
if(width == '92%') {
width = '700';
}}}
//-->
</script>
<!-- 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>
</td></tr></table>
<!-- SIDE TABLES GLOBAL FOOTERS - DO NOT REMOVE //-->
|
|
| |
|
![[Home]](http://smangii.com/si/v4/img/menu/home.jpg "[Home]")
![[New Topics]](http://s2.images.proboards.com/menu/topics.png "[New Topics]")
![[Help]](http://smangii.com/si/v4/img/menu/help.jpg "[Help]")
![[Search]](http://smangii.com/si/v4/img/menu/search.jpg "[Search]")
![[Calendar]](http://smangii.com/si/v4/img/menu/calendar.jpg "[Calendar]")
![[Login]](http://smangii.com/si/v4/img/menu/login.jpg "[Login]")
![[Register]](http://smangii.com/si/v4/img/menu/register.jpg "[Register]")
![[Search This Thread]](http://i63.photobucket.com/albums/h131/smangiisigfx/SIv4/v4point5/search.gif "[Search This Thread]")
![[Send Topic To Friend]](http://i63.photobucket.com/albums/h131/smangiisigfx/SIv4/v4point5/sendtopic.gif "[Send Topic To Friend]")
![[Print]](http://i63.photobucket.com/albums/h131/smangiisigfx/SIv4/v4point5/printtopic.gif "[Print]")
Author
Logged![[image]](http://smangii.com/images/logo.png "[image]"){kind=logo}
![[image]](http://wimg.mp/nfA.png "[image]")
![[image]](http://i155.photobucket.com/albums/s282/Girldevin8/icons/color.jpg "[image]"){kind=icon}
![[image]](http://i29.tinypic.com/rh8za1.jpg "[image]")
![[image]](http://img251.imageshack.us/img251/6344/spambugwinhotshotbr3.jpg "[image]")
![[image]](http://i36.tinypic.com/ayae6p.png "[image]")