Thursday, July 22, 2010

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

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.

Picture uploaded with Upic Picture uploaded with Upic

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.

Picture uploaded with Upic Picture uploaded with Upic

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.

Picture uploaded with Upic Picture uploaded with Upic

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

18 comments:

  1. Waaah great, thanks! Firefox 4's working great but that orange button wasn't their best idea :s now that's better looking :)

    ReplyDelete
  2. Hey, thanks for the post. It is cool. I have FF4b6 and it gives me the extra space on my small netbook. But now I have space on the right. After the panorama icon. Any way to fix it? I know nothing about css.

    ReplyDelete
  3. Hello and thanks for your comments.

    @Anon2: could you take a screenshot and post it here ? That would help me to figure out how to fix your bug ;-)

    ReplyDelete
  4. Thanks for replying, I've uploaded them here
    http://picasaweb.google.com/esembefoty/ZdjeciaBloggera?authkey=Gv1sRgCL7z2oGO8a3Xcg&feat=directlink

    There is one without the file and with it. See the icons for
    List all tabs and
    Group all tabs
    move to the left.

    ReplyDelete
  5. Thank you for nice work, but the orange button is not working for me(beta8), so that I made this slight change and it works great! It seemed tab bar is overlapping the button.

    #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    padding: 3px 110px 0 5px !important;
    margin-top: -24px;
    margin-left: 75px;
    }

    ReplyDelete
  6. Even better. (same with other codes)

    #toolbar-menubar { margin: -25px 100px 3px 100px;}
    #navigator-toolbox[tabsontop="true"] #TabsToolbar { margin: 0 100px 0 75px;}

    ReplyDelete
  7. Hi and thanks for your answers/contribs.

    @Anon2: well, I have got to confess that I am unable to repeat the probleme you describe (MFx b8 on Win7). Does the Anon3 and Anon4's answer helped you ?

    @Anon3: when I try with your code, it creates wide white spaces arround the tabs.

    @Anon4: and when I try with your code, the tabs toolbar goes behind the url bar.

    @Anon2, @Anon3, @Anon4: Which Windows version do you use ?

    PS. Even if I do not want to make people having to set a nickname and a valid e-mail, leaving this kind of information helps to contact you back ;)

    ReplyDelete
  8. Hi, I'm the last 2 Anons(3,4), and I just found the setting might be different from the windows setting.

    For example, I use Windows 7 with zero windows border padding. This difference could break whole layout of menu. Thank you for replying, and the other people may just follow alct's work. Some people like me, may have to play with some margin values if you're familiar with CSS styles.

    Thanks!

    ReplyDelete
  9. Hey, I am the picture person. The other codes did not help. Win XP SP3 FF beta 6

    ReplyDelete
  10. so far the best one

    #appmenu-button-container {
    position: fixed !important;
    }
    #appmenu-button {
    padding: 3px 10px !important;
    margin-top: 0 !important;
    margin-left: 1px !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: 0px 110px 0 80px !important;
    margin-top: -29px;
    }
    #main-window[sizemode=maximized] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    margin-top: -24px;
    }

    ReplyDelete
  11. (Firefox 4 BETA 8)

    ~ try the below with collapsed menu bar ~

    #appmenu-button-container {
    width: 92px;
    position: fixed !important;
    }
    #appmenu-button {
    background: url('') no-repeat !important;
    padding: 4px 4px 4px 4px !important;
    margin-top:0px !important;
    background-color: rgba(200, 200, 200, 0.4) !important;
    }
    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    padding-left: 0px !important;
    padding-right: 102px !important;
    padding-top: 0px !important;
    margin-top: -20px !important;
    }

    #appmenu-button{
    padding: 3px 5px 3px 5px !important;
    height: 20px !important;
    }

    ReplyDelete
  12. Great post and thanks for the info. Looks like FF4b6 gives users extra space for browsing especially if you're using a netbook. This is a nice and cool feature from Firefox!

    ReplyDelete
  13. using ff4b9 [tabs are on top, natively!]
    1. save the pic [http://omicronlab.net/upic/4c48c3d1-f83.png] to the chrome folder as ff.png
    2. the code:
    #appmenu-button-container {
    position: fixed !important; }
    #appmenu-button {
    padding: 3px 10px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    background: url('ff.png') #000000 no-repeat -5px -4px !important; }
    #appmenu-button .button-text {
    display: none !important; }
    #appmenu-button dropmarker:before {
    content: "Firefox" !important; } else

    ReplyDelete
  14. minor update, add this to give the menu button a "hover" effect:

    #appmenu-button:hover,active {
    background: url('ff.png') #e4780e no-repeat -3px -3px !important; }

    cool? cant help it, i love tinkering

    ReplyDelete
  15. DQ's solution worked perfectly also on ff4b10.

    thanks dude, it's realy cool.

    ReplyDelete
  16. Where do I find the default, out-of-the-box CSS for this?

    ReplyDelete
  17. Knowing this, proves the ease of customization potential of FF4 and how can it perform to your liking. Also, with the official release of the browser, everyone will be able to experience the goodness they provided.

    ReplyDelete
  18. This works for Firefox 9:

    #appmenu-button-container {
    position: fixed !important;
    }
    #appmenu-button {
    padding: 0px 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 100px !important;
    margin-top: -29px;
    }
    #main-window[sizemode=maximized] #navigator-

    toolbox[tabsontop="true"] #TabsToolbar {
    margin-top: -24px;
    }
    #appmenu-button .button-text {
    display: "Firefox" !important;
    }
    #appmenu-button dropmarker:before {
    content: !important;
    }

    ReplyDelete