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! > Centering the New Tab Bar
Mottie (MVP) 1/11/2010 7:00 PM EST : Centering the New Tab Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

Guppy Queen (New Admin) 1/12/2010 2:44 PM EST : RE: Centering the New Tab Bar
Guppy Queen
Posts: 41034
Zomgawsh Poster

Neat feature Mottie
TopBottom

Mottie (MVP) 3/9/2010 10:18 AM EST : RE: Centering the New Tab Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

Aggrehstix (New Admin) 4/1/2010 10:10 PM EST : RE: Centering the New Tab Bar
Aggrehstix
Posts: 182
Posts With Wolves

I did the scripting in the footer and banner section of control panel however this doesnt seem to apply for the public protions of my site.  my site is www.latecrew.guildportal.com

My nav bars do not split evenly across the section when under a public viewing access.  They go to the left as the default is.

I want to have them centered and evenly divided across the page.

Like I said your code of:

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


In the header and footer worked except when I go to the site as a public user.


Please help me.
TopBottom

Mottie (MVP) 4/1/2010 11:16 PM EST : RE: Centering the New Tab Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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%; }
TopBottom

Aggrehstix (New Admin) 4/2/2010 11:23 AM EST : RE: Centering the New Tab Bar
Aggrehstix
Posts: 182
Posts With Wolves

You are AMAZING!

Thank you sooo much for your help that worked.
TopBottom

Aaron Lewis (Blue Collar) 4/2/2010 6:30 PM EST : RE: Centering the New Tab Bar
GuildPortal Dev
Aaron Lewis
Posts: 1979
Zomgawsh Poster

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.
Aaron Lewis, GuildPortal.com
TopBottom

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