Skip to content

Instantly share code, notes, and snippets.

@soulhotel
Created October 15, 2025 23:38
Show Gist options
  • Select an option

  • Save soulhotel/c5b310cedab8f21f86f2fb015316ca1e to your computer and use it in GitHub Desktop.

Select an option

Save soulhotel/c5b310cedab8f21f86f2fb015316ca1e to your computer and use it in GitHub Desktop.
Override the Solid Colors (wallpaper) section of the new tab page (firefox css)
@-moz-document url(about:newtab), url(about:home), url(about:privatebrowsing) { :root {
/* when a custom or uploaded wallpaper is not in use, set this wallpaper (override default wallpaper) */
@media not -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper") {
body {background-image: url("picture.jpg") !important;}
}
/* when a "Solid Color" wallpaper is set, use this wallpaper (override solid colors) */
@media (-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","blue")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-green")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","green")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","dark-blue")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","dark-purple")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","dark-green")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","red")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","orange")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","beige")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-pink")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-blue")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","brown")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-purple")),
(-moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","yellow")) {
body { background-image: var(--uc-wallpaper) !important; }
}
/* when you select one of the solid color options, apply the custom wallpaper */
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","blue") {--uc-wallpaper: url("1.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-green") {--uc-wallpaper: url("2.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","green") {--uc-wallpaper: url("3.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","dark-blue") {--uc-wallpaper: url("4.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","dark-purple") {--uc-wallpaper: url("5.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","dark-green") {--uc-wallpaper: url("6.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","red") {--uc-wallpaper: url("7.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","orange") {--uc-wallpaper: url("8.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","beige") {--uc-wallpaper: url("9.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-pink") {--uc-wallpaper: url("10.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-blue") {--uc-wallpaper: url("11.gif") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","brown") {--uc-wallpaper: url("12.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","light-purple") {--uc-wallpaper: url("13.jpg") !important;}
@media -moz-pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper","yellow") {--uc-wallpaper: url("14.jpg") !important;}
/* match the custom wallpaper to the option image */
#blue {background-image: url("1.jpg") !important;}
#light-green {background-image: url("2.jpg") !important;}
#green {background-image: url("3.jpg") !important;}
#dark-blue {background-image: url("4.jpg") !important;}
#dark-purple {background-image: url("5.jpg") !important;}
#dark-green {background-image: url("6.jpg") !important;}
#red {background-image: url("7.jpg") !important;}
#orange {background-image: url("8.jpg") !important;}
#beige {background-image: url("9.jpg") !important;}
#light-pink {background-image: url("10.jpg") !important;}
#light-blue {background-image: url("11.gif") !important;}
#brown {background-image: url("12.jpg") !important;}
#light-purple {background-image: url("13.jpg") !important;}
#yellow {background-image: url("14.jpg") !important;}
/* replace the `Solid Colors` cover image */
#solid-colors[class*="wallpaper-input"] {
background-image: url('picture.png');
}
}} /*END*/
@soulhotel
Copy link
Author

This is a modified snippet from ff ultima. By overriding the Solid Color section of the New Tab pages menu, you can gain 14 free slots to use for your own rotation of custom wallpapers..

There are basically two list for wallpapers in the menu:

  1. a list that applies custom wallpapers to the new tab page
  2. a list that matches the image to the menu option

Setting a custom wallpaper is as simply as changing one of these:

"1.jpg"

into this:

"whatever.png"

or into this (dedicated folder for organization):

"wallpapers/whatever.png"

line 65 for changing the Solid Color cover image:

Screenshot_20251015_193727-1

Then you should have something like this:

ntpw.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment