How to Change the Firefox Button Color and Text

Starting with Firefox 29, they got rid of that awful button. No longer needed, this article has now been placed in the archives.

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, or
    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).
  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 the computer)

Leave A Comment

Your email address will not be published.