Studio Zero
« Smangii's Side Tables »

Welcome Guest. Please Login or Register.
Jun 20, 2013, 8:01am

[Home] [New Topics] [Help] [Search] [Calendar] [Login] [Register]




Studio Zero :: Web Development :: Code Storage :: Smangii's Side Tables
Page 1 of 2 » Jump to page   Go    [Search This Thread] [Share Topic] [Print]
AuthorTopic: Smangii's Side Tables (Read 7,618 times)
Smangii
Senior Member
****
member is offline

[avatar]

HEY

[msn]
[homepage]

Joined: Mar 2006
Posts: 254
Location: Basement
Karma: 13
Smangii's Side Tables
« Thread Started on Jul 31, 2008, 7:52am »
Smangii's Side Tables

REVISED VERSION!!

Click Here For Live Previews


Looking for the old version? Click Here

READ FIRST - 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

Remove any codes you currently have that resize the forum's width.
If you want your forum to be fluid, ignore this step.

To resize your forum, 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: Jun 17, 2009, 11:40pm by Smangii »Link to Post - Back to Top  IP: Logged
[image]

[image]

[image]

[image]
Zaxinou
Official Member
**
[p:15]
member is offline

[avatar]

Asar Ptah Neb Ankh


[homepage]

Joined: Jul 2008
Gender: Male
Posts: 29
Location: Australia
Karma: 0
Re: Smangii's Side Tables
« Reply #1 on Jul 31, 2008, 11:26am »
Excellent code.
Link to Post - Back to Top  IP: Logged

[image]
Join Today!

Smangii
Senior Member
****
member is offline

[avatar]

HEY

[msn]
[homepage]

Joined: Mar 2006
Posts: 254
Location: Basement
Karma: 13
Re: Smangii's Side Tables
« Reply #2 on Jul 31, 2008, 5:50pm »
Thank you :)
Link to Post - Back to Top  IP: Logged
[image]

[image]

[image]

[image]
Chris
Head Coder
******
Click Click Boom
member is offline

[avatar]



Joined: Nov 2006
Gender: Male
Posts: 19,354
Location: Nebraska
Karma: 334
Re: Smangii's Side Tables
« Reply #3 on Jul 31, 2008, 9:48pm »
Sexy tables. :P Sexy enough they're getting in despite being only HTML. But you get to wait until I feel like updating the database.
« Last Edit: Jul 31, 2008, 9:49pm by Chris »Link to Post - Back to Top  IP: Logged
[image]
Michael

[image]
member is offline



*Has a custom title*


[homepage]

Joined: Oct 2007
Gender: Male
Posts: 1,462
Location: UK
Karma: 35
Re: Smangii's Side Tables
« Reply #4 on Aug 1, 2008, 11:57pm »
Only posted 'cause I made him post them at PBS! :P
Link to Post - Back to Top  IP: Logged
Remixed
Senior Member
****
member is offline




[homepage]

Joined: Apr 2006
Gender: Male
Posts: 322
Location: N. CA
Karma: 3
Re: Smangii's Side Tables
« Reply #5 on Aug 10, 2008, 4:49am »
This code looks great if you add this to your global header.

<script type="text/javascript">
<!--
/* Resize Welcome Table Width */
document.getElementsByTagName("table")[0].width="992";
// -->
</script>

And then for the width (the bolded), you add together the side tables, the main width, and add 12. :)


Edit by CD: Fixing the broken bold
« Last Edit: Aug 11, 2008, 3:11am by Chris »Link to Post - Back to Top  IP: Logged
[image] [image] [image]

[image]
wolven6262
Official Member
**
member is offline





Joined: Jun 2009
Gender: Female
Posts: 34
Karma: 1
Re: Smangii's Side Tables
« Reply #6 on Jun 23, 2009, 6:31am »
Is there any way for the tables to be moved up next to the ad?

http://shinarisle.proboards.com/index.cgi
« Last Edit: Jun 23, 2009, 7:05am by wolven6262 »Link to Post - Back to Top  IP: Logged
Chris
Head Coder
******
Click Click Boom
member is offline

[avatar]



Joined: Nov 2006
Gender: Male
Posts: 19,354
Location: Nebraska
Karma: 334
Re: Smangii's Side Tables
« Reply #7 on Jun 23, 2009, 3:33pm »

Jun 23, 2009, 6:31am, wolven6262 wrote:
Is there any way for the tables to be moved up next to the ad?

http://shinarisle.proboards.com/index.cgi

