How to: Remove Firefox 4 title bar and modify addon-bar’s background color [NEW]

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.

Subscribe to TechExplorer, today! You must follow us on Twitter

Advertise here

Janak

Downloaded 4.0b11. I cannot find this feature in edit/preferences or anywhere. Can someome please tell where it is?

share flag

spam
offensive
disagree
off topic

Jal Desai

You won't need this feature if you have Beta 11. It has been made default from Beta 9 onwards.

Chris

4.0b10 here and sadly it still shows the full title bar on my mac :(

Jal

This method wont work for Beta 9 and upwards because Mozilla made changes to include the same feature by default.

Ben

Are those features available on the Mac version? I've looked and I can't find it.

Betas for Mac are built in a different way. This tut won't work for them unfortunately.

It's not showing up by default in either Firefox 4 beta 10 or Minefield. Is there an option somewhere?

Any chance someone might know how to do this on OS X? The title bar just covers up the tabs when I try!

You can try downloading the latest beta. They already must have implemented it.

Graham

Wow. brilliante man

mark

I tried this on Ubuntu Linux and I couldn't see the tops of my tabs anymore. How about a GTK Linux friendly version.

As far as I know, Ubuntu uses a different version of Firefox specially made for linux. Are you sure you are using Firefox 4 Beta? Even in that case, if you are using the latest Beta 9, you will see this problem because Mozilla has already implemented this feature. Use this for Beta versions uptil version 8.

te Kairangi

As of FF4b9 - these changes are part of the standard build. Yay!!

Thanks John.. will try your modifications.

John

My apologies for the xp menu it needs to be.
#toolbar-menubar {
margin: -21px 72px 0 20px !important;
}

My above changes were in windows 7 I expect they should work fine for vista but for XP Use the following.

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

#appmenu-button{
padding: 2px 3px 2px 3px !important;
height: 18px !important;
margin-left: -55px !important;
}

#toolbar-menubar {
margin: -20px 0 0 20px !important;
}

.tabbrowser-tab {
margin: -2px 0 -4px 0 !important;
padding: 0 !important;
}

I made what I consider a great modification to reduce the orange Firefox Menu button to only the arrow
and shrink the tabs just a little bit more height wise.
See changes below.

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

#appmenu-button{
padding: 2px 3px 2px 3px !important;
height: 18px !important;
margin-left: -60px !important;
}

Keos

I have the same problem Jal (with all the different usercrhome hacks I found).
That button and the tab navigation buttons that appear when you have allot of tabs opened work only if clicked in the bottom region.

Yes, I am aware of the issue but I have noticed that if you restart Firefox, the problem disappears. I am looking for some permanent solution. As soon as I will find it, I will update the userChrome.css

callezee

Thats really a good tip

Hardik

this is very nteresting...interesting to note that we can remove title bar.

Oh.. how come! It works perfectly well for me. Yes, I faced a similar problem with the "Group Tabs" icon when I placed it beside the minimize button and that's why I thought of dragging it alongside URL bar instead. But the "Add Tab" button is having no problems.

Dripple

Hi,

Neat update. However, the "Add tab" button is buggy for me : the part that overlaps title bar is not active.

How to: Remove title bar and trim down Firefox 4 even more | TechExplorer says:

January 4, 2011 at 5:23 am

[...] by Jal on July 8, 2010 Important: This is an old post. If you are using Firefox 4 Beta 7+, head over to a newer post with IMPROVED solution. [...]

Tweets that mention How to: Remove Firefox 4 title bar and modify addon-bar’s background color [NEW] | TechExplorer -- Topsy.com says:

January 4, 2011 at 6:07 am

[...] This post was mentioned on Twitter by 2oolbox. 2oolbox said: RT @TechExplorerIn: How to: Remove Firefox 4 title bar and modify addon-bar’s background color [NEW] http://su.pr/26G5zX [...]

Google Chrome 10 and Firefox 4 RC1 released simultaneously says:

March 9, 2011 at 3:35 pm

[...] How to: Remove Firefox 4 title bar and modify addon-bar’s background color [...]