"Hoverable Tab Image " : Tabs : Help-Site - World of Warcraft Durotan server - Guild Hosting - GuildPortal

• Login: Password: Save New User? Forgot?

Home

Forums

Code

Forums

: > Hoverable Tab Image

1 2Next

Mottie (SuperAdmin)

6/9/2008 10:27 AM EST : Hoverable Tab Image

ACK!

Posts: 3873

0
Like

0
Dislike

Hoverable image with text overlay | Hoverable button with background color change
Hoverable button with background image change | Completely Custom tab bar
Complete Custom tab bar v2 | Custom tab bar v2.1 | Custom tab bar v3 | Versiion 3.1 (link target)
Tab Bar v4

How to add hoverable tab images to your website

GuildPortal admin site link to original post

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:

Clear out all tab images: Control Panel > Style & Colors > Tab Images
Set the Navigation to "Horizontal Tab Bar": Control Panel > Style & Colors > Tab Bar Style

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.

Custom StyleSheet (How to add CSS)

Tabs 150px wide

.TabBar {
background: transparent;
border: 0;
margin: 0 auto;
padding: 0;
width: 100px;
}
.SelectedTab a {
color: #ffffff !important;
}
.UnSelectedTabMo a {
color: #ffcc00 !important;
}
.SelectedTab, .UnSelectedTab, .UnSelectedTabMo {
color: #ffffff;
background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton1.gif) no-repeat;
font-weight: bold;
text-align: center;
height: 42px;
width: 150px;
padding: 14px 0 0 0;
border: 0px;
}
.SelectedTab {
background-position: left top;
}
.UnSelectedTab {
background-position: left -42px;
}
.UnSelectedTabMo {
background-position: left bottom;
}
/* html>body added for non-IE styling */
html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo {
height: 28px;

Tabs 125px wide

.TabBar {
background: transparent;
border: 0;
margin: 0 auto;
padding: 0;
width: 100px;
}
.SelectedTab a {
color: #ffffff !important;
}
.UnSelectedTabMo a {
color: #ffcc00 !important;
}
.SelectedTab, .UnSelectedTab, .UnSelectedTabMo {
color: #ffffff;
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/wowbutton1x.gif) no-repeat;
font-weight: bold;
text-align: center;
height: 42px;
width: 125px;
padding: 14px 0 0 0;
border: 0px;
}
.SelectedTab {
background-position: left top;
}
.UnSelectedTab {
background-position: left -42px;
}
.UnSelectedTabMo {
background-position: left bottom;
}
/* html>body added for non-IE styling */
html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo {
height: 28px;
}

Tabs 100px wide

.TabBar {
background: transparent;
border: 0;
margin: 0 auto;
padding: 0;
width: 100px;
}
.SelectedTab a {
color: #ffffff !important;
}
.UnSelectedTabMo a {
color: #ffcc00 !important;
}
.SelectedTab, .UnSelectedTab, .UnSelectedTabMo {
color: #ffffff;
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/wowbutton2-1.gif) no-repeat;
font-weight: bold;
text-align: center;
height: 41px;
width: 100px;
padding: 13px 0 0 0;
border: 0px;
}
.SelectedTab {
background-position: left top;
}
.UnSelectedTab {
background-position: left -41px;
}
.UnSelectedTabMo {
background-position: left bottom;
}
/* html>body added for non-IE styling */
html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo {
height: 28px;
}

That's it!

Using Custom Text Colors:

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.

[Top]

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.

Custom StyleSheet (How to add CSS)

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

td.Tab a img {
background: #555555;
}

td.Tab a:hover img {
background: #0000aa;
}

That's it!

... You can make additional images and if you want to match the style above, the name of the font I used is called Christopherhand.

[Top]

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.

Custom StyleSheet (How to add CSS)

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);
}

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.

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

7/3/2008 7:10 PM EST : Custom Tab Images

ACK!

Posts: 3873

0
Like

