Thank you Mottie!  A million times, thank you!

I've been trying to figure out how to get a roll over effect on my tabs for weeks, and here you are, swooping in to save me from my CSS newb woes!

Check out my site to see what you helped me do.

---

I know I'm probably being a pain in the butt now... but here is a slightly different way to get hover effects on your buttons. Very similar to my last method, but instead of changing the background color, this way changes the background image.

The "Selected Tab" images have the background filled in with a solid color. The "Unselected Tab" images have the same design but a transparent background. Hover over the second column to see the effect.

Selected Tab	Unselected Tab

This method uses one image for the Selected button and three images for the Unselected.

Selected home button (solid bkgd)	Unselected home button (transparent)	Unselected background	Hover background

To make this work for your site:

1. Add the tab images as you would normally do.

Control Panel > Styles & Colors > Tab Bar Styles > Horizontal Tab Bar

then Style & Colors > Tab Images

Add the URL of your images here and then save

2. Now add this to your CSS (Styles & Colors > Custom StyleSheet)

Once again, addthe "table.TabBar" if you want your buttons all scrunched together. Addthe other two lines of CSS for the hover effect to work.

Custom StyleSheet

table.TabBar {
 border: 0;
 margin: 0 auto;
 padding: 0;
 width:100px;
}

td.Tab a img {
 background: #000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes_old/border.png);
}

td.Tab a:hover img {
 background: #0000aa url(http://i259.photobucket.com/albums/hh311/hotwow/themes_old/hover.png);
}

That'sit!... (again  )

---

YAY, I get to be a pain in the butt again!

Grace Diamond (in this thread) asked for a tab bar that is basically totally custom. And guess what? I figured out how to do it

With this custom tab bar you will need:

1. A paid subscription site - so you can enter HTML and Javascript in the banner area
2. Three images for every tab that you have on your site - they must all be the same size! (my test samples are below are all 100x100 pixels):
   
   

   Selected tab	Unselected tab	Mouseover tab

   
   
3. The tabID of every tab on your site...

• My Test Site Home page URL (the TabID is in orange):
  
  http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168223
  

• This is where a slight limitation appears, if you have a tab that is only accessible to officers or site admins, you have to choose to either have it show for everyone or no one. I don't know enough about how guildportal sets the accessibility to display or not display tabs for members. But if you do display the tab and the person clicks on it without the security level, they will get an error.

Custom StyleSheet

table.TabBar {display:none;}
table.TabBar2 {
 border:0px;
 margin:5px;
 padding:5px;
 width:550px; /* adjust width of the custom tab bar here */
 margin-left:auto;
 margin-right:auto;
}

.Tab1Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/homes.gif) center center no-repeat; }
.Tab1UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/homeu.gif) center center no-repeat; }
.Tab1Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/homem.gif) center center no-repeat; }

.Tab2Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forumss.gif) center center no-repeat; }
.Tab2UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forumsu.gif) center center no-repeat; }
.Tab2Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forumsm.gif) center center no-repeat; }

.Tab3Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendars.gif) center center no-repeat; }
.Tab3UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendaru.gif) center center no-repeat; }
.Tab3Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendarm.gif) center center no-repeat; }

.Tab4Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/imagess.gif) center center no-repeat; }
.Tab4UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/imagesu.gif) center center no-repeat; }
.Tab4Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/imagesm.gif) center center no-repeat; }

.Tab5Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/miscs.gif) center center no-repeat; }
.Tab5UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/miscu.gif) center center no-repeat; }
.Tab5Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/miscm.gif) center center no-repeat; }

Banner Area

<script type="text/javascript">
var tabURL = new Array();

// Enter only the TabID for each tab (in order) for your site below:
// e.g.: http://admins.guildportal.com/Guild.aspx?GuildID=222222&TabID=111111
// becomes -> tabURL.push ("111111");
// **************************************************************

tabURL.push ("2000001"); // Home
tabURL.push ("2000002"); // Forums
tabURL.push ("2000003"); // Calendar
tabURL.push ("2000004"); // Images
tabURL.push ("2000005"); // Misc

