How to add an auto resizing banner (subscribed sites)

GuildPortal admin site link to the original post

I made this banner so it would automatically resize to fit any width webpage, it also has a member selectable image on the left side which saves a cookie so they see the same one whenever they return to the page.

This is what it looks like:


The banner consists of three images, with a fourth one that the user can change with a selection box (I'm only showing the mage image for now).

To make your own images:

1. Make sure that all images have a transparent background. PNG file types look best for the title image because it preserves the shadow.
   
   
2. Image 1 and Image 2 below are the same height or at least line up.

Image 1 Repeating Background 10px X 200px	Image 2 Background Edge 350px X 200px
Image 3 Selectable Icon 183px X 194px	Image 4 Page Title 375px X 120px

Now that you have the four images, lets put them together!

Add the information below to your page (change the links in green and the titles in orange to match your images):

Custom StyleSheet

.banner { width: 100%; height: 200px; background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/hdr_default_bkgd.png) repeat-x; }
.titleimg2 { width: 100%; height: 200px; background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/hdr_default_img.png) right center no-repeat; }
.titlenm { width: 100%; height:200px; background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes_old/test-site.png) 50% center no-repeat; }

Banner Area

<div id="titleimg"></div>
<table class="banner" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr> <td class="titleimg2"><div class="titlenm"></div></td> </tr>
</tbody></table>

<script language="javascript">
var cookie = readCookie("image");
var imagenm = cookie ? cookie : "blank";
document.getElementById('setImage').value = imagenm;
setImageBox(imagenm);

function setImageBox(imagenm) {
 if (imagenm == "blank") {
  var a = "<div style='background: url()></div>";
 } else {
  var a = "<div style='position: absolute; left: 1%; height: 200px;  width: 250px; background: url(";
  a += imagenm;
  a += ") no-repeat;'></div>";
 }
 document.getElementById('titleimg').innerHTML = a;
 createCookie("image", imagenm, 365);
}

function readCookie(name) {
 var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var j=0;j < ca.length;j++) {
   var c = ca[j];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}
</script>

Banner Area or in a Content Box

<table border="0" cellpadding="0" cellspacing="5" width="100%">
<tbody><tr>
<td align="right">
Image:
<select id="setImage" onchange="setImageBox(this.value)">
<option value="blank">None
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_bear.png">Druid, bear
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_cat.png">Druid, cat
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_moonkin.png">Druid, moonkin
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_tree.png">Druid, tree
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_hunter.png">Hunter
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_mage.png">Mage
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_rogue2.png">Rogue, mace
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_rogue1.png">Rogue, swords
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_pally.png">Paladin
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_priest.png">Priest
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_shaman.png">Shaman
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_squirrel.png">Squirrel
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_warlock.png">Warlock
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_warrior1.png">Warrior, DPS
</option><option value="http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/img_warrior2.png">Warrior, prot
</option></select>
</td>
</tr></tbody>
</table>

My test site is free so I can't add stuff to the banner area, but check it out on the main site I work on here
Feel free to mail me with any questions 

Auto Resizing Banner (free sites)

This method of adding a banner that expands & contracts with your browser window size works with free sites as well as subscribed sites. Check it out on my "test-site 4" site.

First off, I took this original image and chopped it into four images (the right image is actually the left image flipped on the horizontal axis).

Left side image 249px X 457px	Tile Image 150px X 493px
Right Side image 249px X 457px	Center image 601px X 432px

Instructions

Add your guild logo/title using the control panel:

Control Panel > Style & Colors > Banner Image

I used my "test-site 4" logo here:

Check the "Center image on site pages" box, then click "Save Changes"

Next add the following into your footer (Control Panel > Style & Colors > Footer (under Advanced Style Settings):

<style type="text/css">
.PageWrapper { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BloodElfLeft.gif) left top no-repeat; }
#aspnetForm { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BloodElfRight.gif) right top no-repeat; width:98%; margin: 0px auto; }
body { background: #000000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BloodElfTile.gif) center 8px repeat-x; }
.BannerArea { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BloodElfCenter.gif) center -20px no-repeat; height:350px; }
.BannerArea img { position: relative; top:75px;}
</style>

Customizing

Here are details oh the above CSS:

• Left side image - ".PageWrapper" defines the background image for the left side. The URL is in orange, and it's position is set to "left top".
  
  
• Right side image - "#aspnetForm" defines the background image for the right side. The URL is in orange, and it's position is set to "right top". If you plan on setting your site to a specific width (yes, I know it won't be auto-resizing then), say "1024px", then replace the "98%" width and it should automatically center the background images as well.
  
  
• Tiled image - "body" defines the background tiled image. The URL is in orange and it's position is "center 8px". It's centered to prevent the scrolling appearance while you adjust the browser window size. The "8px" moves the image down to align it better with the background image. This image is also set to repeat in the horizontal direction (repeat-x).
  
  
• Center image - ".BannerArea" defines the background image in the banner area. This image is the box that appears to surround the guild name/logo, the URL is in orange. It's position is set to "center -20px" to center it on the page and move it up 20 pixels to align it with the tiled background. Additionally, it's height is set to 350 pixels to allow you to see the side images better (you can adjust this to hide/show as much as you desire.
  
  
• Guild Name/Logo - ".BannerArea img" adjusts the position of the image placed inside the banner area by the control panel... I had to move my image 75 pixels down to align it with the center image.

Adding the above CSS to the footer area makes it override any CSS that was added by the site - specifically the "body" CSS definition, so you can interchange or leave out any of the CSS definitions above.

Edit (3/14/2009): Edited the CSS to show where you can adjust the page width (in the form portion).