Centering the New Tab Bar

Before
After

If you are using custom CSS on your site, add the following CSS without the <style> tags. If you aren't using custom CSS, then add the following (including the style tags) to your footer area.

CSS

<style type="text/css">
.straightBarWrapper { background: url(); }
.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab { width: 100px; }
.straightBarWrapperInnerTable { margin: 0 auto;  background: transparent url(BACKGROUND IMAGE URL); }
</style>

Customizing

• The line in blue removes the background image from the wrapper - so the bar doesn't go all the way across the page.
• The line in purple makes the buttons wider (you can adjust the width to whatever you desire)
• The line in green centers all the buttons. If you add a background url (in orange) to this definition you can replace the button background image, but it's a little tricky:
  
  
  • View Source of your page
  • Search the page source (Ctrl-F or Find) for this line (it's near the top). The "#" in red will be different for every site.
    
    <link href="/UI/GpCss.ashx?stylesheet=Guild######_###.css" type="text/css" media="screen" rel="stylesheet" />
  
  
  • Click the link (except for IE, you'll need to copy the URL to the address bar: http://guildportal.com/UI/GpCss.ashx?stylesheet=Guild######_###.css)
  • Now search the CSS (Ctrl-F or Find) for ".straightbarwrapper" and find the "background: url(...)" (it's messy so it may be hard to find), it should look something like this:
    
    background: url('http://www.axiomfiles.com/Images/Dynamic/4C4E40_696B5E_v_20_ovl_hi.png');
  
  
  • Copy this URL and paste it into the CSS above (inside the url() in green)
    
    .straightBarWrapperInnerTable { margin: 0 auto;  background: transparent url(http://www.axiomfiles.com/Images/Dynamic/4C4E40_696B5E_v_20_ovl_hi.png); }
  
  
  • Now you should have your tab bar centered and contain the proper background image

---

Alternative Solution:

If you are having trouble with finding the background image in the CSS, you can use this script in place of the CSS above. It essentially does the same thing. Add this script to your Footer Area (Control Panel > Custom HTML & Script > Footer Area)

<script type="text/javascript">
$(document).ready(function(){
 var tabwidth = 100;
 // Don't change anything below
 // ***********************
 $('.straightBarWrapperInnerTable').css({'background-image' : $('.straightBarWrapper').css('background-image'), margin: '0 auto' });
 $('.straightBarWrapper, .straightBarSpacer').css('background-image','url()');
 $('.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab').css('width',tabwidth);
})
</script>

Note that the tab width doesn't include the 8 pixels of padding on either side of the tab button. So setting the size to 100 pixels will show a button around 116 pixels wide. So adjust the size as appropriate.

Edited 3/21/2011: Included "straightBarSpacer" to prevent the mismatch of tab coloring.
Edited 3/22/2011: DOH, ignore that! Added "BACKGROUND IMAGE URL" where it should be replaced.

Centering the New Tab Bar v.2

Before
After

CSS

If you aren't using full custom css, then add the following to the CSS Additions tab ( Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard tab):

.straightBarWrapperInnerTable { margin: 0 auto; width: 100%; }
.straightBarWrapperInnerTable a { font-size: 22px; }
.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab { width: 20%; }

Customizing

• The first line stretches the tab table all the way across the page. there is nothing to change.
• The second line sets the font size, you can also include font-family or you can mess around with the new CSS3 @font (I'm not sure if it works with IE).
• The last line stretches each tab, but you'll have to be adjust it:
  • Now, if you have 5 tabs on your site, set the width of the tabs to 20% (as above). But if you have more or less pages, you'll have to adjust this percentage. Basically this math formula:
    

    100 / number of tabs

    So with 5 tabs, it's 100/5 = 20%.
    
    
  • Here is some javascript that does this for you automatically if you wish. So you won't need the last line of CSS. Add the following to your banner OR footer area (Control Panel > Custom HTML & Script > Banner or Footer Area) and remove the middle CSS line above ( it gets overridden anyway ).

<script type="text/javascript">
$(document).ready(function(){
 var t = $('.straightBarWrapperInnerTable').find('td').length;
 $('.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab').css('width', 100/t + '%');
})
</script>

Hi Aggrehstix!

It looks like you are missing the CSS, just add this to your CSS Additions to Standard tab (Control Panel > Custom HTML & Scripts > Custom CSS > CSS Additions to Standard tab)

.straightBarWrapperInnerTable { width: 100%; }

There's a new option in the control panel as well, in the Nav Bar Builder, towards the bottom.  It lets you set the alignment, and will keep the wrapper background image across the full width.