Firefox 4 (beta) release came out with a brand new UI layout. Whether you like it or not, there's something you've got to deal with : the blank space at the top of the tabs, next to the orange "Firefox" (application menu) button.
There's a quite simple way to get rid of this wasted blank space (and by the way, optimize the viewport).
Indeed, fixing the position (thanks to Chrome custom CSS) of the appmenu and setting a small value for tabs top margin will solve our problem.
First you'll have to locate your Firefox chrome folder.
On Windows :
C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\randomChars.default\chrome
Then, create a new file that you name "userChrome.css" in which you add this piece of code :
#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 10px !important;
margin-top: -1px !important;
margin-left: 1px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 80px !important;
padding-top: 3px !important;
padding-right: 110px !important;
}
Save the file. Restart Firefox and that's it.
Edit (2010/07/23 - 00:37 AM CEST) : of course, since you can use CSS on this element, you can give it the style you want, add picture and/or replace the text.
And here comes the CSS,
#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 10px !important;
margin-top: -1px !important;
margin-left: 1px !important;
background: url('http://omicronlab.net/upic/4c48c3d1-f83.png') #e4780e no-repeat -5px -5px !important;
border: 2px solid !important;
border-top: none !important;
-moz-border-radius: 0 0 4px 4px !important;
-moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.40) inset !important;
}
#appmenu-button:-moz-window-inactive {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.35) inset !important;
background-color: transparent !important;
}
#appmenu-button:hover:not(:active):not([open]),
#appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 2px 1px rgba(250,234,169,.7) inset, 0 -1px 0 rgba(250,234,169,.5) inset !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 80px !important;
padding-top: 3px !important;
padding-right: 110px !important;
}
#appmenu-button .button-text {
display: none !important;
}
#appmenu-button dropmarker:before {
content: "MFx " !important;
}
Edit (2010/09/09 - 07:25 PM CEST) : updated version of the previous code. Now it works on Mozilla Firefox 4 beta 5
#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 10px !important;
margin-top: -1px !important;
margin-left: 1px !important;
background: url('http://omicronlab.net/upic/4c48c3d1-f83.png') #e4780e no-repeat -5px -5px !important;
border: 2px solid !important;
border-top: none !important;
-moz-border-radius: 0 0 4px 4px !important;
-moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.40) inset !important;
}
#appmenu-button:-moz-window-inactive {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.35) inset !important;
background-color: transparent !important;
}
#appmenu-button:hover:not(:active):not([open]),
#appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 2px 1px rgba(250,234,169,.7) inset, 0 -1px 0 rgba(250,234,169,.5) inset !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding: 3px 110px 0 80px !important;
margin-top: -29px;
}
#main-window[sizemode=maximized] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
margin-top: -24px;
}
#appmenu-button .button-text {
display: none !important;
}
#appmenu-button dropmarker:before {
content: "MFx " !important;
}
Edit (2010/09/21 - 02:12 AM CEST) : updated version of the previous code. Since the Orange button margin top layout bug has been fixed, the -1px margin hack is no more needed (this value is now set to 0). Mozilla Firefox 4 beta 8
#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 10px !important;
margin-top: 0 !important;
margin-left: 1px !important;
background: url('http://omicronlab.net/upic/4c48c3d1-f83.png') #e4780e no-repeat -5px -5px !important;
border: 2px solid !important;
border-top: none !important;
-moz-border-radius: 0 0 4px 4px !important;
-moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.40) inset !important;
}
#appmenu-button:-moz-window-inactive {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.35) inset !important;
background-color: transparent !important;
}
#appmenu-button:hover:not(:active):not([open]),
#appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 2px 1px rgba(250,234,169,.7) inset, 0 -1px 0 rgba(250,234,169,.5) inset !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding: 3px 110px 0 80px !important;
margin-top: -29px;
}
#main-window[sizemode=maximized] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
margin-top: -24px;
}
#appmenu-button .button-text {
display: none !important;
}
#appmenu-button dropmarker:before {
content: "MFx " !important;
}
