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
Ciannon (Guild Admin) 7/19/2008 8:54 PM EST : RE: Tab image help
Ciannon
Posts: 2000
Zomgawsh Poster

Here's a few images I created to use as backgrounds for this. But, I'm not quite 100% sure as to what needs to be transparent and what doesn't need to be. Mottie, any way that I'd be able to use these already created images to do something useful. I have transparent ones as well, but the text is white, so the image looks blank. Should it look like that?

Here's the images I was working on earlier... All background.

     
     
     


The ones on the left were just toys I was playing around with. I got more serious on the right images. Here's something similar to what I'm looking to do with the text. Granted, I may not use this color. I'll probably end up using strait up white.



D'oh! Forgot that I couldn't use custom text. THIS is what it looks like. The font is driving me nuts. But I'll get used to it. LOL



Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

Ciannon (Guild Admin) 7/19/2008 9:28 PM EST : RE: Tab image help
Ciannon
Posts: 2000
Zomgawsh Poster

Yeah, I'm definitely not liking that. Mottie! Work your magic.


Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

Mottie (MVP) 7/19/2008 11:21 PM EST : RE: Tab image help
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Did you look at the second page of this thread? You don't have to worry about using standard fonts anymore. No need for transparent backgrounds. Just design three images for each tab: Selected, Unselected and mouseover including text. Then read the custom tab images v2 post
TopBottom

Ciannon (Guild Admin) 7/19/2008 11:58 PM EST : RE: Tab image help
Ciannon
Posts: 2000
Zomgawsh Poster

To my knowledge that is where the transparency comes in. That's why I asked about it. I don't know how to do the interminglings of transparency vs. background vs. foreground. I know what they mean, but I am not a guru. And yes, I read the 2nd page.

Damnit! I just realized that it messed up my progression bar in the banner.

*EDIT* I think it just doesn't reload the progression bar when I refresh. Odd. But, I'll stop spamming this thread

*EDIT #2* D'oh, must have missed the "no transparent" part of your last post too. I've been up for almost 20 hrs. Time to get to bed


Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

-Asiria- (New Admin) 7/29/2008 4:03 AM EST : RE: Tab image help

-Asiria-
Posts: 226
Fingers of Fury!

Hi..Im not sure if this is possible but I thought I would put the question to those of you with far more knowledgeable than myself.

I would like to increase the width of the left and right panes of my site.

<td id="ctl00_ContentPlaceHolder1_LeftPane" valign="top" style="width:175px;"><table border=0 cellpadding=0 cellspacing=0 width=100%>


In the code above I want to change it from 175 to 200 but not sure how to go about doing so or where to put it if it is even possible.

Thanks kindly for any help to this design newb.
TopBottom

Mottie (MVP) 7/29/2008 4:10 AM EST : RE: Tab image help
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Each page on your site has left and right column widths set from the control panel.

Control Panel > Site Pages > Click on "Display Options" for the tab you want to adjust.

If you don't have a set width for your entire site, it might be best to change only the "Left Pane Width" and "Right Pane Width". Leave the "Center Pane Width" blank and your center pane will expand and contract as you change the width of your browser window.
TopBottom

-Asiria- (New Admin) 7/29/2008 4:23 AM EST : RE: Tab image help

-Asiria-
Posts: 226
Fingers of Fury!

Wonderful! Thanks so much
TopBottom

Fagulhas (Guild Admin) 8/2/2008 10:04 PM EST : RE: Custom tab images v2
Fagulhas
Posts: 1859
Zomgawsh Poster

Hey mottie, been using your custom tab images v2 in our website and got a few small issues.

Not sure if this can be fixed/improved but here it goes, currently you cannot middle click in a tab image to open in another window, nor click in the current selected tab.

For example if you are in the home tab, you cannot click on it again just for a simple refresh of the page.


Judging by the code its working as intended but its possible to adapt this to work just like a normal tab when used with the default gp editor?

TopBottom

Mottie (MVP) 8/3/2008 3:19 AM EST : RE: Custom tab images v2
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I look into fixing that... but I don't think I can do it today, we're raiding all day! LOL
TopBottom

Mottie (MVP) 8/5/2008 8:05 AM EST : Custom tab images v3
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster


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 the middle 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 I'm lazy and used the same images)


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>';
(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 of my test site (link in the sig). TheNavigation bar seen will take you to my "test site 2" roster. I wouldhave used the forums, but I like my forums being the full width of thepage 
TopBottom

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