Firefox 4: How to Customize the Orange Button

Firefox 4′s infamous orange button can be a real eyesore to an otherwise awesome looking screen. By changing the color to better match your theme, you can improve its looks dramatically. You can also customize it further by changing the text displayed from “Firefox” to something more personal.

First, you need to make sure that you have the userChrome.css file on your computer. To easily locate this:

1. Open Firefox 4.

2. Click the orange Firefox button.

3. Mouseover Help and select Troubleshooting Information.

4. Under Application Basics, find Profile Directory and click the corresponding Open Containing Folder button.

5. Look for a chrome directory. If you have one, open it and maker sure that there is an userChrome.css file inside. If not, you will need to create one, see step 9.

6. If you don’t have a chrome directory, create a new folder and rename it to chrome.

7. Open the new chrome directory.

8. Right-click inside the directory, select New and click Text Document.

9. Open the new text document, then copy and paste the following:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#appmenu-button
{
background: #CDCDCD !important;
}
#appmenu-button dropmarker:before {
content: "Firefox" !important;
color: #000000 !important;
}
#appmenu-button .button-text {
display: none !important;
}

10. Save the file as userChrome.css. Keep this file open so that you can start customizing Firefox.

To customize the orange button:

1. Close Firefox.

2. Go to userChrome.css and locate the line that looks like this:
background: #CDCDCD !important;

3. Change #CDCDCD to the hex code for the desired color. You can use a color code chart to help you find the color you want, like this one.

4. Save the css file (but still keep it open).

5. Open Firefox to view the newly colored button.

6. If the text color doesn’t match well with your new button color, you can change it by going to the line that reads:
color: #000000 !important;

change #000000 to the hex code for the desired color. Save the css file.

7. Close and open Firefox to see your changes.

Mine currently looks like this:

 

About Rob Rogers

Once a prolific author here on Tech-Recipes, Rob has moved on to greener pastures.
View more articles by Rob Rogers

The Conversation

Follow the reactions below and share your own thoughts.

2 Responses to “Firefox 4: How to Customize the Orange Button”

  1. May 31, 2011 at 9:14 pm, Ben said:

    Or for the average user, you can use an extension to avoid messing with hex codes: https://addons.mozilla.org/en-US/firefox/addon/app-button-color/

    Reply

  2. April 15, 2012 at 4:29 am, zapper067 said:

    can we change the”firefox” words?

    Reply

Leave a Reply