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! > How do i make the color "Clear"
Daeaorn (New Admin) 5/29/2006 2:24 PM EST : How do i make the color "Clear"

Daeaorn
Posts: 2150
Zomgawsh Poster

http://www.guildportal.com/Guild.aspx?GuildID=10173&TabID=83671

How do I make my buttons on my page "clear" and also make the background image rather then repeat scroll with the page giving the illuion of just one image?
TopBottom

538081088_Inactive (New Admin) 7/26/2006 3:53 AM EST : RE: How do i make the color "Clear"

538081088_Inactive
Posts: 3
Getting Started!

That question really depends on the program you're using to design those buttons.

Read your documentation for your raster graphic editor (such as Adobe Photoshop, etc.) for outputting to transparent GIF format.  There are other file types that will take transparency, but GIF is the only one universally used for web content.

Just because you save it as a GIF doesn't mean it's saved with transparency preserved.  Not all programs can save it this way, and those that can have different methods of doing it.  Sorry I can't give you a more precise answer.
TopBottom

Grumblestone (New Admin) 8/23/2006 6:44 AM EST : RE: How do i make the color "Clear"
Grumblestone
Posts: 526
Zomgawsh Poster

 It's Gif or PNG. GIF is index colour which restricts your palete so using this format often requires some flexibility in design and/or clever thinking.

As Wizzlevolt says the creation of GIFs with transparency varies between progs and the correct settings for output can be tricky to find.

If you need better quality then PNG is the answer although some versions of IE do not support PNG transparency.


There is a fix for this however:
Add this to your footer section:

<head>

<!--[if lt IE 7.]>
http://www.mywebsite.com/pngfix.js"></script>
<![endif]-->
</head>

then copy this, post it into notepad and save it as pngfix.js and upload to the location you have specified above:

 

/* Correctly handle PNG transparency in Win IE 5.5 & 6.http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.Use in <HEAD> with DEFER keyword wrapped in conditional comments:<!--[if lt IE 7]>      var imgName = img.src.toUpperCase()      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")      {         var imgID = (img.id) ? "id='" + img.id + "' " : ""         var imgClass = (img.className) ? "class='" + img.className + "' " : ""         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "         var imgStyle = "display:inline-block;" + img.style.cssText          if (img.align == "left") imgStyle = "float:left;" + imgStyle         if (img.align == "right") imgStyle = "float:right;" + imgStyle         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle         var strNewHTML = "<span " + imgID + imgClass + imgTitle         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"          img.outerHTML = strNewHTML         i = i-1      }   }}
TopBottom

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