In this tutorial I’ll design a simple 404 error page for this web site as I promise. The design is very simple and it’s  purpose is to give some ideas to the newbies. Hope you will find it useful.

So after I have the design the only thing I will o is to add the image as a background from my CSS file and then center the text. It’s an easy stuff.

Here’s my design for this page. This is how I want it to look (example): 404how-should-look

I’ll remove the text as I said and I’ll add it in my 404 php file.I need only this image for my background:


How to set this as a background in my 404 page. Let’s see what I’ve got.

I have a 404.php page. If you don’t have it you must create one, more about 404 pages you can find in wordpress web site. Here is the HTML which I have in my page:

<div id=”error”>
<h2>Error 404 – page you search for: Not Found!</h2>
Why not try to use our search box or go back to <a
title=”For better designs” href=””>Home

In my CSS I will create a new style which name is ”error” like the name of my div. And there I’ll use this CSS:

.error {
margin-top: 20px;
margin-right: 35px;
border: 1px dotted #ccc;
padding-top: 225px;

And I am done with my simple 404 page. Hope you liked this and it will be in use for you. After this tutorial I will not make any new tutorials and adds for this theme. So what next? Next I’ll upload this theme for free download and then I’ll begin to design new themes for this web site. Every design I’ll make into a tutorial and I’ll upload it for free download after that. Stay with me, my designs are currently starting, This was just the begining for the newbie users of wordpress.

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Graphics designer and web developer from Bulgaria. Working as a freelancer from 2 years I have big experience in graphics design. In my spare time I make tutorials in my web site for tutorials: This is one of my hobbies. I also love Photography, sports and especially martial arts and free runing.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge