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:
- Start Firefox
- Click on Firefox Button >> the arrow next to Help >> Troubleshooting Information
- Under the Application Basics heading, click on the Show Folder button next to Profile Folder.
- 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
. - Go inside this newly created
chrome
folder and either:- Download the userChrome.css file I have attached to this article and place it into the
chrome
folder. - Create a new file called
userChrome.css
(inside thechrome
folder) and enter the following text into it. (Make sure that you name the fileuserChrome.css
and notuserChrome.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; }
- Download the userChrome.css file I have attached to this article and place it into the
- Restart Firefox and the changes should take place immediately.
- You can edit the
background
andcolor
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