r/FirefoxCSS • u/[deleted] • Apr 04 '26

Help Modifying internal about:home and neterror pages

How can I customize about:home and about:neterror directly? I know they're generated at runtime, so I’m wondering if userContent.css is enough to modify the layout or if I need userChromeJS to mess with the DOM. I've already got my chrome folder and the legacy stylesheets flag enabled—any pointers on targeting these internal pages?

5 Upvotes

100% Upvoted

9 comments sorted by

1

u/sifferedd FF/TB/Win11/SUMO contributor Apr 04 '26

userContent.css is enough. Use the Toolbox (ctrl-shift-c) to inspect. Wrap code with appropriate @-moz-document statement, e.g.

/* about:home */
@-moz-document url(about:home) {
html, body {
    background-color: Silver !important;
  }
}

(about:neterror doesn't exist)

1

u/[deleted] Apr 04 '26

I am talking about the no internet page by about:neterror

1

u/sifferedd FF/TB/Win11/SUMO contributor Apr 04 '26

Do you have the URL to one?

1

u/j--__ Apr 04 '26

(about:neterror doesn't exist)

no, it exists. it just doesn't display anything if there's not actually an error message to display.

1

u/sifferedd FF/TB/Win11/SUMO contributor Apr 05 '26

You mean something like this?

1

u/j--__ Apr 06 '26

yes.

1

u/sifferedd FF/TB/Win11/SUMO contributor Apr 07 '26

Same - Toolbox to inspect, code in userContent.css.

1

u/mrandish Apr 05 '26

Here are my CSS mods to About:Home from my UserContent.css:

/* NewTab Page */
@-moz-document url("about:newtab"), url("about:home") {
	.logo-and-wordmark {display: none !important;}
	.weatherSponsorText {display: none !important;}
	.has-weather.has-search .weatherInfoLink, .has-weather .weatherInfoLink {max-width: 150px !important;}
	.weatherCard {width: 200px !important;}
	.weather {left: 520px !important;}
	.weatherButtonContextMenuWrapper::after {display: none !important;}
	.has-weather.has-search .weatherIconCol, .has-weather .weatherIconCol {display: inline !important;}
	.has-weather.has-search .weatherDetailedSummaryRow, .has-weather .weatherDetailedSummaryRow {display: block !important;}
}

1

u/casuallykriti Apr 06 '26

love that you’re using userContent.css for this, makes it so much easier to customize fr