.SelectedTab a {
 color: #ffffff !important;
}

.UnSelectedTabMo a {
 color: #ffcc00 !important;
}

a:link, a:visited { color: #ffcc00; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
a:active { color: #ccc00; text-decoration: none; }

• 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)
  
  

• 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

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

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

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

<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

• 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

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

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

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

width:1300px; /* <- adjust width of the custom tab bar here */