Post by SubDevo on Aug 24, 2009 13:11:21 GMT -5
Outer Forum Borders by SubDevo
Tested in IE, FF, Opera and Safari.
This code adds Outer Borders around your main forum body. If done correctly, this is a very nice effect. Any image used for the Outer Border may be transparent/semi-transparent and/or animated! Optionally put your banner inside the Outer Borders.
Previews:
Screenshot 1 courtesy of Macc
Screenshot 2 courtesy of RADesign
Semi-Transparent Image Test
Code Option Examples:
Banner Inside - NO added Space.
Banner Inside - 3 lines of space (top and bottom).
Normal - NO added Space.
Normal- 3 lines of space (top and bottom).
Enjoy!!!
SubDevo
Before you use this Code...
Remove or disable any "Google Ads above Banner" or "Banner Under Ads" code that you are currently using. This code includes that code already. This gives you the ability to put your banner INSIDE the Outer Forum Borders.
This code is in TWO parts.
The first part goes in your Global Header.
Place directly underneath any welcome table codes. These are the codes that remove/hide "Hey X, you have X messages", forum name or "« Home »" from your welcome table.
The second part goes in your Global Footer.
If you have any additional HTML or code in your footers that create more visual elements, and it is after this code, those elements will be OUTSIDE of the Outer Borders. To make sure everything in your forum is placed inside the borders, put this part of the code at the very bottom of your Global Footer. I hope this is clear...
Variable Descriptions:
Edit the Yellow portions.
var outerWidth=874; // Width of the Outer Border.
Your desired Outer Border width in pixels.
Use the same width as the images used for the borders.
var banInside=0; // Banner Inside Border? 1=Yes, 0=No.
If you want your banner INSIDE the Outer Forum Border, set this to "1".
var tSpace="<br/>"; // Top Space. One or more "<br/>". *
Space added (inside the border) at the top of your forum.
var bSpace="<br/>"; // Bottom Space. One or more "<br/>". *
Space added (inside the border) at the bottom of your forum.
var bHead="URL TO HEAD IMAGE"; // Outer Border Head Image.
URL to your Outer Border Head image.
var bMid="URL TO MIDDLE IMAGE"; // Outer Border Middle Image.
URL to the image used for the middle part of the borders. This will be repeated vertically. To keep filesizes (and loading times) small, just use a 1 pixel high gradient that is as wide as your head/base images. PNG format would have the best quality for this use.
var bMidColor="000000"; // Background Color of Middle if not using an Image.
The code checks to see if the middle image URL starts with a "http://". If it does not, the code assumes you are not using an image and uses the color entered here instead.
var bBase="URL TO BASE IMAGE"; // Outer Border Base Image.
URL to your Outer Border Base image.
Location: Global Header
Tested in IE, FF, Opera and Safari.
This code adds Outer Borders around your main forum body. If done correctly, this is a very nice effect. Any image used for the Outer Border may be transparent/semi-transparent and/or animated! Optionally put your banner inside the Outer Borders.
Previews:
Screenshot 1 courtesy of Macc
Screenshot 2 courtesy of RADesign
Semi-Transparent Image Test
Code Option Examples:
Banner Inside - NO added Space.
Banner Inside - 3 lines of space (top and bottom).
Normal - NO added Space.
Normal- 3 lines of space (top and bottom).
Enjoy!!!
SubDevo
Before you use this Code...
Remove or disable any "Google Ads above Banner" or "Banner Under Ads" code that you are currently using. This code includes that code already. This gives you the ability to put your banner INSIDE the Outer Forum Borders.
This code is in TWO parts.
The first part goes in your Global Header.
Place directly underneath any welcome table codes. These are the codes that remove/hide "Hey X, you have X messages", forum name or "« Home »" from your welcome table.
The second part goes in your Global Footer.
If you have any additional HTML or code in your footers that create more visual elements, and it is after this code, those elements will be OUTSIDE of the Outer Borders. To make sure everything in your forum is placed inside the borders, put this part of the code at the very bottom of your Global Footer. I hope this is clear...
Variable Descriptions:
Edit the Yellow portions.
var outerWidth=874; // Width of the Outer Border.
Your desired Outer Border width in pixels.
Use the same width as the images used for the borders.
var banInside=0; // Banner Inside Border? 1=Yes, 0=No.
If you want your banner INSIDE the Outer Forum Border, set this to "1".
var tSpace="<br/>"; // Top Space. One or more "<br/>". *
Space added (inside the border) at the top of your forum.
var bSpace="<br/>"; // Bottom Space. One or more "<br/>". *
Space added (inside the border) at the bottom of your forum.
* Use "<br/>" for space equal to a single blank line.
Use more for extra blank lines (space).
Use "" if you don't want to add any extra space.
Example (adds 3 blank lines to the top):
var tSpace="<br/><br/><br/>"; // Top Space. One or more "<br/>".
var bHead="URL TO HEAD IMAGE"; // Outer Border Head Image.
URL to your Outer Border Head image.
var bMid="URL TO MIDDLE IMAGE"; // Outer Border Middle Image.
URL to the image used for the middle part of the borders. This will be repeated vertically. To keep filesizes (and loading times) small, just use a 1 pixel high gradient that is as wide as your head/base images. PNG format would have the best quality for this use.
var bMidColor="000000"; // Background Color of Middle if not using an Image.
The code checks to see if the middle image URL starts with a "http://". If it does not, the code assumes you are not using an image and uses the color entered here instead.
var bBase="URL TO BASE IMAGE"; // Outer Border Base Image.
URL to your Outer Border Base image.
Location: Global Header
<script type="text/javascript">
<!--
/* Outer Forum Borders by SubDevo - Part 1 of 2 */
/* Global Header - Please leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.proboards.com[/url] or [url]http://lsdp.proboards.com[/url] */
var outerWidth=874; // Width of the Outer Border.
var banInside=0; // Banner Inside Border? 1=Yes, 0=No.
var tSpace="<br/>"; // Top Space. One or more "<br/>".
var bSpace="<br/>"; // Bottom Space. One or more "<br/>".
var bHead="URL TO HEAD IMAGE"; // Outer Border Head Image.
var bMid="URL TO MIDDLE IMAGE"; // Outer Border Middle Image.
var bMidColor="000000"; // Background Color of Middle if not using an Image.
var bBase="URL TO BASE IMAGE"; // Outer Border Base Image.
var ns=(bMid.match(/^http:\/\//i))?"url("+bMid+")":"#"+bMidColor;
var ofbString=bSpace+'</div><img src="'+bBase+'" /></center>';
document.write('<center style="width: '+outerWidth+'px; margin: auto;"><img src="'+bHead+'" /><div style="width: 100%; background: '+ns+' repeat-y center center;">'+tSpace);
if(banInside){ var tb=document.getElementsByTagName("table")[0];
document.write('<span id="wTbl"></span><br />');
var wTbl=document.getElementById("wTbl");
wTbl.parentNode.replaceChild(tb,wTbl);
}
// -->
</script>
Location: Global Footer<script type="text/javascript">
<!--
/* Outer Forum Borders by SubDevo - Part 2 of 2 */
/* Global Footer - Please leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.proboards.com[/url] or [url]http://lsdp.proboards.com[/url] */
document.write(ofbString);
// -->
</script>