Firefox 4’s release is not even a day old and bloggers are already giving tips to customize it. One of the things that are hated, is the Firefox orange button, to me it looks nice, but some people may find it annoying, so, here is an easy way to at least change the color of it.

First, we need to go to our profile folder, that is (inside Firefox) “Help > Troubleshooting information > Open containing folder”. Inside of it it’s the “Chrome” folder, and inside of it the file “userChrome-example.css”, we copy, paste and rename it to “userChrome.css”.

Now open it, and inside of it look for the line:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

Right after that paste this:

#appmenu-button-container{
position: fixed !important;
}

#appmenu-button{
padding: 3px 18px 3px 18px !important;
margin-top:0px !important;
background-color: #f5f5f5 !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;
}

In case you don’t understand a lot of this, here are some tips:

- margin-top => space between the button and the title bar

- background-color => color of the button

- padding => distance between the text of the button and the border of it

The others commands are only standards, but if you want you can modify it and check the things you manage to do. Also, if you already know about css, be my guest and start playing with it.

Via | Download Squad

Other items that may interest you

• Firefox 4 Beta 1 available for downloads at last
• Chameleon Folder: Create a custom context menu with your most used folders
• Unlocker 9.0: New version of the most used file manager tool
• How to force add-on compatibility in Firefox 4 and remove Feedback button