stylish new tab local file
Hi, I have been trying to customize the new tab background with the add on Stylish. The following is the code I have been using:
/* Set a wallpaper for the about:newtab page*/ @-moz-document url("about:newtab") {
#newtab-scrollbox{
background: url("file:///d:/Erika/CM.jpg") no-repeat !important;
background-size: 100% !important;
}
}
I tried several times but my effort was futile. Please help me!
Thank you in advance.
All Replies (6)
Firefox may have a security bar on this, I'm not sure. If you check for error messages in the Browser Console, can you see any objections like that?
You can open the console by pressing Ctrl+Shift+j or using "3-bar" menu button > Developer.
Then I suggest clicking the Clear button to flush out what's there, then switch over to your tab and reload it. Then check the console again.
A workaround is to convert your image to a data URI. I have used http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ for that. You can see how it looks by viewing the CSS on this rule: https://userstyles.org/styles/101036/brighter-background-tabs-australis-firefox-29
Can you open the image in a tab with that URL?
Does the code work in userContent.css ? It works for me on Linux with that file (I'm not using Stylish).
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
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)
I was able to get something similar to work but I had to change the namespace from XUL to HTML on the first line.
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("about:newtab") { #newtab-scrollbox { background-image: url(file:///C:/Users/username/Pictures/filename.jpg) !important; background-size: 100%; } }
Seems to be a glitch in Stylish.
Hi, thanks for your quick response.
I cleared things the console but unfortunately it still didn't work. Could you elaborate on what I should do with after converting my image to a data URI?
@namespace url(http://www.w3.org/1999/xhtml); ←What am I suppose to write here if the source is a local file?
@-moz-document url("about:newtab") {
#newtab-scrollbox {
background-image: url(file:///C:/Users/username/Pictures/filename.jpg) !important;
background-size: 100%;
}
}
Sorry but this is new to me! I appreciate your patience.
Hi StylishErika, go ahead and use that namespace listed in my post.
When you use the Stylish button > Write new style > For this URL
Stylish detects that it is a built-in page and uses this namespace:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
However, that namespace doesn't work on this page, so you need to change it to
@namespace url(http://www.w3.org/1999/xhtml);
One way to do it is to delete the namespace line (top line of the rule) and, above the rule, click the Insert button, then HTML namespace by default.
Or you can paste it from here.