Post by SubDevo on Mar 6, 2010 5:07:27 GMT -8
Forum Wide Copyright/Forum Jump Bar by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
This is an "enhanced" version of my Info Center Copyright/Forum Jump Bar.
If you are replacing the above code with this one, the CSS portion is not the same.
Remove the old code and CSS from the Main footer. This code goes in the Global Footer.
Description:
Have you ever noticed how your forum jump just hangs in the wind at the bottom of your forum?
If you are using head and base images it looks even more out of place!
This code creates an additional bar at the bottom of EVERY page of your forum, moves your forum jump into it and puts a gradient (image) behind the bar. Also your forum name and copyright are added to this bar. This gives your forum a "clean" look!
This code works in forums with or without head and base images!
Preview:
This example pic below, shows the bar in the Info Center.
Remember, this same bar is on every page! Quick Reply, Calendar, PMs, Login, thread listings etc...
For a "live" preview, just go check out some threads on IOD!
PREVIEW PIC (animated gif)
Location: Global Footer (Below any "head/base" image codes)
<style type="text/css">
<!--
#crdiv {height: 18px; background-color: #EFEFEF; background-image: url(URL TO IMAGE); border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000;}
#ordiv {text-align: left; padding: 1px 1em 1px 1em; font-family: Verdana; font-size: 14px; font-weight: bold;}
-->
</style>
<script type="text/javascript">
<!--
/* Forum Wide Copyright/Forum Jump Bar by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var fName="InterOcean Designs"; // Your Forum Name.
var cYear="2010"; // Copyright Year.
var fj=document.getElementById("forumjump");
if(fj){ var pj=fj.parentNode.offsetParent; pj.style.display="none";
do{pj=pj.previousSibling;} while(!pj.nodeName.match(/table|form/i)); pj=pj.nextSibling;
var fjDiv=document.createElement("div"); var copDiv=fjDiv.cloneNode(false);
with(fjDiv){style.styleFloat="right"; style.cssFloat="right"; appendChild(fj);}
with(copDiv){var nopDiv=cloneNode(false); id="ordiv"; appendChild(fjDiv);
if(fName&&cYear){innerHTML=innerHTML+"Copyright \u00A9"+cYear+" "+fName+"\u2122";}
} nopDiv.id="crdiv"; nopDiv.appendChild(copDiv);
pj.parentNode.insertBefore(nopDiv,pj);
}
//-->
</script>
Usage Instructions:
There are two parts to this code, CSS style and the Javascript.
Variables:
First, in the code, edit the Maroon parts in these two variables:
var forumName="InterOcean Designs"; // Your Forum Name.
var cYear="2010"; // Copyright Year.
If you set either one of these variable to empty "", only the forum jump is displayed.
Also the code will still work even if you have "hidden" your forum jump.
In this case, only the copyright will appear. (unless you set one these to empty of course.)
Now the CSS... The CSS code changes the looks of the bar.
The CSS MUST be above this code! If you wish, you may put it with the rest of your forum CSS.
But if you do, it may be easy to "forget" what this CSS goes to! It is up to you...
NOTE: Do NOT rename the CSS div names! (#crdiv and #ordiv)
Edit the Maroon portions:
#crdiv is the OUTER div
height: 18px;
Simple enough. Enter your required height of the bar in pixels.
background-color: #EFEFEF;
This is used if you do not have a background image.
If you have a transparent image, remove this from the CSS or the color will show through.
background-image: url(URL TO GRADIENT IMAGE);
Enter the full URL to your background image here.
It's best to remove this section if you are not using an image. It is not necessary though.
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
Enter the color to match the borders of your forum in all three of these.
Or just remove these if you don't want any borders.
#ordiv is the INNER div
text-align: left;
The copyright text starts from the left.
You may also use "center" or "right" if you do not want it on the left.
padding: 1px 1em 1px 1em;
From left to right, the padding is clockwise: Top, Right, Bottom, Left.
("em" is the width of the font. You may change to px if you wish.)
Change the "Right" to move the jump to the left.
Change the "Left" to move the text to the right.
font-family: Verdana; font-size: 14px; font-weight: bold;
Enter font style you wish to use. (Verdana, Arial, Georgia etc...)
Enter the height of the font (text) you would like to use.
Remove the "font-weight: bold;" if you do not want your text bold.
By default, the color of the copyright text is the text color of your forum. If you wish to change this color, insert this line into the CSS portion of the code:
color: #FFFFFF;
Enter the color you would like for the text.
Ok, that's it!
Enjoy!!!
SubDevo
EDIT: This code has been completely updated!
It now works with ANY forum, even if you are not using head/base images.
There are also no loops in this code. Fast...
Tested in IE, FF, Opera, Safari and Chrome.
This is an "enhanced" version of my Info Center Copyright/Forum Jump Bar.
If you are replacing the above code with this one, the CSS portion is not the same.
Remove the old code and CSS from the Main footer. This code goes in the Global Footer.
Description:
Have you ever noticed how your forum jump just hangs in the wind at the bottom of your forum?
If you are using head and base images it looks even more out of place!
This code creates an additional bar at the bottom of EVERY page of your forum, moves your forum jump into it and puts a gradient (image) behind the bar. Also your forum name and copyright are added to this bar. This gives your forum a "clean" look!
This code works in forums with or without head and base images!
Preview:
This example pic below, shows the bar in the Info Center.
Remember, this same bar is on every page! Quick Reply, Calendar, PMs, Login, thread listings etc...
For a "live" preview, just go check out some threads on IOD!
PREVIEW PIC (animated gif)
Location: Global Footer (Below any "head/base" image codes)
<style type="text/css">
<!--
#crdiv {height: 18px; background-color: #EFEFEF; background-image: url(URL TO IMAGE); border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000;}
#ordiv {text-align: left; padding: 1px 1em 1px 1em; font-family: Verdana; font-size: 14px; font-weight: bold;}
-->
</style>
<script type="text/javascript">
<!--
/* Forum Wide Copyright/Forum Jump Bar by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var fName="InterOcean Designs"; // Your Forum Name.
var cYear="2010"; // Copyright Year.
var fj=document.getElementById("forumjump");
if(fj){ var pj=fj.parentNode.offsetParent; pj.style.display="none";
do{pj=pj.previousSibling;} while(!pj.nodeName.match(/table|form/i)); pj=pj.nextSibling;
var fjDiv=document.createElement("div"); var copDiv=fjDiv.cloneNode(false);
with(fjDiv){style.styleFloat="right"; style.cssFloat="right"; appendChild(fj);}
with(copDiv){var nopDiv=cloneNode(false); id="ordiv"; appendChild(fjDiv);
if(fName&&cYear){innerHTML=innerHTML+"Copyright \u00A9"+cYear+" "+fName+"\u2122";}
} nopDiv.id="crdiv"; nopDiv.appendChild(copDiv);
pj.parentNode.insertBefore(nopDiv,pj);
}
//-->
</script>
Usage Instructions:
There are two parts to this code, CSS style and the Javascript.
Variables:
First, in the code, edit the Maroon parts in these two variables:
var forumName="InterOcean Designs"; // Your Forum Name.
var cYear="2010"; // Copyright Year.
If you set either one of these variable to empty "", only the forum jump is displayed.
Also the code will still work even if you have "hidden" your forum jump.
In this case, only the copyright will appear. (unless you set one these to empty of course.)
Now the CSS... The CSS code changes the looks of the bar.
The CSS MUST be above this code! If you wish, you may put it with the rest of your forum CSS.
But if you do, it may be easy to "forget" what this CSS goes to! It is up to you...
NOTE: Do NOT rename the CSS div names! (#crdiv and #ordiv)
Edit the Maroon portions:
#crdiv is the OUTER div
height: 18px;
Simple enough. Enter your required height of the bar in pixels.
background-color: #EFEFEF;
This is used if you do not have a background image.
If you have a transparent image, remove this from the CSS or the color will show through.
background-image: url(URL TO GRADIENT IMAGE);
Enter the full URL to your background image here.
It's best to remove this section if you are not using an image. It is not necessary though.
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
Enter the color to match the borders of your forum in all three of these.
Or just remove these if you don't want any borders.
#ordiv is the INNER div
text-align: left;
The copyright text starts from the left.
You may also use "center" or "right" if you do not want it on the left.
padding: 1px 1em 1px 1em;
From left to right, the padding is clockwise: Top, Right, Bottom, Left.
("em" is the width of the font. You may change to px if you wish.)
Change the "Right" to move the jump to the left.
Change the "Left" to move the text to the right.
font-family: Verdana; font-size: 14px; font-weight: bold;
Enter font style you wish to use. (Verdana, Arial, Georgia etc...)
Enter the height of the font (text) you would like to use.
Remove the "font-weight: bold;" if you do not want your text bold.
By default, the color of the copyright text is the text color of your forum. If you wish to change this color, insert this line into the CSS portion of the code:
color: #FFFFFF;
Enter the color you would like for the text.
Ok, that's it!
Enjoy!!!
SubDevo
EDIT: This code has been completely updated!
It now works with ANY forum, even if you are not using head/base images.
There are also no loops in this code. Fast...