Unfortunately, not really. :( The closest thing you can do is set headers to load above the welcome table and work with that. HOWEVER, that -can- cause issues with any code that is supposed to go in the header.
Link to Post - Back to Top  IP: Logged
[image]
wolven6262
Official Member
**
member is offline





Joined: Jun 2009
Gender: Female
Posts: 34
Karma: 1
Re: Smangii's Side Tables
« Reply #8 on Jun 23, 2009, 10:39pm »
OK, thanks.

Can you add header/footer images?
« Last Edit: Jun 23, 2009, 10:42pm by wolven6262 »Link to Post - Back to Top  IP: Logged
Chris
Head Coder
******
Click Click Boom
member is offline

[avatar]



Joined: Nov 2006
Gender: Male
Posts: 19,354
Location: Nebraska
Karma: 334
Re: Smangii's Side Tables
« Reply #9 on Jun 25, 2009, 12:27am »

Jun 23, 2009, 10:39pm, wolven6262 wrote:
OK, thanks.

Can you add header/footer images?


Yep. Give me some image URLs and I'll add them. :) It's easiest by example.
Link to Post - Back to Top  IP: Logged
[image]
chinawhite
Official Member
**
member is offline

[avatar]

Contrary to what my mom says, I don't lack ambition. I've already made plans to be buried with a sho


[homepage]

Joined: May 2010
Gender: Female
Posts: 29
Karma: 0
Re: Smangii's Side Tables
« Reply #10 on Aug 13, 2010, 1:24am »
Wish I wouldve see this before making a request for this code lol I want to post images in the boxes but i'm absolutely clueless in regards to the image coding itself and how to post it to each box.
Link to Post - Back to Top  IP: Logged
[image]
Chris
Head Coder
******
Click Click Boom
member is offline

[avatar]



Joined: Nov 2006
Gender: Male
Posts: 19,354
Location: Nebraska
Karma: 334
Re: Smangii's Side Tables
« Reply #11 on Aug 13, 2010, 1:46am »

Aug 13, 2010, 1:24am, chinawhite wrote:
Wish I wouldve see this before making a request for this code lol I want to post images in the boxes but i'm absolutely clueless in regards to the image coding itself and how to post it to each box.

Images as titles or as content of the boxes?
Link to Post - Back to Top  IP: Logged
[image]
chinawhite
Official Member
**
member is offline

[avatar]

Contrary to what my mom says, I don't lack ambition. I've already made plans to be buried with a sho


[homepage]

Joined: May 2010
Gender: Female
Posts: 29
Karma: 0
Re: Smangii's Side Tables
« Reply #12 on Aug 13, 2010, 2:54am »
images as box content.got it figured out though finally. ;D
« Last Edit: Aug 13, 2010, 6:26pm by chinawhite »Link to Post - Back to Top  IP: Logged
[image]
chinawhite
Official Member
**
member is offline

[avatar]

Contrary to what my mom says, I don't lack ambition. I've already made plans to be buried with a sho


[homepage]

Joined: May 2010
Gender: Female
Posts: 29
Karma: 0
Re: Smangii's Side Tables
« Reply #13 on Aug 13, 2010, 6:17pm »
Excellent Code!!! .One of my images (box 2) isn't showing though,how do I correct it?

My Site:
http://chibstelford.proboards.com/index.cgi
<! =====
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 class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737692-T800600.jpg" /><br />
</td></tr></table>


<! ===== BOX #2 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737694-T800600.jpg" /><br />
</td></tr></table>


<! ===== BOX #3 START ===== -->
<table id="sidetables" cellpadding="4px" class="bordercolor" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737694-T800600.jpg" /><br />
</td></tr></table>
<! ===== BOX #4 START ===== -->
<table id="sidetables" cellpadding="4px" class="bordercolor" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737693-T800600.jpg" /><br />
</td></tr></table>

<! ===== BOX #5 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737701-T800600.jpg" /><br />
</td></tr></table>

<! ===== BOX #6 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737699-T800600.jpg" /><br />
</td></tr></table>

<! ===== BOX #7 START ===== -->
<table id="sidetables" cellpadding="4px" class="bordercolor" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737810-T800600.jpg" /><br />
</td></tr></table>

<! ===== BOX #8 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737815-T800600.jpg" /><br />
</td></tr></table>



<! ===== BOX #9 START ===== -->
<table id="sidetables" class="bordercolor" cellpadding="4" cellspacing="1">

<tr><td class="windowbg">
<img src="http://www.bluemelon.com/photo/18465/737833-T800600.jpg" /><br />
</td></tr></table>

<! -- ***NOTE*** Place any extra added side tables above this line // -->
</td><td align="center" vAlign="top" width="100%">
« Last Edit: Aug 13, 2010, 6:41pm by chinawhite »Link to Post - Back to Top  IP: Logged
[image]
Chris
Head Coder
******
Click Click Boom
member is offline

[avatar]



Joined: Nov 2006
Gender: Male
Posts: 19,354
Location: Nebraska
Karma: 334
Re: Smangii's Side Tables
« Reply #14 on Aug 13, 2010, 9:17pm »
Bow 2 shows for me. What browser are you using?
Link to Post - Back to Top  IP: Logged
[image]
Page 1 of 2 » Jump to page   Go    [Search This Thread] [Share Topic] [Print]


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 | Notice | FTC Disclosure | Report Abuse | Mobile