How to add hoverable tab images to your website

So far, I've posted three different ways to make your tab images "hoverable" - if you don't know what I mean, move your mouse over the tabs above. The standard GuildPortal image tabs will only have two images per tab, selected and unselected.

1. Hoverable image with text overlay

With this method, you're limited to using text over a graphical button, so you can't use any fancy fonts with this method. Set up your site as follows:

I started out with the image on the left below, each button is 150 pixels wide and 42 pixels tall. The top image is for a selected tab (SelectedTab), middle for an unselected tab (UnSelectedTab) and the bottom for a moused over tab (UnSelectedTabMo). * I've included the other two images for people who want a different color - just change "wowbutton1.gif" to "wowbutton2.gif" or "wowbutton3.gif" :)

I added the following to my Custom StyleSheet (CSS) - be sure to overwrite the existing ".TabBar" in the CSS. This will look different on Internet Explorer versus Firefox and other browsers, so there are extra styles listed. If you decide to use a different sized image, please read the note at the bottom.

The Selected tab color is set to white in the CSS above. Change the color in above in the ".SelectedTab a" variable above in blue.

If you want to prevent the text color change on mouse over of the tab, change the color of the ".UnSelectedTabMo a" variable also in blue.

Using Custom Images:

Change the url () to the desired image. The "left top", "left -42px" and "left bottom" tell the browser which part of the image to display. Take those out of you are using three separate images.

For Internet explorer, change "height: 42px;" to the exact height of the new button image

For Firefox and other browsers, you will be changing the "height: 28px;" in the CSS. This is a little more tricky in that if you set it to the height of the button, it will be larger than intended because of the extra "padding". Just make sure that the height + padding = the new button height. (in the above CSS, the height = 28 and the padding = 14, 28 + 14 = 42.

For all browsers, change any instance of "150px", "125px" or "100px" depending on which CSS you pick above to the width of your new image and adjust the "padding: 14px 0 0 0;" to vertically center the text in the middle of the button. There are four numbers there to tell the browser the amount of padding to set for top, right, bottom and left sides - we are only interested in setting the top padding here.

2. Hoverable button with background color change

Here is how you can add hover effects to tab buttons. I made two sets of buttons. 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

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)

Add the "table.TabBar" if you want your buttons all scrunched together. Add the other two for the hover effect to work. Change the green text below to change your non-hover (555555 = medium grey) and hover (0000aa = blue) colors.

3. Hoverable button with background image change

Here is a slightly different way to get hover effects on your buttons. Very similar to the 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, add the "table.TabBar" if you want your buttons all scrunched together. Add the other two lines of CSS for the hover effect to work.

Edit (8/17/2009): Added CSS in section 1 to make tabs that are 150px, 125px and 100px wide. With the 125 px wide tab buttons, you are limited to 9 tabs before it goes off the screen for users that have a screen/browser resolution of 1024 x 768 or less.

Completely Custom Tab bar

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:

A paid subscription site - so you can enter HTML and Javascript in the banner area

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

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.

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.

Tab#Sel = Selected tab image

Tab#UnSel = Unselected tab image

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!

Complete Custom Tab Bar v2

Hiya, I can't just leave the tab bar as it is LOL...

The code below will allow you to add custom tab images and have them point to any site of your choosing.

With this revision, you can have the tab bar either horizontal (banner area) or vertical (banner area or in a content box). If you plan to use the bar in a content box, you'll have to add the code to every page on your site and any page that is outside your guild site.

In my example below I added the tab bar to my second test site to minimize the clutter on this one, but I did add a link to "Roster 2" is on this site - click on the Roster tab above to see it. This method would make your site appear to have two forums or you could make a tab that links to an alliance guild.

// 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://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205892"); // HometabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205893"); // ForumstabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205895"); // CalendartabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205896"); // RostertabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168227"); // Roster2tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205899"); // Mail

Then simply paste in your modified code into every box. Ensure you paste the code into the editor while in HTML mode () or by right clicking in the editor and selecting "Paste as HTML".

Tabs to other sites:

If you have your tab bar point to another site, simply add the code to that site. You can see an example of how to have the tab bar link to more than one site by clicking on the "Roster" tab of this site. The Navigation bar seen will take you to my "test site 2" roster. I would have used the forums, but I like my forums being the full width of the page

Custom Tab Images v2.1

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 light 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 to 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.

// 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"); // **************************************************************

