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
Forums : Pimp My Site! > Automatically resizing banner image
Mottie (MVP) 5/30/2008 6:38 AM EST : Automatically resizing banner image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I made this banner so it would automatically resize to fit any width webpage.

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:

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 
TopBottom

Mottie (MVP) 5/30/2008 6:53 AM EST : RE: Automatically resizing banner image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

YAY I got the previous post to finally work using iframes 

I forgot to mention that the script saves a cookie, so you get the same image the next time you visit

Enjoy!
TopBottom

Pentamorous (New Admin) 5/30/2008 7:13 AM EST : RE: Automatically resizing banner image
Pentamorous
Posts: 2317
Zomgawsh Poster

HAHA!  That's awesome!  I see where you're goin with that!
TopBottom

Didokova (Guild Admin) 5/31/2008 8:34 PM EST : RE: Automatically resizing banner image
Didokova
Posts: 1042
Zomgawsh Poster

did it all work out for you
Didokova banner
TopBottom

Mottie (MVP) 6/1/2008 3:04 AM EST : RE: Automatically resizing banner image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Yeah this script works great.. it's just hard to post it here in the forums without being creative. 
TopBottom

Xeynaar (New Admin) 7/27/2008 11:36 PM EST : RE: Automatically resizing banner image
Xeynaar
Posts: 2784
Zomgawsh Poster

This doesn't work for me.  I gives me a message about active scrypting being disabled.
TopBottom

Mottie (MVP) 7/28/2008 2:57 AM EST : RE: Automatically resizing banner image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Well it seems that GuildPortal now blocks certain script from the site. More specifically cookies! I've found that if you remove the cookie reading the writing, the script works fine, so I moved it to an external javascript.

And since I can't edit the original post (or it'll break my iframe from working). I'll repost how to do it here.
Replace this code
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=/";
}
with this code
<script src="http://www.axiomfiles.com/Files/243007/cookies.js"></script>
Complete Code
<style type="text/css">
.banner { width: 100%; height: 200px; background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/hdr_default_bkgd.png) repeat-x; }
.titleimg2 { height: 200px; background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/hdr_default_img.png) right center no-repeat; }
.titlenm { height: 200px; background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes_old/test-site.png) 50% center no-repeat; }
</style>
<table border="0" cellpadding="0" cellspacing="0" 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>
<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 src="http://www.axiomfiles.com/Files/243007/cookies.js"></script>
<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);
}
</script>
TopBottom

LochenTwo (Guild Admin) 8/1/2008 1:51 PM EST : RE: Automatically resizing banner image
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster

Thank you for all the hard work you've done on this forum! Here is my start at a page. Ima newb, so 'tis slow going. I'll be adding in buttons, altering colors for awhile, but I'm fairly happy with the banner and background. Hope you don't mind I'm stealing your popups until I get some guild specific ones cut out this weekend

http://www.guildportal.com/Guild.aspx?GuildID=3780&ForumID=22042&TabID=27537&TopicID=6916220&Page=1

TopBottom

Mottie (MVP) 1/9/2009 6:23 AM EST : Automatically resizing banner image for all sites
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Auto Resizing Banner (free & subscribed 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).
TopBottom

LochenTwo (Guild Admin) 2/24/2009 7:51 AM EST : RE: Automatically resizing banner image for all sites
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster

/bump, cause I <3 this one

There is an issue with the new WoW Model Viewer in that its not supporting Animated Gif export anymore. I'm hoping they will be able to add this back in. Until then, it looks like the only way to get animations is to export them as AVI files and import/convert them into something that lets you mass delete the background from each frame. Ick. Doable. But ick.

TopBottom

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