imageWidth = 100;
imageHeight = 100;

// Don't change anything below
// ***************************
var tabType = "";
var currentTab = gup('TabID');
var currentGID = gup('GuildID');
var tabHTML = '<table Class="TabBar2" border=0 cellpadding=2 cellspacing=0 width="100%"><tr>';

for (j = 0; j < tabURL.length; j++) {
 if (currentTab == tabURL[j]) {
  tabType = 'Tab' + (j+1) + 'Sel';
  tabMo = tabType;
 } else {
  tabType = 'Tab' + (j+1) + 'UnSel';
  tabMo = 'Tab' + (j+1) + 'Mo';
 }
 tabHTML += '<td class="' + tabType;
 tabHTML += '" style="width:' + imageWidth + 'px;height:' + imageHeight;
 tabHTML += 'px;" ="this.className=\'' + tabMo;
 tabHTML += '\';return true;" ="this.className=\'' + tabType;
 tabHTML += '\';return true;" onClick="top.location=\'Guild.aspx?GuildID=' + currentGID;
 tabHTML += '&TabID=' + tabURL[j] + '\'"></td>';
}
tabHTML += '</tr></table>';
(tabHTML);

// Code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
function gup(name) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( window.location.href );
 if( results == null )
  return "";
 else
  return results[1];
}
</script>

Customizing the code

• Note: The first line of the CSS (in blue) hides the original TabBar. You may want to leave this out for testing purposes, then add it back once the script is working properly.
  
  
• The width is the custom tab bar should be adjusted to your liking (it is in red in the CSS above). In my example, I have five tabs, each 100 pixels wide...
  
  
• If you desire no space between your tab bar images, set this number to the width of all your tab images together. With the images I used above, it would be 500px.
• I chose 550px for my example because I wanted some space between my tab images.
  
  
• Add the URL to your custom images to the CSS (in green). The tabs are numbered from left to right, tab1 being the far left. You can add or subtract the three lines of CSS for each tab bar on your site.
  
  
1. Tab#Sel = Selected tab image
2. Tab#UnSel = Unselected tab image
3. Tab#Mo = Mouse over tab image
   
   
• In the Banner area, add the TabID of each tab on your site (in orange above). You can find this number in the URL at the top of your browser: "http://admins.guildportal.com/Guild.aspx?GuildID=222222&TabID=111111"
  
  
• Again, this is listed from left to right, tab #1 being at the top of the list.
  
• It should look like this: tabURL.push ("111111");
  
  
• Add the width and height of your tab images into the script (in purple). Again, all images of the tab need to be the same size or there may be alignment problems.
  
  
• It is very difficult to test this script before implementing it on your site because this code uses the site URL to determine which tab you are currently on. So pick a time when you won't have heavy traffic on your site. Feel free to message me if you have problems! Enjoy!

---

I made a slight change to the new custom tab bars, you can now have images of any height and width as defined in the CSS (in blue). I had to change it to get this tab menu to work. I made this before I knew about the sharing of alliance forums, but the link will just take you to the other site instead. Update: This script will only work with vertical menus now.

Selected tab	Unselected tab	Mouse-over tab

Another thing I did was make the three images above instead of a separate image for each tab, it loads a lot faster. You will see in the CSS below, green text after the "url( ) left top" or "url( ) left -47px". This picks the part of the image to display. left top would be 0px 0px. The Top tab "Home" is 47 pixels tall, but "Our Forums" is only 19 pixels tall, etc.

Home (47 pixels tall)
Our Forums (19 pixels tall)
Mail (38 pixels tall)

I use a program named IrfanView select a block in the image, it gives you the coordinates of the top left corner if your selection box that can be used in the CSS. If you prefer to just make separate images, leave out the image coordinates in the CSS.

I left in the imageWidth and imageHeight variables as it is used to figure out the tab bar width - important if you plan on switching to a horizontal bar. Removed.

