Firefox 4 (beta) : how to move the orange button

noreply@blogger.com (alct) — Thu, 22 Jul 2010 10:30:00 +0000

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;
}

Social Engineering

noreply@blogger.com (alct) — Tue, 22 Sep 2009 16:39:00 +0000

Reportage ARTE - Les YES Men refont le monde

Astuce (new website post)

noreply@blogger.com (alct) — Thu, 17 Sep 2009 23:01:00 +0000

Miniatures des fichiers Photoshop (.psd) sous Windows

Ménage et mise en forme Blogger

noreply@blogger.com (alct) — Thu, 10 Sep 2009 16:20:00 +0000

Les modèles d'habillage proposés par Blogger ~~étant plus laids les uns que les autres~~ ne comblant pas mes attentes, j'ai personnalisé le thème de base (minima) pour le rendre réellement simple.

La barre de navigation dédiée (en haut de page) et le watermark Google (sous le formulaire de recherche) ont été retirés grâce à une astuce CSS :

#navbar-iframe {
display: none !important;
}
.gsc-branding {
display: none !important;
}

/* Variable definitions

J'utiliserai ce blog majoritairement en remplacement à TinyPaste afin de palier au peu de nombre de caractères autorisés dans Twitter.

Hello world

noreply@blogger.com (alct) — Thu, 10 Sep 2009 11:32:00 +0000

Enjoy your stay !

alct+

Firefox 4 (beta) : how to move the orange button

Social Engineering

Astuce (new website post)

Ménage et mise en forme Blogger

Hello world