Side to side ball?

[CaJazzman]

I, know this may have been asked before, even though I'm unable to find it, but, when you select another site or reload the page,the tab has this ball that goes from side to side. How can someone change it to something else, and what are the options? TIA

[LIMPET235]

Hi,
Please ref; this post by "GbMan" on how to remove it or even change it...
> http://forums.mozillazine.org/viewtopic ... #p14783175

[Brummelchen]

its called "throbber" and you can get the old images here:
https://github.com/aris-t2/customcssforfx

[CaJazzman]

Hi,
Please ref; this post by "GbMan" on how to remove it or even change it...
> http://forums.mozillazine.org/viewtopic ... #p14783175

Try the second option, but didn't work. Maybe, I'm not doing something correctly. Hope someone can steer me in the right direction.

[mightyglydd]

Read This.....

http://forums.mozillazine.org/viewtopic ... &t=3037817

[CaJazzman]

Read This.....

http://forums.mozillazine.org/viewtopic ... &t=3037817

So, I read that link, which I knew about, but what I'm asking is to change the icon from the bouncing ball to the blue rotating icon. I see both of the codes, in GbMan's post, but that's where I'm confused, because I want this image, but for some reason, it doesn't change/work. How do I adjust the code for the rotating Blue icon, and not the bouncing ball:?:

[BobbyPhoenix]

Read This.....

http://forums.mozillazine.org/viewtopic ... &t=3037817

So, I read that link, which I knew about, but what I'm asking is to change the icon from the bouncing ball to the blue rotating icon. I see both of the codes, in GbMan's post, but that's where I'm confused, because I want this image, but for some reason, it doesn't change/work. How do I adjust the code for the rotating Blue icon, and not the bouncing ball:?:

I don't have the answer, but I have the same issue. I've tried all different versions, and none seem to change it. I don't know what I'm doing wrong. I'm using several CSS codes now, but the throbber is the only one that won't work.

[CaJazzman]

Read This.....

http://forums.mozillazine.org/viewtopic ... &t=3037817

So, I read that link, which I knew about, but what I'm asking is to change the icon from the bouncing ball to the blue rotating icon. I see both of the codes, in GbMan's post, but that's where I'm confused, because I want this image, but for some reason, it doesn't change/work. How do I adjust the code for the rotating Blue icon, and not the bouncing ball:?:

I don't have the answer, but I have the same issue. I've tried all different versions, and none seem to change it. I don't know what I'm doing wrong. I'm using several CSS codes now, but the throbber is the only one that won't work.

Yes, exactly, the same issue.

[smsmith]

Gingerbread Man's code is working for me.

Open your profile folder. Help -> Troubleshooting Information, click the Open Folder button in the tab that opens.
Create a chrome folder inside of the profile folder that opens.
Create a new text file in the chrome folder. Name it userChrome.txt and open it with your favorite text editor. I'd suggest WordPad over Notepad unless you have one of those fancy programmer's text editors.
Paste this code into the file.

Code: Select all

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

/* Pre-57 rotating throbbers - I found this shared by Jefferson Scher */
.tab-throbber[busy]::before {
      background-image: url("chrome://global/skin/icons/loading.png") !important;
      animation: unset !important;
}

.tab-throbber[busy]:not([progress])::before {
      filter: grayscale(100%) !important;
}

@media (min-resolution: 2dppx) {
    .tab-throbber[busy]::before {
        background-image: url("chrome://global/skin/icons/loading@2x.png") !important;
    }
}

Save and close the file. Rename the file from userChrome.txt to userChrome.css
When Windows ask/your OS asks if you want to change the file type, say yes.
Close and restart Firefox.

The upper/lower case is very important. The folder is chrome not Chrome. The filename is userChrome.css not UserChrome.css or Userchrome.css. You need to save the file, then close and restart Firefox to see the changes.

[Brummelchen]

The upper/lower case is very important. The folder is chrome not Chrome. The filename is userChrome.css not UserChrome.css or Userchrome.css.

not here - here: "userchrome.css"

