Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Tab image help
Vlos`Nuij (New Admin) 8/25/2008 4:02 PM EST : RE: Custom tab images v3.1
Vlos`Nuij
Posts: 808
Zomgawsh Poster

Love your tabs Mottie! I'm using the red set but cant get the txt colors to change.. it was originally set to blue before i changed the tabs to the ones your created and now the tabs that arent selected stay blue and are very hard to read. Any suggestions.

And what would it cost me to have you design my entire site Heh took me an hour just to get the tabs to work.
TopBottom

Mottie (MVP) 8/25/2008 5:32 PM EST : RE: Custom tab images v3.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

If you look in the CSS you'll see:
.SelectedTab a {
 color: #ffffff !important;
}

.UnSelectedTabMo a {
 color: #ffcc00 !important;
}
If you don't, add it and adjust the color (in green) to what you want

Edit: Oops, it looks like you're missing the CSS for links in general... add and adjust this as desired:
a:link, a:visited { color: #ffcc00; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
a:active { color: #ccc00; text-decoration: none; }
TopBottom

Vlos`Nuij (New Admin) 8/26/2008 7:10 AM EST : RE: Custom tab images v3.1
Vlos`Nuij
Posts: 808
Zomgawsh Poster

THank you
TopBottom

fuzzhead (New Admin) 9/28/2008 6:25 PM EST : RE: Tab image help
fuzzhead
Posts: 295
Fingers of Fury!

Quick question: In this post is the java script necessary if you only want the tab images to swap out (i.e. no icon above each image)? I tried just adding the "table.TabBar" definitions, but all it does is make my entire tab bar disappear.

The reason I ask is because I really don't want any extra space under my banner, I just want the rollover images to appear when the mouse goes over each tab.
TopBottom

Mottie (MVP) 9/29/2008 2:30 AM EST : RE: Tab image help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Yes the javascript is necessary... but you don't have to use the image there... you can use any image.

I just got an idea of how to modify the built it bar with javascript and you only have to deal with CSS.... cool
TopBottom

fuzzhead (New Admin) 9/29/2008 2:50 AM EST : RE: Tab image help
fuzzhead
Posts: 295
Fingers of Fury!

Okay cool... thanks Mottie, you're the best!!! I really can't imagine what many of us would do if you weren't here to hold our hand through all of this.

I'll test putting in the java script and see what happens. If I run into any problems, I'll report back with the details.
TopBottom

fuzzhead (New Admin) 9/29/2008 3:38 AM EST : RE: Tab image help
fuzzhead
Posts: 295
Fingers of Fury!

Heh nvm... I thought I had a problem but it's corrected now.

Btw, the rollovers work great and I'm a happy camper... THANKS MOTTIE!!!!
TopBottom

Mottie (MVP) 10/3/2008 7:49 AM EST : Tab Bar version 4
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


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. See this in action on my test-site 3.
Control Panel > Site Style > Navigation Type > Horizontal Tab Bar
Copy the code below into the banner area or footer. 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 area or footer. 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)
TopBottom

Eochain (New Admin) 12/10/2008 7:55 AM EST : RE: Tab Bar version 4

Image Blocked

Eochain
Posts: 518
Zomgawsh Poster

HELP PLEASE!! I've tried to follow this as close as I can but I keep getting an error saying that there are HTML codes in it and it wont save my CSS after I enable it -


html, body, div, p, td, form, img, h1, h2, h3, h4, h5, h6, input, select {font-family: Tahoma,Verdana,Segoe,sans-serif;font-size: 10pt;}body {margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;background-color: #000000;}DIV.PageWrapper {width: 100%;}form {padding: 3px;border: none;}img { border: none; }hr { color: #009900; }.BannerArea { margin-bottom: 5px; }DIV.ContentWrapper {margin-top: 5px;}DIV.PageFooter {color: 00cc00;text-align: left;}.TabBar {margin: 0px;padding: 0px;}.SelectedTab {background-color: #000000;color: #33ff00;border: solid 1px #009900;border-color: #009900;text-align: center;padding: 2px;}.UnSelectedTab {background-color: #000000;color: #ccff99;border: solid 1px #009900;text-align: center;cursor: pointer;padding: 2px;}.UnSelectedTabMo {background-color: #000000;color: #33ff00;border: solid 1px #009900;border-color: #009900;cursor: pointer;text-align: center;padding: 2px;}.MoGridRow{background-color: #213622;
color: #f5f4a8;}.MoGridRow a:link, .MoGridRow a:visited, .MoGridRow a:hover, .MoGridRow a:active {color: #f5f4a8;}.AltGridRow{background-color: #;color: #ccff99;}.NormGridRow{background-color: #252222;color: #ccff99;}.ActiveDiv { }.ContentBox {background-color: #000000;border: solid 1px #009900;}.ContentBoxTitle {padding: 5px;background-color: #000000;color: #33ff00;}.ContentBoxBody {background-color: #000000;text-align: left; color: #ccff99;padding: 5px;}.ContentTable { background-color: #000000;color: #ccff99;font-family: Tahoma,Verdana,Segoe,sans-serif;font-size: 10pt;} table { color: #ccff99;font-family: Tahoma, Verdana,Segoe,sans-serif;font-size: 10pt; }.StateBar {background-color: #000000;color: #ccff99;text-align: center;padding: 5px;}.ForumCategoryHeader {background-color: #000000;color: #ccff99;background: url('http://www.geocities.com/gayboiz74/woodborder.png');
border-width: 1px 1px 1px 1px;border-style: solid;border-color: #009900;padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;margin: 1px;}.MessageAuthorLinkCell1{width: 135px;}.MessageAuthorInfoCell1{text-align: center;width: 135px;vertical-align: top;}.ContentBoxTitleNoBackground {color: #33ff00;margin-top: 0px;padding-top: 0px;}A:active {color: #25cc00; text-decoration: none;}A:link {color: #25cc00; text-decoration: none;}A:hover {color: #25cc00; text-decoration: underline;}A:visited {color: #009915; text-decoration: none;}.toolTipHeader {color: lime;font-weight: bold;}#dhtmltooltip {position: absolute;width: 150px;border: solid 1px white;padding: 3px;background-color: black;color: white;visibility: hidden;z-index: 100;}

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

.Tab1Sel { background: url(http://www.axiomfiles.com/Files/290731/homehi.png) no-repeat; }
.Tab1UnSel { background: url(http://www.axiomfiles.com/Files/290731/homelow.png) no-repeat; }
.Tab1Mo { background: url(http://www.axiomfiles.com/Files/290731/homehi.png) no-repeat; }

.Tab2Sel { background: url(http://www.axiomfiles.com/Files/290731/forumshi.png) no-repeat; }
.Tab2UnSel { background: url(http://www.axiomfiles.com/Files/290731/forumslow.png) no-repeat; }
.Tab2Mo { background: url(http://www.axiomfiles.com/Files/290731/forumshi.png) no-repeat; }

.Tab3Sel { background: url(http://www.axiomfiles.com/Files/290731/enlisthi.png) no-repeat; }
.Tab3UnSel { background: url(http://www.axiomfiles.com/Files/290731/enlistlow.png) no-repeat; }
.Tab3Mo { background: url(http://www.axiomfiles.com/Files/290731/enlisthi.png) no-repeat; }

.Tab4Sel { background: url(http://www.axiomfiles.com/Files/290731/patrolshi.png) no-repeat; }
.Tab4UnSel { background: url(http://www.axiomfiles.com/Files/290731/patrolslow.png) no-repeat; }
.Tab4Mo { background: url(http://www.axiomfiles.com/Files/290731/patrolshi.png) no-repeat; }

.Tab5Sel { background: url(http://www.axiomfiles.com/Files/290731/eoredhi.png) no-repeat; }
.Tab5UnSel { background: url(http://www.axiomfiles.com/Files/290731/eoredlow.png) no-repeat; }
.Tab5Mo { background: url(http://www.axiomfiles.com/Files/290731/eoredhi.png) no-repeat; }

.Tab6Sel { background: url(http://www.axiomfiles.com/Files/290731/chathi.png) no-repeat; }
.Tab6UnSel { background: url(http://www.axiomfiles.com/Files/290731/chatlow.png) no-repeat; }
.Tab6Mo { background: url(http://www.axiomfiles.com/Files/290731/chathi.png) no-repeat; }

.Tab7Sel { background: url(http://www.axiomfiles.com/Files/290731/mailhi.png) no-repeat; }
.Tab7UnSel { background: url(http://www.axiomfiles.com/Files/290731/maillow.png) no-repeat; }
.Tab7Mo { background: url(http://www.axiomfiles.com/Files/290731/mailhi.png) no-repeat; }

.BannerArea
{
/* Add attributes for the .BannerArea element below. */
/* When done, delete these two comment lines. */



}



Signature blocked by Forum Admin!
TopBottom

Mottie (MVP) 12/11/2008 3:23 AM EST : RE: Tab Bar version 4
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Eochain!

Ok, I found the problem... oddly enough it's in this line:
width:1300px; /* <- adjust width of the custom tab bar here */
The site thinks the "<-" is HTML (in red) and isn't ignoring it like it should... just remove it and you should be fine.
TopBottom

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