为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

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

  • 10 个回答
  • 2 人有此问题
  • 37 次查看
  • 最后回复者为 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?
已附加屏幕截图

被采纳的解决方案

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;
}
定位到答案原位置 👍 1

所有回复 (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

由LouisLo0olz于修改

more options

选择的解决方案

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