0
Dislike

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.

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>';
document.write (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.

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!

[top]

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

7/6/2008 5:42 PM EST : Custom Tab Images v2

ACK!

Posts: 3873

0
Like

0
Dislike

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.

Banner Area or Content Box

(Free Form Text/HTML)

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

.Tab1Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-s.gif) center center no-repeat; }
.Tab1UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-u.gif) center center no-repeat; }
.Tab1Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-h.gif) center center no-repeat; }

.Tab2Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-s.gif) center center no-repeat; }
.Tab2UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-u.gif) center center no-repeat; }
.Tab2Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-h.gif) center center no-repeat; }

.Tab3Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-s.gif) center center no-repeat; }
.Tab3UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-u.gif) center center no-repeat; }
.Tab3Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-h.gif) center center no-repeat; }

.Tab4Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-s.gif) center center no-repeat; }
.Tab4UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-u.gif) center center no-repeat; }
.Tab4Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-h.gif) center center no-repeat; }

.Tab5Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mroster2-s.gif) center center no-repeat; }
.Tab5UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-u.gif) center center no-repeat; }
.Tab5Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-h.gif) center center no-repeat; }

.Tab6Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-s.gif) center center no-repeat; }
.Tab6UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-u.gif) center center no-repeat; }
.Tab6Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-h.gif) center center no-repeat; }

</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://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205892"); // Home
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205893"); // Forums
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205895"); // Calendar
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205896"); // Roster
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168227"); // Roster2
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205899"); // Mail

// Tab image width and height (same for all images)
var imageWidth = 100;
var imageHeight = 30;

// if below is true, the tab bar will be horizontal... vertical if false
var tabHorizontal = false;

// set the amount of space you want between each tab (horizontal or vertical)
var tabSpacing = 5;

// Add custom background CSS below: color or image
// e.g. "background: #000000 url(myImage.jpg)" <- don't add a semi-colon inside the quotes
var tabBarBackground = "background: url()";

// Don't change anything below
// ***************************
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);
if (tabHorizontal) {
var tabBarWidth = (imageWidth*tabNumber) + (tabSpacing*tabNumber);
imageWidth = imageWidth + (tabSpacing/2);
} else {
var tabBarWidth = (imageWidth) + (tabSpacing/2);
imageHeight = imageHeight + tabSpacing;
}

var tabCSS = '<style>table.TabBar2 {' + tabBarBackground;
tabCSS += ';border-spacing:0px;padding:0px;margin:0px;width:' + tabBarWidth;
tabCSS += 'px;margin-left:auto;margin-right:auto;}</style>';

var tabHTML = tabCSS + '<table Class="TabBar2">';
if (tabHorizontal) tabHTML += '<tr>';

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] + '\'"';
}
if (!tabHorizontal) tabHTML += '<tr>';
tabHTML += '<td class="' + tabType;
tabHTML += '" style="border:0px;padding:0px;margin:0px;width:' + imageWidth + 'px;height:' + imageHeight;
tabHTML += 'px;" ="this.className=\'' + tabMo;
tabHTML += '\';return true;" ="this.className=\'' + tabType;
tabHTML += '\';return true;"';
tabHTML += tabClick;
tabHTML += '></td>';
if (!tabHorizontal) tabHTML += '</tr>';
}
tabHTML += '</tr></table>';
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>

Customizing the Script

Note: The CSS in blue will hide your current tab bar, add this once you have tested the new tab bar
Add your custom tab URLs to the CSS (in green). There are three images for each tab and they are named and numbered in the CSS as follows:

Tab#Sel = Selected tab image
Tab#UnSel = Unselected tab image
Tab#Mo = Mouseover tab image

Add the URL for each tab of your GuildPortal site and the URL of any other websites you would like to add to your bar in the javascript area as follows:

Replace the URL (in orange) for each tab:

tabURL.push ("ENTER URL HERE");
Add or remove this code as needed for more or less tabs

Customize your tab bar by changing the code in purple

Image height and width - all tab images must be the same size:

var imageWidth = 100;
var imageHeight = 30;
Orientation of your tab bar: horizontal or vertical. Set this variable as either true or false

