• ARTICLES
SEARCH

How-To Geek

How to Customize the Appearance of the Orange Firefox Menu Button

00_lead_image_custom_firefox_button

Do you get tired of looking at the orange Firefox menu button? Firefox’s interface is completely customizable, so you can change the color, text, and other properties of the Firefox menu button to create your own custom look.

To change the appearance of the Firefox menu button, we will be editing the userChrome.css file. This file allows you to change the appearance of any part of Firefox, as well as its functionality.

01_default_firefox_button

Before diving into editing the userChrome.css file, we will install an add-on, called ChromEdit Plus, that will allow us to easily edit the file and save it in the correct format. Click the following link to go to the ChromEdit Plus webpage.

http://webdesigns.ms11.net/chromeditp.html

Click the Add to Firefox button on the page.

02_installing_chromedit_plus

The following message may display. Click Allow to continue installing the ChromEdit Plus add-on.

NOTE: Be very careful about what you allow when installing extensions and other software. If you are not sure about the product or don’t trust the company, don’t install. We tested ChromEdit Plus and found it to be safe and reliable.

03_clicking_allow

The Software Installation dialog box displays. Click Install Now, which may not be available until a countdown finishes.

NOTE: You can change the length of the countdown on the Install button, but we don’t recommend disabling it.

04_clicking_install_now

You must restart Firefox to finish the installation. Click Restart Now on the popup dialog.

05_clicking_restart_now

Once Firefox restarts, the ChromEdit Plus button is added to the right of the Address box. Click it to open the ChromEdit Plus window.

06_clicking_chromedit_plus_button

There are three tabs by default on the ChromEdit Plus window. We will be editing the userChrome.css file, which is on the first tab. If the tab is empty, copy and paste the following text onto the userChrome.css tab and click Save. This gives you a default userChrome.css file.

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

You may already have a userChrome.css file, in which case there will already be text on the userChrome.css tab. Copy all the text above except for the first line, the @namespace line, and paste it onto the tab somewhere after the @namespace line. If you want to keep what you already have, you can paste the above text at the end of the file.

IMPORTANT: Make sure all the quotes in the userChrome.css are NOT smart quotes, including the ones in the @namespace line. They should be ordinary, straight quotes. If any of them are smart quotes, the file will not affect the appearance of Firefox at all.

Click Restart to restart Firefox using the new or revised userChrome.css file.

07_creating_userchrome_file

In this example, we are going to change the background color to a dark blue and change the “Firefox” text to “How-To Geek”.

To change the background color, change the “#orange” text on the “background” line in the “#appmenu-button” section to a different color, using the hex color code, or HTML color code. For example, we chose a dark blue with the hex color code of #2C4362.

NOTE: To figure out the hex color code for a color you want, see our articles about getting hex color codes from decimal RGB colors, selecting colors from anywhere on the screen, and getting color codes in multiple formats.

To change the text on the button, change the “Firefox” text on the “content” line in the “#appmenu-button dropmarker:before” section to your desired text, such as “How-To Geek “. We added a space after the text to have more space between the text and the drop-down arrow on the button.

You can choose to change the color of the text as well by changing the “color” line in the same “#appmenu-button dropmarker:before” section. We left the text color as white (#FFFFFF), but you can change it to something like a light gray (#F2F2F2), or something like that.

Click Save and then Restart to have the changes take effect.

08_new_color_and_text

The button is now dark blue and says “How-To Geek”.

09_firefox_menu_with_new_color_and_text

You can also add a background image to the button, in addition to changing the background color. We created an image that has the How-To Geek favicon on the left and a transparent background so the dark blue background color shows through. To add a background image to your button, add the following line to the “#appmenu-button” section, changing the path in the quotes to the location of your image on your computer. Leave the “file:///” in the path.

background-image: url(“file:///C:/Users/Lori/Pictures/htg_background.png”) !important;

Click Save and Restart again.

10_adding_a_background

Now our button is complete.

11_firefox_button_with_background

You can also customize the Firefox menu button by converting it into an icon. We have also published many other tips and and tweaks for getting the most out of Firefox.

Lori Kaufman is a freelance technical writer who likes to write geeky how-to articles to help make people's lives easier through the use of technology. She loves watching and reading mysteries and is an avid Doctor Who fan.

  • Published 01/21/13

Comments (15)

  1. Ron

    What are the dimensions of the png image used for the appmenu-button?

  2. Ron

    I changed the text color to black “#000000″, and now it looks fuzzy. Is there another setting somewhere for that?

  3. Swords R Better

    There’s another “fix” too, you know. And it’s way simpler with no need for added software. Just enable the “menu bar” and you’ll never even see that orange Firefox menu. Right-click on an empty portion of the tool bar area and select “menu bar” and voila! Better still, this is almost instantly reversible and done the same way.

    That said, I do like knowing these more in-depth customizing procedures. Thanks for the article.

  4. Ryan

    @Ron

    Inside the same css class of
    #appmenu-button dropmarker:before

    add this line too

    text-shadow:none;

    for your code should be

    #appmenu-button dropmarker:before {
    content: “YOUR_TEXT_HERE” !important;
    color: #000000 !important;
    text-shadow:none;
    }

  5. Alan

    Why don’t use Stratiform? This add-on does the job easier. Plus, there are other customization too.

  6. Hairy Toenail

    I use App Button Remove, even easier still!

  7. Balázs
  8. cam2644

    Firefox is such a flexible browser. Thanks for this info and please consider more for us in the future.

  9. Ubu

    App Button Color addon is perfect if you just want that.
    Can also recommend Movable Firefox Button.

  10. Karl Gephart

    Has anybody seen an updated list of div id names for userChrome.css that would be relevant for ff18?

  11. bedlamb

    Tried ChromEdit Plus. Didn’t work for me.
    Tried Stratiform. Didn’t work for me.
    Tried CustomAppButton. Huzzah!! Worked fine.

    Thanx folks.

  12. Dark Reality

    Wow, Stratiform *wasn’t* abandoned. And it works for me, at least in changing the color of the button. It can change the text as well, but the offset of the leftmost tab doesn’t change, so if it has too many more (or fewer) letters, it looks bad. At least on Windows XP where the tabs are up on top next to the application button.

  13. JC

    @Swords R Better

    I couldn’t see the “Firefox” button, and after trying this trick still couldn’t see it. Thanks for saving me the trouble of googling the answer. Now I can’t get the menu bar back. Blast! lol.

  14. JC

    @JC
    Found it – right-click the button and the toolbar options appear. Well done you! 8-))

  15. pegasus

    I have used these three pieces of CSS code in my userChrome file and am pleased with the result.
    I would like to hide the drop arrow also but the code (shown below) I was using before now removes my name as well.

    /* Firefox Button: Hide the Drop Down arrow */
    #appmenu-toolbar-button > dropmarker,
    #appmenu-button > .button-box dropmarker {
    display: none !important;
    }

    I would be grateful for any suggestions.

Enter Your Email Here to Get Access for Free:

Go check your email!