Facebook Plunges Again
Tumblr 101: Tips And Tricks To Get Started
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 commentsDaniel CassidyJul 7th 2010 11:25AM
I don’t think it needs to be made movable. I think it just needs to be redesigned. Don’t fall into the trap of asking for an option when it would be better to improve the default behaviour.
Sebastian AnthonyJul 7th 2010 6:16PM
As I said in an above comment, unless it HAS to be visible for some reason (perhaps it's required for apps/extensions that use Firefox as a platform), it should simply be configurable in the standard 'customize' dialogue. I'm not sure why it's missing from there...
Bryan PriceJul 7th 2010 10:49AM
OK, I've been running the daily Minefield as a portable for awhile. I reset my modifications to the default, and I still don't see the orange button.
Of course, it wouldn't be the first time that a released beta had stuff (showing) that the daily's didn't have.
Bryan PriceJul 7th 2010 10:50AM
OK, I see. Turn off the menu, and you get the Firefox button. Duh!
big boyJul 7th 2010 11:19AM
how to get the tab bar next to the orange button as in the picture shown in this article. as i see, the tab bar is on top of address bar but below the orange button..
So how do i make the tab bar on-top and next to the orange button?
thanks
TravisJul 15th 2010 11:12PM
just download his, and the button is beside the tabs.
CarbonizeJul 7th 2010 12:39PM
If you want more horizontal space for the tabs just change
padding: 3px 18px 3px 18px !important;
to
padding: 3px !important;
and then change
padding-left: 105px !important;
to
padding-left: 75px !important;
DreamerJul 7th 2010 1:26PM
Anyone knows css value for List all tabs button? With menu button moved down it's placed right under the Minimize windows button.
Sebastian AnthonyJul 7th 2010 6:20PM
If you Google for 'edit firefox userchrome.css' you might get something.
I was looking for more info when I wrote this article, but didn't find a lot. Am sure there are forum posts dedicated to it though.
JordanJul 7th 2010 2:18PM
Now if only someone could figure out the code to move the Bookmarks button. I can't believe it can't be moved to the other side of the navigation bar!
fwaitsJul 8th 2010 5:41PM
Actually you can, indirectly. When you edit the toolbar, drag the other elements you want to the right of the bookmarks button and they will move. You just can't move the bookmarks button itself. It's still early beta, so lots of UI tweaking will be happening I'm sure. =)
halophoenixJul 7th 2010 2:25PM
Now this is a tip worth reading. Very nice!
...now if only I could make it another color...
Sebastian AnthonyJul 7th 2010 6:17PM
It's just three values! RGB!
Pump 'RGB color picker' into Google, am sure it'll give you something.
NoxSep 8th 2010 11:44AM
You can also use hsl(hue, saturation%, lightness%), where hue is between 0-360.
Additionally you can also use rgba or hsla to get an alpha channel.
If neither RGB or HSL is something for you, you can also use a set of keyworded colors. Google for more information about that.
@Sebastian Anthony
I'd guess he's on Windows so he could just open up MS Paint and use the color picker there.
seth4uJul 7th 2010 3:15PM
To get that Chrome look alike feel you need to disable the menubar, which severely cripples your ability to tinker with the FF options.
You have to re-enable the menubar to have access to all the options.
And here I was happy I could finally get the same look as in Chrome, which IMHO is superbly done.
TylerJul 8th 2010 12:16AM
here is an update of the code with all of the comments included button has been renamed to collapsed Menu and has been re-sized to fit looks very good here. /*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* Stolen from: http://www.neowin.net/forum/topic/896934-meet-firefox-40/page__st__495__p__592819444&#entry592819444
* Cleaned up a little bit by mrseb
*/
#appmenu-button-container{
position: fixed !important;
}
#appmenu-button{
padding: 3px 3px !important;
margin-top:3px !important;
background-color: rgba(54, 121, 166, 0.2) !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 108px !important;
padding-top:1px !important;
padding-right:98px !important;
}
#main-menubar{
margin-left: 120px !important;
}
#appmenu-button .button-text { display:none !important; } /*removes "Firefox"*/
#appmenu-button dropmarker:before { content: "Collapsed Menu" !important; } /*Inserts new text*/
/*
* Some possible accessibility enhancements:
*/
/*
* Make all the default font sizes 20 pt:
*
* * {
* font-size: 20pt !important
* }
*/
/*
* Make menu items in particular 15 pt instead of the default size:
*
* menupopup > * {
* font-size: 15pt !important
* }
*/
/*
* Give the Location (URL) Bar a fixed-width font
*
* #urlbar {
* font-family: monospace !important;
* }
*/
/*
* For more examples see http://www.mozilla.org/unix/customizing.html
*/
TylerJul 9th 2010 12:28PM
Here is updated code with credit
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* Stolen from: http://www.neowin.net/forum/topic/896934-meet-firefox-40/page__st__495__p__592819444&#entry592819444
* Cleaned up a little bit by mrseb
*/
#appmenu-button-container{
position: fixed !important;
}
#appmenu-button{
padding: 3px 3px !important;
margin-top:3px !important;
background-color: rgba(54, 121, 166, 0.2) !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 108px !important;
padding-top:1px !important;
padding-right:98px !important;
}
#main-menubar{
margin-left: 120px !important;
}
#appmenu-button .button-text { display:none !important; } /*removes "Firefox"*/
#appmenu-button dropmarker:before { content: "Collapsed Menu" !important; } /*Inserts new text*/
/*
* Some possible accessibility enhancements:
*/
/*
* Make all the default font sizes 20 pt:
*
* * {
* font-size: 20pt !important
* }
*/
/*
* Make menu items in particular 15 pt instead of the default size:
*
* menupopup > * {
* font-size: 15pt !important
* }
*/
/*
* Give the Location (URL) Bar a fixed-width font
*
* #urlbar {
* font-family: monospace !important;
* }
*/
/*
* For more examples see http://www.mozilla.org/unix/customizing.html
*/
TylerJul 8th 2010 12:23AM
dont use previous code it gets rid of exit min/max and hide bar option
Will try to fix in morning
TylerJul 9th 2010 12:26PM
There was no problem with the code it was another addon i was using so u can now use the code ^
Achal DaveJul 8th 2010 2:16PM
I don't know how to code, but whoever does, can you figure out a way to put the fox on the button? Or any other image?