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

  2. 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;
    }

  3. 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;
    }

  4. avatar rirri says:

    anubody know how to trun on multirow tabbar in ff4?

  5. 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. [...] nun aber zum Code (via), den ihr einfügen müsst. Dieser sieht wie folgt [...]

  2. [...] Top’ enabled for this to take effect. This is the modified (and working) version of the tip shown here. var fbShare = {url: [...]

  3. [...] Thinning Down FireFox 4′s Tab Bar [Gdgtry] Tagged:browserscustomisationfirefoxtweakswindows [...]

  4. [...] Una vez que encuentren la carpeta, hacen una copia del UserChrome-example.css y lo renombran a UserChrome.css, abren el archivo en su editor de texto favorito (personalmente me gusta Programmer’s Note para este tipo de cosas), y agregar las siguientes lineas despues la linea de @namespace (fuente original: Gdgtry) [...]

  5. [...] button looks by making a UserChrome.css file. That wasn’t enough for some people, and so this guide came along that moves the tab one step up, like Chrome does.  A Lifehacker reader has uploaded his UserChrome.css for lazy people like me, and so I uploaded [...]

  6. [...] with. In order to put the Menu Button next to the Address Bar you need to apply this tweak. Gdgtry Attached Thumbnails   Stuey Reply With Quote + Reply to [...]

  7. [...] Hope you found this as useful as I did. Thanks to Gdgtry for the original code! [...]

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