Firefox Customs

3 readers

1 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

Image in chrome/newtab folder is nor reached by the code (lemmy.world)

submitted 2 months ago by [email protected] to c/[email protected]

4 comments fedilink hide all child comments

hi, I'm asking for help to solve this inconvenient when I try to replace the default wallpapers in newtab page.
Fist of all I'm using the developer Firefox version that use beta version to do this.

I have activated this preference in about:config page:

browser.newtabpage.activity-stream.newtabWallpapers.enabled to true

after that I replaced the wallpapers thumbnails successfully with the next code:

/* Miniaturas de wallpapers */

/* Dark */

.wallpaper-input.dark-landscape { background-image: url("../newtab/wallpaper-dark.png") !important; }

.wallpaper-input.dark-panda { background-image: url("../newtab/wallpaper-dark2.png") !important; }

.wallpaper-input.dark-color { background-image: url("../newtab/wallpaper-dark3.png") !important; }

.wallpaper-input.dark-sky { background-image: url("../newtab/wallpaper-dark4.png") !important; }

.wallpaper-input.dark-mountain { background-image: url("../newtab/wallpaper-dark5.png") !important; }

.wallpaper-input.dark-beach { background-image: url("../newtab/wallpaper-dark6.png") !important; }

but when I try to replace the wallpaper for the first image in newtab page it don't work with the path I used to use, for example this code:

body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url("../newtab/wallpaper-dark.png") !important;
    }

and only works when I use a url for the new image like this:

body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url(https://i.imgur.com/It1Ugaa.png) !important;
}

so I wonder if is my mistake or is a Firefox bug, or maybe there is a trick to solve it? cause I would like to use local images and not urls.

top 4 comments

sorted by: hot top controversial new old

[–] [email protected] 5 points 2 months ago (1 children)

Sounds like what's happening here is that the relative path you have given doesn't resolve to what you think it does. See, the variable --newtab-wallpaper-dark is used by an internal style sheet, so when the url() actually gets resolved it will be relative to the internal style sheet address - not to the file path of userContent.css.

So, a workaround would be to give it an absolute file path or override the property where that variable is actually used.

[–] [email protected] 2 points 2 months ago (1 children)

thanks for the answer, I searched where the variable is used and added !important and that fixed, I don't know why but all right jeje:

body{
    background-image: var(--newtab-wallpaper-dark, "") !important;
    ...

[–] [email protected] 1 points 2 months ago (1 children)

Right, that makes perfect sense. The property being a variable nor it having an important tag are not meaningful to explain what's happening here.

What is important is simply what the address of the .css file is which sets the background-image property, because relative url resolves relative to that. The internal style sheet where this background-image property is set is chrome://activity-stream/content/css/activity-stream.css. So if the url it uses is ../newtab/wallpaper-dark.png (as by you setting the variable as such) then it will try to load an image from address chrome://activity-stream/content/newtab/wallpaper-dark.png which surely doesn't exist.

But if you set background-image property from within userContent.css then the relative url resolves relative to that instead.

[–] [email protected] 1 points 2 months ago

ooh, thanks for the explanation, I'm sure I understand better how this works. 💙