This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Is there a way to change/modify the spinning logo while loading pages?

  • 10 replies
  • 2 have this problem
  • 37 views
  • Last reply by cor-el

more options

I want to custom my Firefox Browser, but the only thing I've found can be changed is the "Persona" which is only background images. I was wondering if there's a way to modify the spinning icon that appears while loading a page and maybe even the back and forward buttons. Do you know if this can be done?

I want to custom my Firefox Browser, but the only thing I've found can be changed is the "Persona" which is only background images. I was wondering if there's a way to modify the spinning icon that appears while loading a page and maybe even the back and forward buttons. Do you know if this can be done?
Attached screenshots

Chosen solution

Don't use the chrome:// prefix with the images. Just use the file name like I posted above. That will work if the images are in the chrome folder. The chrome protocol is used to access internal files and files that are contained in an extension.

.tab-throbber[busy] { 
  list-style-image: url("r.png") !important;
}

.tab-throbber[progress] {
list-style-image: url("r.png") !important;
}
Read this answer in context 👍 1

All Replies (10)

more options

You would have to override these CSS rules and append the !important flag.

  • chrome://browser/skin/browser.css
list-style-image: url("<your image>") !important;
.tab-throbber[busy] {
  list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
}

.tab-throbber[progress] {
  list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
}
more options

So, how can I edit that css file, I mean I can access it through the browser as the connecting.png and loading.png, how can I edit that file and how can I locate those images so when I have the ones created by me I know where should I put them?

more options

You first need to find suitable png images and place them in the chrome folder where you alo need to locate the userChrome.css file that contains the CSS code.

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

.tab-throbber[busy] {
  list-style-image: url("connecting.png") !important;
}

.tab-throbber[progress] {
  list-style-image: url("loading.png") !important;
}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

  • Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • Paste the code in the userChrome.css file in the editor window
  • Make sure that the userChrome.css file starts with the default @namespace line
  • Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

You can use this button to go to the currently used Firefox profile folder:

more options

Alright, I created the chrome folder and the userChrome.css, copied the code of the original css found in chrome://browser/skin/browser.css The images I create have to be in the path chrome/browser/skin/tabbrowser ??? And another thing, where can I locate connecting.png and loading.png (the original files) so I try to open them with Photoshop or something like that. Since they are png files I guess it should be a format for the image (like the next scenes at right or down, etc)

more options

Are there no more full themes that work with Firefox any more? I thought Frank Lion's themes and KaiRo's themes were up to date?

more options

The images need to be in the chrome folder where also the userChrome.css file should be located. You can open the chrome URL of an image in Firefox by pasting the address in the location bar and possibly save the image in the usual way (right-click: Save Image As).

more options

So, in this section (the commented section is what I'm trying out but is not working) what should I change?: .tab-icon-image {

 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");

/*list-style-image: url("r.png") !important;*/ }

.tab-throbber[busy] { /* list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png") !important;*/

  list-style-image: url("chrome://r.png") !important;

}

.tab-throbber[progress] {

 /*list-style-image: url("chrome://browser/skin/tabbrowser/loading.png") !important;*/

list-style-image: url("chrome://r.png") !important; } This is the file I'm using, the images don't work but they change from the default ones, do you know what am I doing wrong? I'm just dropping my image under the chrome folder I previously created https://drive.google.com/file/d/0B-g56nnsMS1xLWhadmNuZHZWUk0/view?usp=sharing

Modified by LouisLo0olz

more options

Chosen Solution

Don't use the chrome:// prefix with the images. Just use the file name like I posted above. That will work if the images are in the chrome folder. The chrome protocol is used to access internal files and files that are contained in an extension.

.tab-throbber[busy] { 
  list-style-image: url("r.png") !important;
}

.tab-throbber[progress] {
list-style-image: url("r.png") !important;
}
more options

Nice, that was it. Thank you

more options

You're welcome