Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tabs > Centering Navigation Bar
Innocents2 (Member) 1/11/2010 2:35 PM EST : Navigation bar help

Innocents2
Posts: 2

0
Like

0
Dislike

I was just looking for some help setting up the navigation bar on my site.

right now it has each nav burtton beside each other to the left, i was wondering how i set it up so they are evenly spaced across the bar, or center them but keep the backgroud the same for the whole thing

on mottie's site the nav bar buttons are center but the background does not span the site

id like it to be the same but span the site

ne ideas or help please post

thanks
This topic was moved from forum General Discussion to forum Instructions by Mottie.

Characters: Innocents
TopBottom

Mottie (SuperAdmin) 1/11/2010 5:50 PM EST : RE: Navigation bar help
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Innocents2!

I guess I've forgotten to update my instructions on how to format the newer tab bar.


Centering the New Tab Bar

GuildPortal admin site link to original post

 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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Innocandy (Applicant) 1/13/2010 7:00 PM EST : RE: Navigation bar help

Innocandy
Posts: 461

0
Like

0
Dislike

thanks so much
TopBottom

Sealfon (Applicant) 3/4/2010 12:30 PM EST : RE: Navigation bar help
Sealfon
Posts: 2126

0
Like

0
Dislike

Sorry about resurrecting such an old post, but I tried following the steps above and my navigation tabs refuse to move L

 

For starters, here’s our website: http://www.guildportal.com/guild/338995

 

I enabled custom CSS for the progression widget, so I tried following the CSS instructions above (no style tags).  

 

This is what I ended up with:

 

.straightBarWrapper { background: url(); }

.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab { width: 100px; }

.straightBarWrapperInnerTable { margin: 0 auto;  background: transparent url(http://www.axiomfiles.com/Images/Dynamic/555555_555555_v_20_ovl_hi.png); }

 

Which I pulled from this portion of the source, by doing a ctrl-f ‘.straightbarwrapper’ (to get close), followed by ctrl-f ‘background’ (to find the link):

 

.straightBarWrapper { border-top: solid 1px #000; border-bottom: solid 1px #000; text-align: left; border-collapse: collapse; text-decoration: none; height: 40px;background: url('http://www.axiomfiles.com/Images/Dynamic/555555_555555_v_20_ovl_hi.png')

 

Now, I copied and pasted that into the footer area (Custom HTML & Script > Custom HTML > Footer area), and the menu didn’t change, but the copied text appeared at the bottom of the webpage in the footer area.

 

I then tried adding in the style tags.  No luck.  The menu still hadn’t moved, but at least the text was no longer displayed in the footer.

 

Third attempt, I tried using the Alternative Solution.  I copied and pasted directly from this thread into the footer area.  Again, no luck, but at least there was no text in the footer.

 

Any advice for this novice would be greatly appreciated.

TopBottom

Mottie (SuperAdmin) 3/4/2010 1:14 PM EST : RE: Navigation bar help
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Sealfon!

It looks like the CSS has centered your menu, but the sides are still there. When I looked in your footer area, I see there is an image inside the pageWrapper... it should look like this:
.straightBarWrapper { background: url(); }
so remove the image URL and it should look like the screen shot I took - if that is what you wanted.

Also, it appears that the tooltips for your progression box aren't working. Try adding this to your Footer Area as well:
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Sealfon (Applicant) 3/4/2010 2:36 PM EST : RE: Navigation bar help
Sealfon
Posts: 2126

0
Like

0
Dislike

Thanks for such a quick response (and the tip about the mouseover, I didn't even realize that was supposed to be a feature)!

As for the menu bar...I originally added the text as you typed it, I just noticed the extra url () and took a shot in the dark to try to fix it by adding in the link there too. I've reverted it back to what you suggested, still no luck

Ideally I would like it to be centered like the example provided above. It does seem to have changed the bar slightly, instead of light gray extending past the Mail tab the menu bar seems to end there now. I'm not sure why it hasn't centered (or why the sides have't been deleted?).

Any suggestions? And thanks again for the help...


(my site again for reference: http://www.guildportal.com/guild/338995)
TopBottom

Mottie (SuperAdmin) 3/4/2010 4:44 PM EST : RE: Navigation bar help
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Sealfon!

Ok I 'm really confused, I see your tabs centered with the edges cleared in Firefox, IE and Chrome. I took a screen shot:



Maybe I should ask, what are you wanting the tab bar (menu bar) to do?
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Sealfon (Applicant) 3/4/2010 4:54 PM EST : RE: Navigation bar help
Sealfon
Posts: 2126

0
Like

0
Dislike

You know, I just got home from work and it looks fine here too.  My work browser is out of date, that must have been causing the problem

I should be all set.  Thanks very much for your time and help, it's greatly appreciated!
TopBottom

Mottie (SuperAdmin) 3/9/2010 10:21 AM EST : RE: Navigation bar help
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Centering the New Tab Bar v.2

GuildPortal admin site link to original post

 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>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Tinkrbelle (Applicant) 9/7/2012 8:54 PM EST : RE: Navigation bar help

Tinkrbelle
Posts: 66

0
Like

0
Dislike

I was trying to use this to center the nav bar on my guild site. (http://methodguild.net in case ya forgot ) anyway.. the issue we're having is there's a blank space on the right side after the roster tab. This code for centering the nav bar works on the tabs if they were just the standard guild portal tabs/pages but mine are not please help!
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%