Banner Area or Content Box (Free Form Text/HTML)

<style type="text/css">
table.TabBar {display:none;}

.TabBar2 { background: transparent url(); border:0px; padding:0px; }
.TabBar2 li { list-style-type: none; margin:0px; padding:0px; }

.Tab1Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left top no-repeat; height:47px; width:175px; }
.Tab1UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left top no-repeat; height:47px; width:175px; }
.Tab1Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left top no-repeat; height:47px; width:175px; }

.Tab2Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -47px no-repeat; height:19px; width:175px; }
.Tab2UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -47px no-repeat; height:19px; width:175px; }
.Tab2Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -47px no-repeat; height:19px; width:175px; }

.Tab3Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -66px no-repeat; height:19x; width:175px; }
.Tab3UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -66px no-repeat; height:19px; width:175px; }
.Tab3Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -66px no-repeat; height:19px; width:175px; }

.Tab4Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -84px no-repeat; height:19px; width:175px; }
.Tab4UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -84px no-repeat; height:19px; width:175px; }
.Tab4Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -84px no-repeat; height:19px; width:175px; }

.Tab5Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -103px no-repeat; height:18px; width:175px; }
.Tab5UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -103px no-repeat; height:18px; width:175px; }
.Tab5Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -103px no-repeat; height:18px; width:175px; }

.Tab6Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -120px no-repeat; height:19px; width:175px; }
.Tab6UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -120px no-repeat; height:19px; width:175px; }
.Tab6Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -120px no-repeat; height:19px; width:175px; }

.Tab7Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -140px no-repeat; height:38px; width:175px; }
.Tab7UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -140px no-repeat; height:38px; width:175px; }
.Tab7Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -140px no-repeat; height:38px; width:175px; }

</style>
<script type="text/javascript">
var tabURL = new Array();

// Enter the full URL for each tab (using the same order in the CSS) for your site below:
// You can also include other GuildPortal sites or any other website.
// tabURL.push ("ENTER URL HERE");
// **************************************************************

tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168223"); // Home
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224"); // Our Forums
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205893"); // Alliance Forums
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168226"); // Calendar
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168227"); // Roster
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168229"); // Chat
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168230"); // Mail

makeTabs();
function makeTabs () {
if (String(top.name).substring(0,4) == "Edit") {return;}
var tabMo = '';
var tabType = '';
var tabClick = '';
var tabNumber = tabURL.length;
var currentURL = window.location.href;
var currentTab = gup('TabID',currentURL);
var currentGID = gup('GuildID',currentURL);

var tabHTML = '<div class="TabBar2" align="center">';
for (j = 0; j < tabNumber; j++) {
 if (currentURL == tabURL[j] || currentTab == gup('TabID',tabURL[j]) && currentGID == gup('GuildID',tabURL[j]) ) {
  tabType = 'Tab' + (j+1) + 'Sel';
  tabMo = tabType;
  tabClick = '';
 } else {
  tabType = 'Tab' + (j+1) + 'UnSel';
  tabMo = 'Tab' + (j+1) + 'Mo';
  tabClick = ' onClick="top.location=\'' + tabURL[j] + '\'"';
 }
 tabHTML += '<li><div class="' + tabType;
 tabHTML += '" ="this.className=\'' + tabMo;
 tabHTML += '\';return true;" ="this.className=\'' + tabType;
 tabHTML += '\';return true;"';
 tabHTML += tabClick;
 tabHTML += '></div></li>';
}
document.write (tabHTML);
}
// Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
function gup(name, myString) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( myString );
 if( results == null )
  return "";
 else
  return results[1];
}
</script>

Edit: You can download the PSD (photoshop file) of the menu above with both Alliance and Horde backdrops (right-click and Save As): menu.psd
Edit (10/23/2008): Updated the code. It was leaving a tiny space between images in IE. I also made this code to only work with a vertical menu, trying to make the spacing work in IE was too painful.

At the very top of your banner area, add this:

<div><img align=center src="URL to your banner image here"></div>

And your tab button images look very nice! Me likey!