Thinning Down FireFox 4's Tab Bar

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

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

If you've read my rant on window layout in a widescreen world you'd know that I dislike wasted vertical space in my window layouts.

FireFox 4 beta has just been released and they haven't solved my pet issue... that silly title bar. Just look at the wasted screen real estate:

FireFox 4's Tab Layout

However, thanks to FireFox's flexibility, the addition of a few lines to one file can solve the problem! Simply adding the following below the @namespace line:

#appmenu-button-container{
position: fixed !important;
}

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

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

To your userChrome.css file, and you now get this wonderful layout:

FireFox 4 with a better tab layout

Hooray!

The userChrome.css file is located in the following locations:

XP: C:\Documents and Settings\<user>\Application Data\Mozilla\Firefox\Profiles\<profile>\chrome\
Vista\7: C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\

A note: This "fix" will look bad if you have FireFox set to not display that tab bar when you only have a single tab open. Just set FF to always show that tab bar to resolve the issue (FireFox Button > Options > Tabs > Always display tab bar).

EDIT: I changed a line in the navigation toolbox from margin-right to padding right. Using padding right gives a better look.

  1. avatar Joe says:

    Does this work for any screen resolution? Isn't working on my Vista SP2 laptop...title bar is still there. Using Firefox 4.0 b4

  2. avatar jp says:

    Looks like Beta 5 busted this, back to 2 bars even with the css tweak. Anyone have a fix?

  3. avatar zerone says:

    Looks like Firefox 4 Beta 5 breaks this tweak. Any ideas on how to get it to work in Beta 5?

  4. avatar dsid says:

    It doesnt work on b5
    any solutions?

  5. avatar kenny says:

    firefox 4b5 update seems to break the original fix in this article. any ideas?

  6. avatar Sir Unimaginative says:

    I don't know if it's just me, but as of Beta 5 this no longer works. It pushes the tabs out from under the Firefox button, but leaves them on their own line instead of placing them on the title bar.

  7. avatar max says:

    hey, i use ff4.0b6 .... i always wanted this feature and couldn't manage to manipulate my userchrome.css file correctly. my codes never changed anything in my ff, dunno, maybe i was opening the wrong css.... no idea....

    wo well doing the following really makes life easier:

    install the add-on "stylish", go to http://userstyles.org/styles/36432 , press install, be happy!

  8. avatar Furutomo says:

    #appmenu-button-container{position: fixed !important;}
    #navigator-toolbox[tabsontop="true"]
    #TabsToolbar{padding-left: 80px !important;padding-right: 110px !important;margin-top: -20px !important;}
    #appmenu-button{padding: 3px 5px 3px 5px !important;height: 20px !important;}

    firefox4.0b6 OK.

  9. avatar Trevor says:

    I used the following code and now I have the same viewing area as google chrome (I also turned off the status bar to do so).

    #appmenu-button-container {
    width: 92px;
    position: fixed !important;
    }
    #appmenu-button {
    padding: 4px 4px 4px 4px !important;
    margin-top:0px !important;
    background-color: rgba(200, 200, 200, 0.4) !important;
    }
    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    padding-left: 93px !important;
    padding-right: 102px !important;
    padding-top: 0px !important;
    margin-top: -30px !important;
    }

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

  10. avatar Vamsi says:

    Adjusting width and height worked for my computer. otherwise min,max close button were not visible.
    #appmenu-button-container{
    position: fixed !important;
    }

    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    padding: 2px 0 0 0px !important;
    margin: -25px 70px 0 70px !important;
    }

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

  11. avatar rirri says:

    anubody know how to trun on multirow tabbar in ff4?

  12. avatar Hinterwaeldler says:

    This is my version:

    #appmenu-button {
    background-color: rgba(54, 121, 166, 0.2) !important;
    }

    #appmenu-button .button-text { display:none !important; } /*removes "Firefox"*/
    #appmenu-button dropmarker:before { content: "FireFox Menu" !important; } /*Inserts new text*/

    #appmenu-button-container{
    position: fixed !important;
    }

    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    padding-left: 112px !important;
    padding-right: 110px !important;
    padding-top: 4px !important;
    margin-top: -20px !important;
    }

    #appmenu-button{
    padding: 4px 6px 20px 6px !important;
    height: 20px !important;
    }

  1. [...] 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 [...]

Leave a Reply