Post by SubDevo on Jul 1, 2010 15:53:39 GMT -8
Outer Forum Borders by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
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.
You may use images for the head and base and just use a color for the middle.
You have the option to just put a colored "rectangle" around your forum by disabling the head or base image (or both).
Option to extend the outer borders all the way to the bottom of your forum!
Note:
This code does NOT use tables. The outer border is a div. Fewer code conflicts with this method.
The middle portion has an ID of "ofmDiv", if you wish to make a class to style the outer borders even further.
Previews:
Screenshot 1 courtesy of Macc
Screenshot 2 courtesy of RADesign
Semi-Transparent Image Test
Colored Border without head/base images (ignore the crappy colors please!)
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.
NOTE:
If you are using Smangii's side tables AND you already have the code to put the banner inside, do NOT remove it! And keep var banInside set to "0" (Explained below).
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 Maroon 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".
If you are using Smangii's side tables AND you already have the code to put the banner inside, keep this set to "0".
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. Set this to "" if you do not wish to use a head image.
var bMid="URL TO IMAGE OR COLOR"; // Outer Border Middle Image URL or Hex Color.
Enter the URL to an image OR a hex color for the middle part of the borders.
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.
If using an image, it 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 bBase="URL TO BASE IMAGE"; // Outer Border Base Image.
URL to your Outer Border Base image. Set this to "" if you do not wish to use a 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. */
/* interoceandesigns.com or lsdp.proboards.com */
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 IMAGE"; // Outer Border Head Image.
var bMid="URL TO IMAGE OR COLOR"; // Outer Border Middle Image URL or Hex Color.
var bBase="URL TO IMAGE"; // Outer Border Base Image.
function mI(a){return (a.match(/^http:/i))?"<img src='"+a+"' />":"";}
bMid=(bMid.match(/^http:/i))?"url("+bMid+") repeat-y center center":"#"+bMid;
var ofbString=bSpace+'</div>'+mI(bBase)+'</center>';
document.write('<center id="ofCen" style="width: '+outerWidth+'px; margin: auto;">'+mI(bHead)+'<div id="ofmDiv" style="width: 100%; background: '+bMid+';">'+tSpace+((banInside)?"<span id='wTbl'></span><br />":""));
if(banInside){ var tb=document.getElementsByTagName("table")[0];
var wTbl=document.getElementById("wTbl"); wTbl.parentNode.replaceChild(tb,wTbl);
}
</script>
You have one more option to change if you wish.
var adBot=0; // Extend the Outer Borders down to the forum bottom? 1=Yes, 0=No
Set this to "1" if you want the outer borders to extend all the way down to your forum bottom.
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. */
/* interoceandesigns.com or lsdp.proboards.com */
var adBot=0; // Extend the Outer Borders down to the forum bottom? 1=Yes, 0=No
document.write(ofbString);
(window.attachEvent)?window.attachEvent("onload",ofTable):window.addEventListener("load",ofTable,false);
function ofTable(){ if(adBot){
var nD=document.getElementById("ofmDiv"),nCn=document.body.childNodes,x=0;
do{x++;}while(nCn[x].id!="ofCen"); while(nCn[x+1]){nD.appendChild(nCn[x+1]);}
}}
</script>
Tested in IE, FF, Opera, Safari and Chrome.
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.
You may use images for the head and base and just use a color for the middle.
You have the option to just put a colored "rectangle" around your forum by disabling the head or base image (or both).
Option to extend the outer borders all the way to the bottom of your forum!
Note:
This code does NOT use tables. The outer border is a div. Fewer code conflicts with this method.
The middle portion has an ID of "ofmDiv", if you wish to make a class to style the outer borders even further.
Previews:
Screenshot 1 courtesy of Macc
Screenshot 2 courtesy of RADesign
Semi-Transparent Image Test
Colored Border without head/base images (ignore the crappy colors please!)
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.
NOTE:
If you are using Smangii's side tables AND you already have the code to put the banner inside, do NOT remove it! And keep var banInside set to "0" (Explained below).
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 Maroon 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".
If you are using Smangii's side tables AND you already have the code to put the banner inside, keep this set to "0".
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. Set this to "" if you do not wish to use a head image.
var bMid="URL TO IMAGE OR COLOR"; // Outer Border Middle Image URL or Hex Color.
Enter the URL to an image OR a hex color for the middle part of the borders.
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.
If using an image, it 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 bBase="URL TO BASE IMAGE"; // Outer Border Base Image.
URL to your Outer Border Base image. Set this to "" if you do not wish to use a 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. */
/* interoceandesigns.com or lsdp.proboards.com */
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 IMAGE"; // Outer Border Head Image.
var bMid="URL TO IMAGE OR COLOR"; // Outer Border Middle Image URL or Hex Color.
var bBase="URL TO IMAGE"; // Outer Border Base Image.
function mI(a){return (a.match(/^http:/i))?"<img src='"+a+"' />":"";}
bMid=(bMid.match(/^http:/i))?"url("+bMid+") repeat-y center center":"#"+bMid;
var ofbString=bSpace+'</div>'+mI(bBase)+'</center>';
document.write('<center id="ofCen" style="width: '+outerWidth+'px; margin: auto;">'+mI(bHead)+'<div id="ofmDiv" style="width: 100%; background: '+bMid+';">'+tSpace+((banInside)?"<span id='wTbl'></span><br />":""));
if(banInside){ var tb=document.getElementsByTagName("table")[0];
var wTbl=document.getElementById("wTbl"); wTbl.parentNode.replaceChild(tb,wTbl);
}
</script>
You have one more option to change if you wish.
var adBot=0; // Extend the Outer Borders down to the forum bottom? 1=Yes, 0=No
Set this to "1" if you want the outer borders to extend all the way down to your forum bottom.
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. */
/* interoceandesigns.com or lsdp.proboards.com */
var adBot=0; // Extend the Outer Borders down to the forum bottom? 1=Yes, 0=No
document.write(ofbString);
(window.attachEvent)?window.attachEvent("onload",ofTable):window.addEventListener("load",ofTable,false);
function ofTable(){ if(adBot){
var nD=document.getElementById("ofmDiv"),nCn=document.body.childNodes,x=0;
do{x++;}while(nCn[x].id!="ofCen"); while(nCn[x+1]){nD.appendChild(nCn[x+1]);}
}}
</script>