How to make Firefox 4 (Beta 1) tabs look like Chrome or Opera 10

Posted: July 9, 2010 in Internet, Software

Copied (just for personal archive) from : http://gdgtry.com/2010/07/thinning-down-firefox-4s-tab-bar/

—————————————————————————————————————

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;
margin-right: 105px !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).

———————————————————————————–

Expertester: Many thanks to the original author. I tried and tested his method and it works wonder. I prefer FF4 to have this kind of layout rather than what they are currently offering. Doesn’t matter if it looks Chrome or Opera as long as it doesn’t waste vertical screen estate.

Please note that, the userChrome.css not necessarily at the mention location. I myself, have to create a new file (actually I copy the provided userChrome-example.css) and put the code mentions above.

The screenshot below shows both Chrome 5 and Firefox 4 (beta1) which I put side by side. Feel free to click and take a peek🙂

Take a peek

Comments
  1. ugerwadi says:

    I have tried this tweak on FF4 Beta7. But it is not working. Can you please update it. I want to apply this layout to my FF4 beta7.

  2. bulkowski says:

    I tested it in Firefox 4.0 official release
    But it is not working.

  3. Jason says:

    So now the official release fixes your complaint. But I’d be curious how to edit it to go back just belw the Firefox button? I use that extra space on the top for other tools, and now the tabs lay on top of those. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s