border around forum

[CFP wolf]

This code is not compatible with Headers/Footers for Different Skins.

This puts the welcome table below the ad into a border that wraps around the forum. It's all done with images, so if you don't have images yet, you can't use the code. You need a head image, a base image, and a border image, all the same width. The effect is something similar to the SayBox Community forum, though it doesn't modify the borders of the welcome table like they have and there isn't text in the base image.

Remove any welcome table below ad or forum width resize codes before using this.


Code:<!-- border around forum by california -->
<center style="width: 700px; margin: auto;">
<img src="URL OF HEAD IMAGE" /><br />

<!-- this is optional -->
<script type="text/javascript">
<!--
/* welcome table below ads */

document.write('<div id="welcome"></div>');
var welcome = document.getElementById("welcome");
var iTable = document.getElementsByTagName("table");
iTable[0].width = "100%";
welcome.parentNode.replaceChild(iTable[0], welcome);

// -->
</script>
<!-- end optional code -->

<div style="width: 100%; background: #ffffff url(URL OF BORDER IMAGE) repeat-y fixed top center;"><!-- border around forum by california -->
<center style="width: 700px; margin: auto;">
<img src="URL OF HEAD IMAGE" /><br />

<!-- this is optional -->
<script type="text/javascript">
<!--
/* welcome table below ads */

document.write('<div id="welcome"></div>');
var welcome = document.getElementById("welcome");
var iTable = document.getElementsByTagName("table");
iTable[0].width = "100%";
welcome.parentNode.replaceChild(iTable[0], welcome);

// -->
</script>
<!-- end optional code -->

<div style="width: 100%; background: #ffffff url(URL OF BORDER IMAGE) repeat-y fixed top center;">About this featureCopy All Revert Changes

Put this in your Global Header


This code goes in your Global Footer:


Code:</div>
<img src="URL OF BASE IMAGE" />
</center>

<script type="text/javascript">
<!--
/* inner table width resize */

var innerTableWidth = "650";

var iTable = document.getElementsByTagName("table");
for(t=4; t<iTable.length; t++){
if(iTable[t].width == "92%"){
iTable[t].width = innerTableWidth;
}
}

// -->
</script> </div>
<img src="URL OF BASE IMAGE" />
</center>

<script type="text/javascript">
<!--
/* inner table width resize */

var innerTableWidth = "650";

var iTable = document.getElementsByTagName("table");
for(t=4; t<iTable.length; t++){
if(iTable[t].width == "92%"){
iTable[t].width = innerTableWidth;
}
}

// -->
</script> About this featureCopy All Revert Changes




If you don't want to move the welcome table into the border, you can leave out the script in the global header portion. If you want the welcome table to have the border around it, you can move it to the bottom of the global header portion and adjust its width (see below).

Edit the width of the outer border at the very top of the header code. This should be the same width as the head/base images and the border image. Then edit the width of the inner tables at the bottom of the footer code, which should be 25-75 pixels less than the outer width. The head/base images used in this code shouldn't be the same as the ones you may be using for category dividers, etc. They have to be a little wider for one thing. Edit the three URLs for the images along with the background color of the area inside the border (in case the image doesn't cover all of it).

If you don't want the welcome table to be the same width as the border, you can edit this line:

iTable[0].width = "100%";