Slightly Insane
« [A] Smangii's Side Tables »

Welcome Guest. Please Login or Register.
Sept 9, 2010, 11:34am




Slightly Insane :: + proboards :: ProBoards Codes :: [A] Smangii's Side Tables
Page 1 of 15 » Jump to page   Go    [Search This Thread][Send Topic To Friend] [Print]
 AuthorTopic: [A] Smangii's Side Tables (Read 51,843 times)
Smangii
Administrator
********
member is offline

[avatar]

[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>
« Last Edit: Sept 9, 2009, 12:53am by Smangii »Link to Post - Back to Top  IP: Logged

[image]
Wrighty
Insanely Insane
******
The Bi of SI
member is offline

[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! :P Since that request!!

Nice stuff! :)
Link to Post - Back to Top  IP: Logged

[image]
Smangii
Administrator
********
member is offline

[avatar]

[msn]

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! :P 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 ;)
Link to Post - Back to Top  IP: Logged

[image]
AWESOME ,
Sane
*
member is offline

[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!!!!
Link to Post - Back to Top  IP: Logged

[image]


Wrighty
Insanely Insane
******
The Bi of SI
member is offline

[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 #4 on Aug 7, 2007, 10:41pm »

Kill the SPAM!
Link to Post - Back to Top  IP: Logged

[image]
thewish
Sane
*
member is offline

[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
Link to Post - Back to Top  IP: Logged
Wrighty
Insanely Insane
******
The Bi of SI
member is offline

[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 #6 on Aug 25, 2007, 6:19pm »

Post it in the Support area and we'll sort ya out! :)
Link to Post - Back to Top  IP: Logged

[image]
HAWTSHOT
Beyond Insane
********
B A L L I N !!
member is offline

[avatar]

[msn] [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. =)
Link to Post - Back to Top  IP: Logged

[image]
[image]
[image]
^ Stinky666 <33
Chad
Asylumn Escapee
****
member is offline



[msn] [aim]

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.
« Last Edit: Aug 27, 2007, 8:59pm by Chad »Link to Post - Back to Top  IP: Logged
Wrighty
Insanely Insane
******
The Bi of SI
member is offline

[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 #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 :)
Link to Post - Back to Top  IP: Logged

[image]
Shuuhei
Losing Sanity
*
member is offline

[avatar]


[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
Link to Post - Back to Top  IP: Logged
Wrighty
Insanely Insane
******
The Bi of SI
member is offline

[avatar]

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! :)
« Last Edit: Oct 9, 2007, 12:00am by Wrighty »Link to Post - Back to Top  IP: Logged

[image]
Shuuhei
Losing Sanity
*
member is offline

[avatar]


[homepage]

Joined: Aug 2007
Gender: Male
Posts: 38
 Re: [A] [CB] Left Side Tables for ProBoards
« Reply #12 on Oct 9, 2007, 12:02am »

http://senzotest.proboards99.com/index.cgi

sorry it did not work.
Link to Post - Back to Top  IP: Logged
Wrighty
Insanely Insane
******
The Bi of SI
member is offline

[avatar]

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" :P
Link to Post - Back to Top  IP: Logged

[image]
Shuuhei
Losing Sanity
*
member is offline

[avatar]


[homepage]

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 //-->
Link to Post - Back to Top  IP: Logged
Page 1 of 15 » Jump to page   Go    [Search This Thread][Send Topic To Friend] [Print]


Slightly Insane © 2010 All Rights Reserved
Version 4.6
Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!
Terms of Service | Privacy Policy | Report Abuse | Mobile