Is there a way to change/modify the spinning logo while loading pages?
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?
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)
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"); }
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?
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:
- Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
- http://kb.mozillazine.org/Profile_folder_-_Firefox
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)
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?
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).
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
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; }
Nice, that was it. Thank you
You're welcome