var tabHorizontal = false;
Set the spacing between your tabs. It is set to 5 pixels as a default. Set it to zero if you don't want any space.

var tabSpacing = 5;
Customize the tab bar background. Add colors or images as you wish. Use the standard CSS format (add or remove elements in the example)

var tabBarBackground = "background: #000000 url(http://... myimage.jpg)";

How to add the Custom tab bar

Banner Area (only available for paid subscription sites)

Paste the above code into your Banner Area
Control Panel > Style & Colors > Banner Area (under Advanced style settings)
Save and Enable the code

Content Box Menu (vertical tab bar)

Make a "Free Form Text/HTML" box on every page of your site.
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

[top]

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

7/11/2008 2:39 AM EST : Custom Tab Images v2.1

ACK!

Posts: 3873

0
Like

0
Dislike

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.

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

// Don't change anything below
// ***************************
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.
[top]

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

8/5/2008 8:44 AM EST : Custom Tab Images v3

ACK!

Posts: 3873

0
Like

0
Dislike

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

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

<style type="text/css">
table.TabBar {display:none;}
</style>
<script type="text/javascript">
var tabURL = new Array();
// ***************************
// Tab Bar Settings
// ***************************
// if below is true, the tab bar will be horizontal... vertical if false
var tabHorizontal = true;

// set the amount of space you want between each tab (horizontal or vertical)
var tabSpacing = 2;

// Add custom background CSS below: color or image
// e.g. "background: #000000 url(myImage.jpg); height:40px; width:650px;";
var tabBarWrapper = "background: #000033 url(); height:40px;";

// Change the overall tab bar alignment below, use: left, center or right.
var tabBarAlign = "center";

// Change the tab bar alignment more precisely within the tab bar wrapper
var tabBarAlign2 = "top:5px; left:0px;";

/* *************************************************************
Enter the tab & image URLs (in order) for your site below:
You can include any GuildPortal site or any other website.

tabURL.push ([
"Tab URL"
,"Selected Tab Image URL"
,"UnSelected Tab Image URL"
,"MouseOver Tab Image URL"
]);
************************************************************** */
// Home
tabURL.push ([
"http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205892"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-s.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-u.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-h.gif"
]);

// Forums
tabURL.push ([
"http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205893"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-s.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-u.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-h.gif"
]);

// Calendar
tabURL.push ([
"http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205895"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-s.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-u.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-h.gif"
]);

// Roster
tabURL.push ([
"http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205896"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-s.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-u.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-h.gif"
]);

// Roster2
tabURL.push ([
"http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168227"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-s.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-u.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-h.gif"
]);

// Mail
tabURL.push ([
"http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205899"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-s.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-u.gif"
,"http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-h.gif"
]);

// ***************************
// Don't change anything below
// ***************************
makeTabs();
function makeTabs () {
if (String(top.name).substring(0,4) == "Edit") {return;}
var currentTyp = '';
var currentURL = window.location.href;
var currentTab = gup('TabID',currentURL);
var currentGID = gup('GuildID',currentURL);

var tabHTML = '<style>.TabBkgd {' + tabBarWrapper + '}.TabBar2 {position: relative;';
tabHTML += tabBarAlign2 +'}.TabBar2 td {';
if (tabHorizontal) {
tabHTML += 'padding: 0px '+ tabSpacing + 'px;';
} else {
tabHTML += 'padding: '+ tabSpacing + 'px 0px;';
}
tabHTML += 'margin:0px;border:0px;}.TabBar2 img {border:0px;}</style>';
tabHTML += '<div class="TabBkgd"><table class="TabBar2" cellpadding="0"';
tabHTML += ' cellspacing="0" border="0" align="'+ tabBarAlign +'" valign="middle">';
if (tabHorizontal) tabHTML += '<tr>';

for (j = 0; j < tabURL.length; j++) {
if (currentURL == tabURL[j][0] || currentTab == gup('TabID',tabURL[j][0]) && currentGID == gup('GuildID',tabURL[j][0]) ) {
currentTyp = tabURL[j][1];
} else {
currentTyp = tabURL[j][2];
}
if (!tabHorizontal) tabHTML += '<tr>';
tabHTML += '<td><a class="tabStyle" href="' + tabURL[j][0] + '" ';
tabHTML += '="tab' + j + '.src=\'' + tabURL[j][3] + '\'" ';
tabHTML += '="tab' + j + '.src=\'' + currentTyp + '\'">';
tabHTML += '<img id="tab' + j + '" src="' + currentTyp;
tabHTML += '"></a></td>';
if (!tabHorizontal) tabHTML += '</tr>';
}
if (tabHorizontal) tabHTML += '</tr>';
tabHTML += '</table></div>';
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>

Customizing the Script

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)

