In this project, I will show you how to change the throbber (the animated icon in the upper right hand corner of the browser) from the original Mozilla throbber to another. I used the original animated Netscape Icon from I beleive Netscape Navigator v4.xx.

Click the images below to view larger image, use the back button to come back.

Mozilla v1.7.5 with page loaded

Mozilla v1.7.5 loading a page

What you need:

• A Mozilla Browser
• Animated & Single Throbbers
• Locate your Mozilla Profile's userchrome.css file (details below)

Locate your userchrome.css file, located: C:\ > Documents and Settings > User Name > Application Data > Mozilla > Profiles > Default > foldername.slt > chrome > userchrome.css.

If you do not have a userchrome.css file, copy the userchrome-example.css, and rename the copy to userchrome.css (NOTE!!! Do not alter the example file, make only a copy and rename the copy. If you mess the copy up, you can always delete it and make another from the original!)

Now, add open the usercrhome.css file, go to the bottom line and hit enter a few times, add /* user added */ (has to have the foward slash and star to tell the file its an added comment, and end it with a star foward slash), then hit enter, and add the following lines:

#navigator-throbber {
list-style-image : url("throbber-single.gif") !important;
}

#navigator-throbber[busy="true"] {
list-style-image : url("throbber-anim.gif") !important;
}

Now save the file and close it, unzip the zipped throbber-anim.zip file you just downloaded, and move or copy the two files, the "throbber-anim.gif" and "throbber-single.gif" to the same very folder you just added the userchrome.css file to.

Now, open your Mozilla browser and you should see the new throbber! If you do, you have successfully completed this project! If you do not, you did something wrong and need to re-follow the steps listed above!