Edit: You can download the PSD (photoshop file) of the menu above with both Alliance and Horde backdrops (right-click and Save As): menu.psdEdit (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.[top]

Custom Tab bar v3

I guess I need to call this version 3, I made a bunch of changes to it. The only thing this tab bar won't allow is use of CSS to define the tabs - so each tab needs to have three images (selected, unselected and mouseover), no more combined image *cry*

I reason I made version 3, was so you can click on the tab with themiddle mouse button to open a new tab, shift click to reload the page,etc... just like the original tabs.

It looks almost exactly like version 2 (LOL, because I'm lazy and used the same images). The difference is under the hood...

Note: The CSS in blue will hide your current tab bar, add this once you have your new tab bar tested and working properly

Customize your tab bar by changing the code in purple

Tab bar orientation. Set the variable to true for a horizontal bar, false to make it vertical.

var tabHorizontal = true;

Set the spacing between your tabs. It's set to 2 (pixels) by default. Set it to 0 for no space. This works for both horizontal and vertical tabs.

var tabSpacing = 2;

The tab bar is surrounded by a <div>, you can add a background or adjust it how ever you want by adjusting the CSS below. You can also define the width of the container by adding a defined width (it defaults to 100%, so I left it out of the code above)

Tab bar alignment. This sets the alignment on the page, can be set to left, center or right.

var tabBarAlign = "center";

Tab bar precision alignment. If you make the tab bar wrapper bigger than the tabs, the alignment may be a little off, adjust the top and left in the CSS below to tweak it. The default top alignment is set to 5px - the tab images are 30 pixels high, the container is 40 pixels high, so nudging it down 5 pixels centers it)

*Note: tab image sizes are not defined, so you could use various sized images in your bar. Just make sure the selected, unselected and mouseover images are all the same size or the bar will "jump" when you hover over it.

Then simply paste in your modified code into every box. Ensure you paste the code into the editor while in HTML mode () or by right clicking in the editor and selecting "Paste as HTML".

Tabs to other sites:

Ifyou have your tab bar point to another site, simply add the code tothat site. You can see an example of how to have the tab bar link tomore than one site by clicking on the "Roster" tab (above). TheNavigation bar seen will take you to my "test site 2" roster.

Well yet another minor revision... this version only has one minor change: The tab buttons will, by default, open in the same window or a new window. AngelchildeCoX (in this thread) requested this to have a tab that will open paypal in a new window.

Tab Bar version 4

This tab bar goes back to the basics. It uses jQuery to restructure the existing tab bar that GuildPortal sets up. All it does is it adds classes and IDs so that you can use CSS to manipulate the bar.

Advantages of this bar

Guild, Officer and Admin tabs will not display to the public as it manipulates the existing bar that is formed by GuildPortal for each page.

If you use a side menu to navigate through your site, there is a script below to allow you to add tab images there as well.

It uses CSS, so you can easily have a different set of tab images for each tab (refer to this post)

Disadvantages of this bar

If you want to add a tab that links to another site, your best bet would be to use Custom Tab Bar v3.1. I may make another version of this bar to enable you to add tabs to other sites, but I wanted to get this version out there first

This method requires a lot of CSS

Javascript/jQuery

Horizontal Tab Bar

This script is set up to modify the horizontal tab bar (default setting when making a site). If you switched to the horizontal full bar type and plan on using this script, you'll have to switch it back.

Control Panel > Site Style > Navigation Type > Horizontal Tab Bar

Copy the code below into the banner HTML or footer HTML. There is nothing that needs to be modified in the code.

Side Menu: "sideMenu" defines the box that contains all the tabs as well as the Account and Guild Admin links.

To add a background image, add a URL within the "url(URL TO IMAGE)" in the CSS.

To add a background color, replace "transparent" with a color "#000000"

To adjust the space between the top of your ContentBoxBody and the menu, change the "margin-top:20px"

To adjust the space between the left edge of your ContentBoxBodyy and the menu, change the "margin-left:10px;"

The bottom two lines of CSS should not be modified (in teal). This CSS removes the bullet and all spacing. The "-2px" is added to adjust for IE's tendency to add 2px spacing between images. This is necessary if you plan on using an image that must not have any spacing.

Tabs:

To adjust the spacing between the left side of the "sideMenu" box and your tab images, change the "margin-left:10px"

To adjust the spacing between tabs, change the "margin-bottom:0px;"

To modify a specific tab, use the tab ID (exactly the same as the horizontal tab)

If your tooltips are not working or only show gibberish (raw HTML) then you are most likely missing the updated tooltip script. Add the following to your Footer Area (Control Panel > Custom HTML & Scripts > Footer Area)