var tabBarWrapper = "background: #000033 url(); height:40px; width:650px;";
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)

var tabBarAlign2 = "top:5px; left:0px;";

Adding tabs. Each tab is defined as follows:

tabURL.push ([
"Tab URL"
,"Selected Tab Image URL"
,"UnSelected Tab Image URL"
,"MouseOver Tab Image URL"
]);

Add or remove these for each tab on your site.

*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.

How to add the Custom tab bar

Banner Area (only available for paid subscription sites)

Paste the above code into your Banner Area
Control Panel > Style & Colors > Banner Area (under Advanced style settings)
Save and Enable the code

Content Box Menu (vertical tab bar)

Make a "Free Form Text/HTML" box on every page of your site.
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.

[top]

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

9/21/2008 1:24 PM EST : Custom Tab Images v3.1

ACK!

Posts: 3873

0
Like

0
Dislike

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.

Read this post to customize the code below (I didn't want to repeat everything LOL)

Edit the script in red to make the tab target itself "_self" or a new window "_blank"

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

10/3/2008 8:12 AM EST : Tab Bar v4

ACK!

Posts: 3873

0
Like

0
Dislike

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.

<script type="text/javascript">
$(document).ready(function() {
$(".Tab").each(function (){
var tabName = $(this).find(".topTabLink").html();
var tabName2 = tabName.replace(" ","_");
var tabType = $(this).find("div").attr("class");
var tabLink = $(this).find(".topTabLink").html("").parent().html();
$(this).attr("id","tab_" + tabName2).html("<div></div>");
$(this).find("div").wrap(tabLink);
if (tabType == "UnSelectedTab") {
var tabMovr = "tabH_" + tabName2;
var tabMout = "tabU_" + tabName2;
var tabUsel = "tabU_" + tabName2;
$(this).find("div").addClass(tabUsel)
.mouseover(function(){$(this).removeClass(tabUsel).addClass(tabMovr)})
.mouseout(function(){$(this).removeClass(tabMovr).addClass(tabUsel)});
} else {
var tabSel = "tabS_" + tabName2;
$(this).find("div").addClass(tabSel);
}
if ($(this).find("div").css("background-image") == "none") {
$(this).find("div").html(tabName);
}
});
});
</script>

Side Menu

If you have a side menu (left, center or right), there is a different javascript to use. I split this code up since you'll use only one of these bar types. To modify the tab bar type go to:

Control Panel > Site Style > Navigation Type > Content Box - Left, Center or Right Side

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

<script type="text/javascript">
$(document).ready(function() {
$(".sideNavLink").parent().parent().addClass("sideMenu");
$(".sideNavLink").each(function (){
var tabLink = $(this).attr("href");
if (tabLink.match("Guild.aspx")) {
var currentURL = window.location.href;
var currentTab = gup('TabID',currentURL);
var currentGID = gup('GuildID',currentURL);
var tabName = $(this).html().replace(" ","_");
   if (currentGID == gup('GuildID',tabLink) && currentTab == gup('TabID',tabLink)) {
   var tabType = "tabS_";
   var tabMovr = "tabS_"
   } else {
   var tabType = "tabU_";
   var tabMovr = "tabH_"
   }
tabType += tabName;
tabMovr += tabName;
$(this).html("<div>"+tabName+"</div>");
$(this).find("div").addClass(tabType)
   .mouseover(function() {$(this).removeClass(tabType).addClass(tabMovr)})
   .mouseout(function() {$(this).removeClass(tabMovr).addClass(tabType)});
if ($(this).find("div").css("background-image") != "none") {
   $(this).find("div").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>

What the HTML looks like

This section is here so you know what the modified HTML will look like, so it will be easier to understand how the CSS will work

*DO NOT COPY THIS TO YOUR SITE*... it is only for reference.

Horizontal Tab Bar		Side Menu
<table class="TabBar"> <tbody> <tr> <td align="center" class="Tab" id="tab_Home"> <a href="HOME TAB URL" class="topTabLink"> <div class="tabU_Home">Home</div> </a> </td> <td align="center" class="Tab" id="tab_Forums"> <a href="FORUM TAB URL" class="topTabLink"> <div class="tabS_Forums">Forums</div> </a> </td> <td align="center" class="Tab" id="tab_Mail"> <a href="MAIL TAB URL" class="topTabLink"> <div class="tabU_Mail">Mail</div> </a> </td> </tr> </tbody> </table>		<div class="sideMenu"> <li> <div id="tab_Home" class="Tab"> <a href="HOME TAB URL" title="Click to go to the Home page." class="sideNavLink"> <div class="tabU_Home">Home</div> </a> </div> </li> <li> <div id="tab_Forums" class="Tab"> <a href="FORUM TAB URL" title="Click to go to the Forums page." class="sideNavLink"> <div class="tabS_Forums">Forums</div> </a> </div> </li> <li> <div id="tab_Mail" class="Tab"> <a href="MAIL TAB URL" title="Click to go to the Mail page." class="sideNavLink"> <div class="tabU_Mail">Mail</div> </a> </div> </li> <br/> <br/> <b>Account</b> <li><a href="#" class="sideNavLink">Characters / Settings</a></li> <li><a href="#" class="sideNavLink">GuildPortal Home</a></li> <li><a href="#" class="sideNavLink">My Blog</a></li> <li><a href="#" class="sideNavLink">Logout</a></li> <br/> <br/> <b>Guild Admin</b> <li><a href="#" class="sideNavLink">Control Panel</a></li> <li><a href="#" class="sideNavLink">Member Admin</a></li> </div>

The text in blue highlights existing class names
The text in green shows new CSS classes & IDs that were added with this script.
Tab IDs are named as follows: tab_{tab name}.

The "Home" tab will have "tab_Home" as it's ID
A tab named "Guild Roster" will have "tab_Guild_Roster" as it's ID. All spaces must be replaced with an underscore "_".

Tab classess are named as follows:

Selected Tab = tabS_{tab name}
Unselected Tab = tabU_{tab name}
Hovered Tab = tabH_{tab name}

For the side menu, I didn't add any code to add images to that section... give me feedback, would you want to?

The CSS

CSS in common

The CSS for the actual tab bar image definitions is exactly the same for the horizontal tab bar and the side menu.

.tabH_Home {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/home-h.png) no-repeat; height:34px; width:100px; }
.tabU_Home {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/home-u.png) no-repeat; height:34px; width:100px;}
.tabS_Home {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/home-s.png) no-repeat; height:34px; width:100px;}

.tabH_Forums {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/forums-h.png) no-repeat; height:34px; width:100px;}
.tabU_Forums {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/forums-u.png) no-repeat; height:34px; width:100px;}
.tabS_Forums {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/forums-s.png) no-repeat; height:34px; width:100px;}

.tabH_Voting {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/voting-h.png) no-repeat; height:34px; width:100px;}
.tabU_Voting {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/voting-u.png) no-repeat; height:34px; width:100px;}
.tabS_Voting {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/voting-s.png) no-repeat; height:34px; width:100px;}

