How to Change the Firefox Button Color and Text

Firefox seems to change how the settings for the Firefox button work with every release, meaning that most of the tutorials explaining how to do this are either broken or buggy. Here is another tutorial on how to change the color of the Firefox button, but this time I am going to keep the article up to date with the different versions of Firefox that it works with.

These instructions below have been verified to work with Firefox versions 22-28. Here is how to do it:

  1. Start Firefox
  2. Click on Firefox Button >> the arrow next to Help >> Troubleshooting Information
  3. Under the Application Basics heading, click on the Show Folder button next to Profile Folder.
  4. After clicking the Show Folder button, a folder should have opened in your computer’s file manager. Within this folder, manually create a new folder called chrome.
  5. Go inside this newly created chrome folder and either:
    1. Download the userChrome.css file I have attached to this article and place it into the chrome folder.
    2. Create a new file called userChrome.css (inside the chrome folder) and enter the following text into it. (Make sure that you name the file userChrome.css and not userChrome.css.txt or else it won’t work).
      @namespace url("");
      #appmenu-button {
      background: #D4D4D4 !important;
      #appmenu-button dropmarker:before {
      content: "Menu" !important;
      color: #FFFFFF !important;
      #appmenu-button .button-text {
      display: none !important;
  6. Restart Firefox and the changes should take place immediately.
  7. You can edit the background and color properties, then restart Firefox, to tweak the colors to your liking.

If you have any questions, then either email me directly or ask in the comments below. If there is demand, I can quickly create a video showing how to do it.

Attachment: userChrome.css (right-click on the link, then save it to your computer).

Leave a Reply

Your email address will not be published.