HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
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
Prev 1 2 3 4 5 6Next
Fagulhas (Guild Admin) 8/5/2008 1:11 PM EST : RE: Custom tab images v3 link
Fagulhas
Posts: 1859
Zomgawsh Poster
As usual mottie, impressive job. v3 up and running on my website, everything working properly!

Thanks CSS Mastah!
Top • Bottom

Mottie (MVP) 8/5/2008 2:32 PM EST : RE: Custom tab images v3 link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Very nice, I've always really liked your site.
>>help-site<<
Top • Bottom

Mottie (MVP) 8/16/2008 9:03 AM EST : Custom tab images v3.1 link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
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"

<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"
,"_self"
,"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"
,"_self"
,"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"
,"_self"
,"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"
,"_self"
,"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"
,"_self"
,"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"
,"_blank"
,"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"
,"_self"
,"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][2];
 } else {
  currentTyp = tabURL[j][3];
 }
 if (!tabHorizontal) tabHTML += '<tr>';
 tabHTML += '<td><a class="tabStyle" href="' + tabURL[j][0] + '" ';
 tabHTML += 'target="' + tabURL[j][1] + '" ';
 tabHTML += '="tab' + j + '.src=\'' + tabURL[j][4] + '\'" ';
 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>';
(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>
>>help-site<<
Top • Bottom

LochenTwo (Guild Admin) 8/23/2008 10:29 AM EST : RE: Custom tab images v3.1 link
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster
Can the tab bar be used with the repeating banner? I pasted it in there but it removed my columns =x

Top • Bottom

Mottie (MVP) 8/23/2008 11:05 AM EST : RE: Custom tab images v3.1 link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
I haven't tried combining both, but I don't see why it would work....

Hmmm, there is a limit on how much stuff you can add into the banner area... when you added the tab bar, did you notice it was cut off when you went back to re-edit it? If it did, you may have to move the tab bar javascript into an external ".js" file and then point to it.


>>help-site<<
Top • Bottom

LochenTwo (Guild Admin) 8/23/2008 12:23 PM EST : RE: Custom tab images v3.1 link
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster
I think there was enough room, it did not seem as if anything was cut off.

Top • Bottom

Kaysi (Guild Admin) 8/25/2008 8:15 AM EST : RE: Custom tab images v3.1 link

Kaysi
Posts: 445
Fingers of Fury!
What would one suggest for a site that wants to include the Custom tab images v2, but does not have enough room left in the banner area for the whole code to fit?

I have the great Recruitment/Progression Bar presently under the banner image, and the last 1/3 of the code for the Custom Tab images V2 ends up getting cut off.

I thought about maybe just making a free form box that would be along the top of each page, but I would prefer that box to appear invisible "no boarders, etc" so it appears to anyone on the site that it's still the original tab bar.... if that's possible.

Anathema

~Thanks!

Edit: I made a test box at the bottom of my Gallery page, and the mouse-over glow works great! (Thanks Mottie!). Is it possible to make the properties of that 1 test box all black, so only the buttons would be visible? If so, then I'll just make that box part of every page on my website.
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
Top • Bottom

Mottie (MVP) 8/25/2008 12:04 PM EST : RE: Custom tab images v3.1 link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
If you're trying to use any version tab bar here into the banner, but you're getting your information cut off... this is what you need to do:
  • CSS: Move anything between the <style type="text/css> and </style> into the Custom StyleSheet.

  • Javascript: Open your favorite text editor (not wordpad). Copy everything between the <script type="text/javascript"> and </script> and paste it into the editor. Save the file as "mytabbar.js" (or whatever you want to name it) and upload it to your hosting site.

  • Last thing you'll have to do is paste the following wherever you want to add the tab bar, including your Banner Area:
<script src="URL to your host/mytabbar.js" type="text/javascript"></script>

*Note: the tab bar will be added immediately after this line, so be aware of where you are adding it*

As for hiding the border of your navigation box, read this post
>>help-site<<
Top • Bottom

Zaul Tyvalger (Guild Admin) 8/25/2008 12:27 PM EST : RE: Custom tab images v3.1 link
Zaul Tyvalger
Posts: 225
Fingers of Fury!
Mottie you are awesome! Thank you

http://www.guildportal.com/Guild.aspx?GuildID=243233&TabID=2046479


I am still very new to this. I've only been using the basic tools to create my site but as I expand my knowledge you are most certainly a master.
....................................                  ...............................................
"''There is no emotion, there is peace.
There is no ignorance, there is knowledge.
There is no passion, there is serenity.
There is no chaos, there is harmony.
There is no death, there is the Force.''"
?Odan-Urr's Jedi Code[src]
Top • Bottom

Kaysi (Guild Admin) 8/25/2008 1:19 PM EST : RE: Custom tab images v3.1 link

Kaysi
Posts: 445
Fingers of Fury!
Worked like a charm, as always!

Thank you again!!!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
Top • Bottom

Prev 1 2 3 4 5 6Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%