Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Banner > Auto Resizing Banner
Mottie (SuperAdmin) 6/13/2008 7:54 PM EST : Auto Resizing Banner
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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 
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/28/2008 6:46 AM EST : Auto Resizing Banner
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

I helped another GuildPortal member make a auto-resizing banner, but without the image selector. This style has an image on either side to block off the banner.

Here are the parts of the banner (the CSS names are in parenthesis).

 Banner Image (bannerImg)
Sides
(LSide, RSide)
Repeating
background
(banner)
Title
(titleName)
  • Right click on the images above to save them
  • I only modified the left side of the "Banner Image" to match the repeating background.. it was too much trouble to remove the name from the bottom right to show you this example 

  • The "Title" image is a png because it can allows different opacities in the image. This works nicely on all browsers but Internet Explorer.

  • You'll end up with a banner that looks like this (it will adjust to your browser window):


Banner Area
<style type="text/css">
.banner { width: 100%; height: 260px; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Ordobkgd2.jpg) repeat-x; }
.bannerImg { width: 100%; height: 260px; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Ordobkgd.jpg) right center no-repeat; }
.titleName { width: 100%; height: 64px; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Ordotitle.png) no-repeat; position: relative; left:100px; top:27%; }
.LSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/sides.gif); width:79px; height:260px; position: absolute; left: 1%; }
.RSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/sides.gif); width:79px; height:260px; position: absolute; right: 1%; }
</style>

<div class="LSide"></div><div class="RSide"></div>
<table class="banner" width="100%" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="bannerImg"><div class="titleName"></div></td></tr>
</tbody></table>
Customizing
  • You can move everything between <style type="text/css"> and </style> into your Custom StyleSheet if you want.

  • Replace the URLs in green with your final images.

  • Adjust the image location of your guild title by changing the numbers in red.

  • If you replace any images, adjust the image height and width as needed in the CSS above (in blue), leave the width at 100% if that's what it is in the CSS.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 1/9/2009 6:12 AM EST : Auto Resizing Banner (for free & subscribed sites)
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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).
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%