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

Friday, July 23, 2010

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;

}

Alternatively, download my userChrome.css file and copy it into the directory. Don't forget to rename it.

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!)