.tabH_Calendar {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/calendar-h.png) no-repeat; height:34px; width:100px;}
.tabU_Calendar {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/calendar-u.png) no-repeat; height:34px; width:100px;}
.tabS_Calendar {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/calendar-s.png) no-repeat; height:34px; width:100px;}

.tabH_Roster {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/roster-h.png) no-repeat; height:34px; width:100px; }
.tabU_Roster {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/roster-u.png) no-repeat; height:34px; width:100px;}
.tabS_Roster {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/roster-s.png) no-repeat; height:34px; width:100px;}

.tabH_Bank {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/bank-h.png) no-repeat; height:34px; width:100px; }
.tabU_Bank {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/bank-u.png) no-repeat; height:34px; width:100px;}
.tabS_Bank {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/bank-s.png) no-repeat; height:34px; width:100px;}

.tabH_Chat {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/chat-h.png) no-repeat; height:34px; width:100px; }
.tabU_Chat {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/chat-u.png) no-repeat; height:34px; width:100px;}
.tabS_Chat {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/chat-s.png) no-repeat; height:34px; width:100px;}

.tabH_Mail {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/mail-h.png) no-repeat; height:34px; width:100px; }
.tabU_Mail {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/mail-u.png) no-repeat; height:34px; width:100px;}
.tabS_Mail {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/tabs/mail-s.png) no-repeat; height:34px; width:100px;}

