Remove Firefox 4.0's big, ugly, unmovable orange button

Yup, you're not alone: that orange button in the top left corner of Firefox 4.0 just won't move.
Fortunately, with the help of a Neowin forum thread and a little hacking, I am now the proud owner of a see-through Firefox button that's in-line with my tabs! If you'd also like to move that orange button -- or simply change its color! -- follow these easy steps:
- Locate your Profile directory -- click Help > Troubleshooting Information and then Open Containing Folder
- Now navigate to the Chrome directory
- Copy userChrome-example.css
- Rename your copy to userChrome.css
- Open userChrome.css your editor of choice and dump the following code in it:
#appmenu-button-container {position: fixed !important;}#appmenu-button {padding: 3px 18px 3px 18px !important;margin-top:3px !important;background-color: rgba(54, 121, 166, 0.2) !important;}#navigator-toolbox[tabsontop="true"] #TabsToolbar {padding-left: 95px !important;}#navigator-toolbox[tabsontop="true"] #TabsToolbar {padding-left: 105px !important;padding-top:1px !important;padding-right:98px !important;}
The second block (#appmenu-button) is the most important. You could easily change the color (54, 121, 166) or the opacity (0.2) -- simply change the values, save, and restart Firefox 4.0.
With some knowledge of CSS you could also move the button around (padding and margin), but I'll investigate more tomorrow. In the mean time, enjoy your less intrusive Firefox 4.0 menu!
(Incidentally, if you missed the previous post, Firefox 4.0 beta 1 is now available for download!)














Comments
54
Subscribe to commentsKualaBeeJul 6th 2010 7:59PM
How did you put the tab into the title bar?
jsmorleyJul 6th 2010 8:59PM
This is a good tip, and a good first cut at it, but has some issues. If you use your code, when you hit alt to show the menu bar items the first two or three are hidden behind the "Firefox" button and can't be accessed. You have to right click and turn on the "Menu Bar" which removes the button.
If you change it to "Tabs on Bottom", your code just blows up the interface. ;-)
Sebastian AnthonyJul 6th 2010 9:02PM
Yar, as the guy says (the one that wrote the code -- it wasn't me), Tabs Below simply doesn't work.
I spotted the Alt-Menu issue, but... it's hardly an issue. I usually hit Alt because I want to get to the menu... not continue playing with my tabs.
jsmorleyJul 6th 2010 9:14PM
It's early days. I'm sure there will be code soon to move the "Menu Bar" 30 pixels to the right or whatever is needed.
Sebastian AnthonyJul 7th 2010 6:48AM
Yeah, you'd think so -- but it hasn't been movable for quite a few builds now...
It might be forced there for a reason. I guess we'll find out!
GaryJul 7th 2010 5:38PM
Add this to your userChrome.css to move the menu bar along.
#main-menubar{
margin-left: 108px !important;
}
TylerJul 8th 2010 12:16AM
You could add the code (like i did) that Gary said or u could just hit alt use the arrow keys to move it and then hit enter (like the code better though)
SmurfierAug 14th 2010 1:19PM
You can move the file menu by adding:
#file-menu {
margin-left: 95px !important;
}
The remaining menu's fill follow suit.
mfleigleJul 6th 2010 9:28PM
I just clicked the button - customize - menu bar. And the button is gone
skyblazeJul 6th 2010 9:38PM
...or you could downgrade to XP
(installed it on my XP mode VM... it's not there :P)
Praveen PremchandranJul 6th 2010 9:42PM
I highly suggest replacing the Big Ugle OranJe button with a big awesome-looking firefox button kinda like MS Office 2010...
What say?
Slashee the CowJul 6th 2010 10:20PM
I'd much prefer the Big UglY OranGe button - what's ugly in Office is ugly elsewhere, but the orange button is less ugly. That and the fewer people that think Microsoft know how to design a UI, the better.
kojo87Jul 7th 2010 1:13AM
what i find strange is that Windows 7, in general has a fantastic UI, but their other software like Office 2007/2010 and Internet Explorer are pretty lame. i expected Office 2010 to be a drastic change from 2007 but it really wasn't.
cookiebitsJul 6th 2010 11:30PM
I rather like the Firefox button. It's great for small resolution screens like on my netbook, and I wouldn't really call it ugly either.
Sebastian AnthonyJul 7th 2010 6:47AM
True! But they could easily put it in the top right corner instead, so it's still easy to see and get to, without sacrificing about 5% of your vertical resolution (which is a big deal on a netbook!)
WilcoJul 7th 2010 1:33AM
Is it just me or is the code in the article above redundant?
Specifically,
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 95px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 105px !important;
....
seems redundant. I don't think you need the first bit.
Also, for anyone who's interested, you can change what the button says instead of "Firefox". Just use:
#appmenu-button .button-text { display:none !important; } /*removes "Firefox"*/
#appmenu-button dropmarker:before { content: "asdf " !important; } /*Inserts new text*/
Sebastian AnthonyJul 7th 2010 6:46AM
Yep, it does look a bit redundant. The original code (if you follow the link), looks a bit different. I collapsed two blocks into one, but I'm no Firefox UI guru so I just left the other two as-is.
jery.giderJul 7th 2010 2:52AM
Wondering only why they didn't call it Stacks, given the existence of the name and the obvious similarities, plus disappointed that the name Folders wasn't reserved for some future Finder-style filesystem browser.
Daniel CassidyJul 7th 2010 9:31AM
Feedback > Firefox Made Me Sad Because... > Hideously ugly orange Firefox button.
Sebastian AnthonyJul 7th 2010 9:37AM
I think by now they're well aware that the orange button needs to be movable!
I hope they let you change the colour too. Pink would be awesome.