Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Mottie (MVP) 5/28/2009 9:26 AM EST : Adding a Zone Header and Footer
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Adding a Zone Header and Footer

This short script basically adds content to the top and bottom ofeach zone - Left, Center and Right. You can add anything you want into these areas. The screenshots below shows the addition of a repeating backgroundimage at the top and an image at the bottom, but you can add anything you want including embedding some flash. The images below are from test-site 3.

BeforeAfter

Add the code below to your Banner HTML or Footer to affect all pages. Or to any free form text/HTML box on the page you want to modify.

The Code
<div id="zoneContent" style="display:none;">

<div id="zLeftTop"></div>
<div id="
zLeftBottom"></div>

<div id="
zCenterTop"></div>
<div id="
zCenterBottom"></div>

<div id="
zRightTop">
<div style="background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightZoneTop.gif);height:33px;"></div>
</div>
<div id="
zRightBottom">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightZoneBottom.gif">
</div>


</div>
<script type="text/javascript">
$(document).ready(function(){
 $('.LeftContentZone').prepend($('#zoneContent #zLeftTop').html()).append($('#zoneContent #zLeftBottom').html());
 $('.CenterContentZone').prepend($('#zoneContent #zCenterTop').html()).append($('#zoneContent #zCenterBottom').html());
 $('.RightContentZone').prepend($('#zoneContent #zRightTop').html()).append($('#zoneContent #zRightBottom').html());
})
</script>
Customizing

  • Find the Zone you want to add content into (zLeftTop, zLeftBottom, etc.) and add the HTML code between the <div> and </div>. In the code above, you can see I added a repeating background image to the right top (zRightTop) zone (using the style attribute of the div to add CSS). In the right bottom zone (zRightBottom), I added the HTML for an image. Below are examples of how to add an image, repeating background image and flash.

  • Image:

    <div id="zRightBottom">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightZoneBottom.gif">
    </div>

  • Repeating Background Image:

    <div id="zRightTop">
    <divstyle="background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightZoneTop.gif);height:33px;"></div>
    </div>

  • Flash:

    <div id="zRightBottom">
    <center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="220" height="180"><param name=movie value="http://britton.disted.camosun.bc.ca/minisheep.swf"><param name=quality value=high><embed src="http://britton.disted.camosun.bc.ca/minisheep.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="220" height="180"></embed></object></center>
    </div>

    I shrunk the flash size by changing the height and width (in red). But you see it's just for an example.
TopBottom

Mottie (MVP) 5/28/2009 9:29 AM EST : RE: Adding a Zone Header and Footer
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Grrr.. I hate it when I click save before adding a title.
TopBottom

Guppy Queen (New Admin) 6/6/2009 2:55 AM EST : RE: Adding a Zone Header and Footer
Guppy Queen
Posts: 41034
Zomgawsh Poster

Cool feature Mottie.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%