Change Progress Bar Color

Changes the color of the progress bar (in the status bar).

Compatibility

Works with: Firefox 3.6

Background

By default the progress bar is blue, but the color can be changed.

The Tweak

To change the progress bar color you will need modify your userChrome.css. Add these lines to your userChrome.css file located in your profile folder:

 /* Change the progress bar color */
 .progress-bar {
 -moz-appearance: none !important;
 background-color: #660000 !important; }

To specify the color, locate the color here and note the six-digit hex code. Within the code you have copied from above to your userChrome.css file, replace ‘660000′ with the six-digit hex code for the color you have chosen. Make sure you include the ‘#’ in front of the six-digit hex code. When finished editing the userChrome.css file, close and restart Firefox and the changes should take effect right away.

Notes

With Firefox 4 Beta 7, the status-bar was eliminated and replaced with the ‘add-on bar’ which does not have the same functionality as the status bar. The use of this tweak requires the Status-4-Evar add-on. Further the functionality of this tweak is included within the options for this add-on. Therefore this tweak is redundant, except that modifications made to the progress bar color via userChrome.css over-ride those via the add-on settings.

Original Article


Updated: November 15, 2025

Leave a Reply