[BobbyPhoenix]

The correct spelling format is userChrome

[trolly]

If the case is significant depends on the operating system and file system.
As far as I know Windows does not care but all other platforms do.

[BuddhaNature]

CaJazzman and BobbyPhoenix,

I should say that Gingerbread's code works fine for me. But I'm thinking that, by whatever means, maybe you don't have images on your system that your code can work with so. So would suggest try the following:

(1) Click on this link tabthrobber_fx56_loading.png and download a copy of the image file to your system (do not change the name of the file). To download just right-click on the image and select "Save image As..."

(2) Now download a copy of this image file tabthrobber_fx56_loading@2x.png to your system (do not change the name of the file).

(3) Now put a copy of both those image files into your chrome folder.

(4) Now paste this code to replace the code you already have from Gingerbread and then save the userChrome.css file. (The code is modified slight and I have commented what the difference is in the code.)

Code: Select all

/* Pre-57 rotating throbbers - I found this shared by Jefferson Scher */
.tab-throbber[busy]::before {
/*  background-image: url("chrome://global/skin/icons/loading.png") !important; */
/* The line below is an adaptation of the line above to work with an image file contained in the chrome folder. */
  background-image: url("tabthrobber_fx56_loading.png") !important;
  animation: unset !important;
}
.tab-throbber[busy]:not([progress])::before {
  filter: grayscale(100%) !important;
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
/*    background-image: url("chrome://global/skin/icons/loading@2x.png") !important; */
/* The line below is an adaptation of the line above to work with an image file contained in the chrome folder. */
    background-image: url("tabthrobber_fx56_loading@2x.png") !important;
  }
}

(5) Shut down and then relaunch FF.

Did that work?

[BobbyPhoenix]

CaJazzman and BobbyPhoenix,

I should say that Gingerbread's code works fine for me. But I'm thinking that, by whatever means, maybe you don't have images on your system that your code can work with so. So would suggest try the following:

(1) Click on this link tabthrobber_fx56_loading.png and download a copy of the image file to your system (do not change the name of the file). To download just right-click on the image and select "Save image As..."

(2) Now download a copy of this image file tabthrobber_fx56_loading@2x.png to your system (do not change the name of the file).

(3) Now put a copy of both those image files into your chrome folder.

(4) Now paste this code to replace the code you already have from Gingerbread and then save the userChrome.css file. (The code is modified slight and I have commented what the difference is in the code.)

Code: Select all

/* Pre-57 rotating throbbers - I found this shared by Jefferson Scher */
.tab-throbber[busy]::before {
/*  background-image: url("chrome://global/skin/icons/loading.png") !important; */
/* The line below is an adaptation of the line above to work with an image file contained in the chrome folder. */
  background-image: url("tabthrobber_fx56_loading.png") !important;
  animation: unset !important;
}
.tab-throbber[busy]:not([progress])::before {
  filter: grayscale(100%) !important;
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
/*    background-image: url("chrome://global/skin/icons/loading@2x.png") !important; */
/* The line below is an adaptation of the line above to work with an image file contained in the chrome folder. */
    background-image: url("tabthrobber_fx56_loading@2x.png") !important;
  }
}

(5) Shut down and then relaunch FF.

Did that work?

Thank you. I will give it a try, and post my results.

[Gingerbread Man]

But I'm thinking that, by whatever means, maybe you don't have images on your system that your code can work with so.

I don't see how that can possibly be the case, since the three of us are using the same operating system. The images are a built-in part of Firefox and not something that can be misplaced. You can enter each link into the location bar; you should be able to see the images and save a copy.

Code: Select all

chrome://global/skin/icons/loading.png
chrome://global/skin/icons/loading@2x.png

Rename the file from userChrome.txt to userChrome.css

If you haven't set up userChrome.css / userContent.css before and you don't want to faff around with Windows file extensions, just go to https://luke-baker.github.io/#usage and unpack the ZIP there into your profile folder. Then you can open the chrome folder and edit userChrome.css with something like Notepad to add the CSS code.