Important: If you are using Firefox 4 Beta 9+, don’t follow this tutorial because you already have this feature built-in. The smart guys at Mozilla have used our method to permanently include this feature into Firefox 4 Beta 9+ ;).

This is the latest solution to the original hack to remove Firefox 4′s title bar. The problem with the original hack was that it was having some problems with beta version 7 and upwards. Also, the addon-bar has been introduced in Beta 7 which is not so pleasant looking. So I modified the original userChrome.css to include the fixes.

Here’s what Firefox 4 Beta 7+ looks like after using the new and improved userChrome.css:

Features and fixes:

• Neat relocation of tab-bar and removal of title bar.
• Engraved effect on inactive tab labels. (This effect was present in initial betas but was removed in the latest one. I liked it so I added it back ;)
• In the original hack, the tabs would overlap window controls in FF4B7+. In this new userChrome.css, I’ve fixed the problem.
• The menu bar is moved to the top. It can be viewed by pressing ‘Alt’ as usual.
• The addon bar’s background is made ‘light-blue’ to complement with the overall theme.

How to:

1) First, right-click beside the URL bar (Address bar) and click ‘Customize…‘. Now drag the ‘Group Tabs’ icon to beside the URL bar.

2) Now download this userChrome.css file (Right click > Save Link As…).

3) Place the file into this folder:

[Windows Vista/7] C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome

[Windows XP] C:\Documents and Settings\<user>\Application Data\Mozilla\Firefox\Profiles\<profile>\chrome\

4) Restart Firefox 4.

Do note that, you need to have ‘Tabs on Top’ enabled for this to take effect. If you find any problems, do mention it in the comments. If you like this post, please share it.