

The button is now dark blue and says “How-To Geek”. We left the text color as white (#FFFFFF), but you can change it to something like a light gray (#F2F2F2), or something like that.Ĭlick Save and then Restart to have the changes take effect. You can choose to change the color of the text as well by changing the “color” line in the same “#appmenu-button dropmarker:before” section. We added a space after the text to have more space between the text and the drop-down arrow on the button. To change the text on the button, change the “Firefox” text on the “content” line in the “#appmenu-button dropmarker:before” section to your desired text, such as “How-To Geek “. NOTE: To figure out the hex color code for a color you want, see our articles about getting hex color codes from decimal RGB colors, selecting colors from anywhere on the screen, and getting color codes in multiple formats. For example, we chose a dark blue with the hex color code of #2C4362. To change the background color, change the “#orange” text on the “background” line in the “#appmenu-button” section to a different color, using the hex color code, or HTML color code. In this example, we are going to change the background color to a dark blue and change the “Firefox” text to “How-To Geek”. If any of them are smart quotes, the file will not affect the appearance of Firefox at all.Ĭlick Restart to restart Firefox using the new or revised userChrome.css file. They should be ordinary, straight quotes. IMPORTANT: Make sure all the quotes in the userChrome.css are NOT smart quotes, including the ones in the line. If you want to keep what you already have, you can paste the above text at the end of the file. Copy all the text above except for the first line, the line, and paste it onto the tab somewhere after the line.

You may already have a userChrome.css file, in which case there will already be text on the userChrome.css tab. This gives you a default userChrome.css url(“”) #appmenu-button If the tab is empty, copy and paste the following text onto the userChrome.css tab and click Save. We will be editing the userChrome.css file, which is on the first tab. There are three tabs by default on the ChromEdit Plus window. Click it to open the ChromEdit Plus window. Once Firefox restarts, the ChromEdit Plus button is added to the right of the Address box. You must restart Firefox to finish the installation. NOTE: You can change the length of the countdown on the Install button, but we don’t recommend disabling it. Click Install Now, which may not be available until a countdown finishes. The Software Installation dialog box displays.