Replace the text in orange with the URL to your custom images.
Replace the text in red with the exact height & width of each custom image.
Tab classess are named as follows:

Selected Tab = tabS_{tab name}
Unselected Tab = tabU_{tab name}
Hovered Tab = tabH_{tab name}

Horizontal Tab Bar CSS

.TabBar {background: transparent url(); color:#ffffff; margin:auto; width:10%;}
.Tab {padding-left:5px;}

Tab Bar: "TabBar" defines the box that contains all the tabs.

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 make the tabs spread out across the entire width of your page, replace the "10%" with "100%"

Tabs:

To adjust the spacing between the tabs, modify the tab "padding-left: 5px;" to the desired spacing. Don't make this number too big - some people do still use lower resolution screens.
To modify a specific tab, use the tab ID (starts with a "#"). So an example of hiding the "Welcome" tab that is used with a splash page, add this code:

#tab_Welcome { display:none; }

Side Menu CSS

.sideMenu {background: transparent url(); margin-top:20px; margin-left:10px;}
.tab {margin-left:10px; margin-bottom:0px;}

.sideMenu li {list-style-type: none; margin:-2px; padding:0px; width:0px;}
html>body .sideMenu li {margin:0px;} /* hack for non-IE */

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)

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Lizareth (Applicant)

11/15/2008 2:48 AM EST : RE: Tab Bar v4

Posts: 10

0
Like

0
Dislike

Well Mottie, you've managed to find something to tie me up for a week! (I'm kinda slow)

I love all the different tab styles, especially the vertical one. Have you ever seen this site? I've always dreamed of tabs like that, but I imagine it's probably a lot of work.

Anyway, while you're busy packing and moving and unpacking and settling and finding your way around town, I'll be working on my tabs.

•

Mottie (SuperAdmin)

11/15/2008 3:08 AM EST : RE: Tab Bar v4

ACK! Mottie Posts: 3873 0 Like 0 Dislike	Actually that menu isn't a lot of work. It's already set up and only requires you to add your links and then host the files. Check out the code here: Dynamic Drive I haven't looked into adding different styles to the menu, but I will when I have more time. >>help-site<< Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
•

Vantolamar (Member)

7/21/2009 2:28 AM EST : RE: Tab Bar v4

Vantolamar Posts: 3 0 Like 0 Dislike	Hi I'm completely new to all this CSS stuff but with the simple to follow directions I managed to get these working on my site here: http://www.guildportal.com/Guild.aspx?GuildID=320231&TabID=2684746&PageName=Home I just have one question though on something I can't seem to figure our which is how do I change the spacing between the tab buttons?
•

1 2Next

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 )