How To: Customize the Firefox Menu Button with New Colors and a Different Name

Browser customization is one of Firefox's best attributes. You can personalize your Firefox with extensions, add-ons, themes, and so on. And if all of that still doesn't cut it, you can even customize the Firefox Menu button to say whatever you want.

To start off, you'll need to download a user file editor called ChromEdit Plus. Click Add to Firefox, then hit Allow when prompted and wait for it to install. You will need to restart Firefox afterwards.

A new icon (looks like a mini Swiss army knife) should appear next to the address bar.

If the icon does not appear after restart, you will have to add it yourself. There are two ways to do so. First, you can go to the Firefox Menu and hit Options -> Toolbar Layout and find the ChromEdit Plus icon, then drag it to the toolbar. Alternatively, you can right-click on the main window, go to Customize and drag the ChromEdit Plus icon to the toolbar.

Now that you have the icon installed, you can click on it to open it up. There are three tabs in the top right corner—you will be using the one titled userChrome.css. This tab should be empty for most users, so you will need to copy the following text into the empty tab:

@namespace url(" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#appmenu-button {
background: #orange !important;
}
#appmenu-button dropmarker:before {
content: "Firefox" !important;
color: #FFFFFF !important;
}
#appmenu-button .button-text {
display: none !important;
}

Make sure the quotes are straight quotes and not smart quotes (curled) as this will invalidate any changes you try to make.

Click Save and then hit Restart. All of the windows should re-open upon restart.

Now, to change the background color from its regular orange, you will need a hex code for the color of your choice. You can find the code for most popular colors here. Once you have picked a color, copy the code and replace #orange with your new color code.

To change the text from "Firefox" to whatever you desire—in this case I will change mine to say "WonderHowTo"—you will highlight and replace "Firefox" (located under #appmenu-button) with your text.

You can also change the text color to a color of your choice. Simply replace the #FFFFFF (white) with the code for whatever color you choose.

Now, hit Save and Restart. Upon restarting, all of your changes should have been applied.

Unfortunately, ChromEdit Plus is only available for Windows and Linux. Does anyone know of an alternatives for Mac users? Let us know in the comments below. Though, the Firefox menu is built-in to the standard top bar on a Mac, so you probably couldn't do this mod anyway.