How do I customize the error pages in Firefox 24?

Question

I'd like to customize the HTLM/CSS/JavaScript of all the Firefox 24 error pages, i.e. the network connectivity lost, DNS and other standard error pages.

Answer 1

Hello ekan,
This can be done, but you're going to need to get pretty dirty to get it done. Ready?
First, learn about userContent.css:
http://kb.mozillazine.org/UserContent.css
http://kb.mozillazine.org/Profile_folder
Now, the easiest way to learn about the elements on the error page is to go to the source. So, go to the chrome folder in the Firefox program folder, usually C:\Program Files\Mozilla Firefox\chrome in Windows Explorer. Find the file called classic.jar and copy that somewhere else. Rename classic.jar to a .zip file and extract it, preferably to a folder called classic at whatever location you are at. Then, open the classic folder and navigate to ...\classic\skin\classic\global and find the file called netError.css.
Open the netError.css file in Wordpad (Notepad doesn't seem to work for me because then the lines all run together). See all the code that starts with the # symbol? Those are the things you can easily change. Copy all the #ELEMENT code into your userContent.css file.
Now you can start making changes to see what you like. I would make small changes at a time to see if it works the way you want. After each change, you need to close and restart Fx. Here's one to get you going:
CODE: SELECT ALL
#errorPageContainer {
-moz-border-radius: 0px !important;
background-color: red !important;
That should make the box that surrounds the error message be red with square corners instead of white with a rounded corner border. Remember that before every semi-colon, you need to put !important or the change won't do anything.