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
   chrome.
5. Go inside this newly created
   chrome
   chrome folder and either:
   1. Download the userChrome.css file I have attached to this article and place it into the
      chrome
      chrome folder.
   2. Create a new file called
      userChrome.css
      userChrome.css (inside the
      chrome
      chrome folder) and enter the following text into it. (Make sure that you name the file
      userChrome.css
      userChrome.css and not
      userChrome.css.txt
      userChrome.css.txt or else it won’t work).
      @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

      #appmenu-button {

      background: #D4D4D4 !important;

      }

      #appmenu-button dropmarker:before {

      content: "Menu" !important;

      color: #FFFFFF !important;

      }

      #appmenu-button .button-text {

      display: none !important;

      }

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

      @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
      #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
   background and
   color
   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).