Thinning Down FireFox 4's Tab Bar - Update!

This post is now outdated, please see the update available here:

http://gdgtry.com/2011/01/thinning-down-firefox-4s-tab-bar-2/

My previous post about modifying FireFox 4's tab bar layout has been one of the more popular posts on my blog. After updating to FF4 Beta 6 the modification broke, but I've found a solution:

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 80px !important;
padding-right: 102px !important;
padding-top: 2px !important;
margin-top: -25px !important;
}

#appmenu-button{
padding: 3px 5px 3px 5px !important;
height: 20px !important;
}

As you can see, the only change is we tell the tab bar to move up 25 pixels from where it was. We also ditch the tab position as fixed as it's not really necessary.

FireFox 4 with a better tab layout

This gets us back to our old style. I haven't had time to test all the edge cases to see if it messes anything up, but it should get your normal browsing bar back to an acceptable size.

  1. avatar max says:

    which part of the @namespace line do i actually need?

    this is how my userChrome.css file looks like, and no changes apply @all...

    */
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

    /*
    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    padding-left: 80px !important;
    padding-right: 102px !important;
    padding-top: 2px !important;
    margin-top: -25px !important;
    }

    #appmenu-button{
    padding: 3px 5px 3px 5px !important;
    height: 20px !important;
    }

    thx in advance for ur help

  2. avatar Matt says:

    Max, if you emptied the whole css file out, then simply added this line:

    @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

    Then inserted the lines listed above, you'd be set. What you posted above has a hanging comment marker which would block the css from being applied. Comment marks work like so:

    /* comment goes here */

    Anything after an opening /* and before a closing */ will not be applied.

  3. avatar gagarine says:

    bouh.... doesn't work on mac 🙁

  4. avatar Timsen says:

    Plz, i need some help with this.
    It just doesent want to work.
    I seems like firefox ignores a created userChrome.css

    should i write something else in that file?
    I have FireFox 4 b7; Win7

  5. avatar TuxRug says:

    This looks great, however in beta 8 it breaks the tab bar in full-screen mode, only about half the Firefox app button works, and the tab grouping button only responds if you hit the very bottom edge of it.

  6. avatar Mike says:

    I'm looking to find out where to find out how this stuff works, would you be able to point me in the right direction for a tutorial or a list of functions or something as a Google search is giving very little. I'm understanding how the tabs toolbar is set but the app menu button is making less sense. I'm trying to get this to work with beta 8.

  7. avatar LightAce says:

    The problem I'm having with this is that the new tab button doesnt work

  8. avatar Ajarila says:

    Great modification! One problem though... the "new tab" -button next to the tabs isn't working. Any fix for this?

  9. avatar tappet says:

    Doesn't seem to work with current RC on Windows 7. Maybe I'm doing something wrong? My userChrome.css follows:

    @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    padding-left: 80px !important;
    padding-right: 102px !important;
    padding-top: 2px !important;
    margin-top: -25px !important;
    }

    #appmenu-button{
    padding: 3px 5px 3px 5px !important;
    height: 20px !important;
    }

    #toolbar-menubar{
    padding-left: 80px !important;
    }

  1. [...] Gdgtry » Blog Archive » Thinning Down FireFox 4′s Tab Bar – Update! - Techno... says: September 16, 2010 at 9:33 am [...]

  2. [...] can’t take credit for this.  It’s actually a slightly tweaked look taken from this guy’s site. I salute you [...]

Leave a Reply