An introduction to your error 404 page

Many sites (not all) have at least one custom error 404 page, although WordPress usually has this by default within each default theme. Morphology has one that gives you some flexibility in customizing it. By default, this is what it should look like without doing anything:

DEMO

You can edit the colours for text, the button, and you can also change the background image.

  1. Go to Appearance >> Customize >> Error Page Options
  2. Change the colours to your text and for your button
  3. If you want to change the background image, you can use the Select Image button to upload your own.
  4. Once done, you can click “Save & Publish”

Modify Elements Not in the Customizer

If you need to change other elements within the error page, you will need to use a child theme and then copy the 404.php file into the child theme and then you can make your changes there. 

If you need to change the text, you will need to use the child theme method as above, or create a new translation file and modify the text strings from that.

Transparent Background

You will notice there is a transparent background bar in the middle of the page. This one you will need to do it with custom CSS added to the Additional CSs tab in the Customizer. The CSS that is currently doing the transparent background is the background colour part of the following code which uses rgba colour with a transparency of 0.4 (which means 40%)

 

#error-overlay {
 width: 100%;
 background-color: rgba(0,0,0,0.4);
 position: relative;
 top: 0;
 left: 0;
 right: 0;
 margin: 0 auto;
 padding: 40px 20px 60px 20px;
 text-align: center;
 -webkit-transform: none;
 -ms-transform: none;
 transform: none;
 color: #fff;
}