The code

In part 1 we created a cool graphic to put on your 404 page.  (Part 1: Photoshop tutorial to make a “torn out” image)

Now, you need to integrate it into your 404 page, which is the page that comes up when a page is not found on the website. Again, I’ll be using the 404 page for Foodwhirl.com in this tutorial.

This tutorial will be written from a WordPress point of view, but I would assume if you have a bit of knowledge, you could use similar steps on any blogging platform.  Also, there are multiple ways to accomplish this, I just tried to come up with a way that is easy to explain and doesn’t require a ton of knowledge.  You should be able to do this without being an expert at getting into the code on WordPress, but be aware this does require some messing with code.

This is also a great tutorial if you’ve always wanted to know a little more about how to change your wordpress theme a bit.

If you’re going to be messing around with your CSS, a great tool to have is Firebug.   You install it on Firefox and then right click and choose Inspect Element.  That lets you view and change (temporarily) your css on the fly. 

I also recommend you install an FTP program, like Filezilla, or Fireftp, to make it easy to upload files.

Part 2:  Adding the graphic to your website 404 Page

Get set up

First off, take a look at your current 404 page.  If you want to know what it looks like, just type your web address, slash a page that doesn’t exist.  So for example:  http://Dabbled.org/sldalkgj will take you to Dabbled’s 404 page (which is what inspired this tutorial!) .

Note: If you don’t get a Page Not Found when you try this on your own site (like the homepage just reloads) then you’re missing your 404.php template in your WordPress theme.

So, we’ll need access to 2 files to fancy up our page:  style.css and 404.php.  You’ll find them in the wp-content/themes/yourthemename directory.   I recommend any time you’re going to mess around with your theme files, getting them via FTP and saving a local copy to work on, as well as a backup copy in case you screw up royally.

You’ll need a text editor.  I always use Notepad++, but regular Notepad or any plain text editor will work.  DO NOT use Word or anything like that.

So, we now both of our files open in our text editor.

Upload your image

You image must be on your server.  I would normally put it in wp-content/themes/yourthemename/images, and that’s what this tutorial assumes.  So upload 404image.png (or whatever yours is called) to this directory.

404.php

The 404.php page is what loads when you get a page not found error.  It will look different depending on your theme, but they will all pretty much have the same elements.

What we are basically going to do here is use the new graphic as a background on a div on the 404 page.  Don’t worry if that doesn’t make sense, I’ll walk you through.

Here is the code in my 404.php file for foodwhirl.com.  Yours probably looks similar.

<?php get_header(); ?>  

        <div id="container">    
            <div id="content">

            <div id="post-0" class="post error404 not-found">
                    <h1><?php _e( 'Not Found', 'your-theme' ); ?></h1>
                    <div>
                        <p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
                    <?php get_search_form(); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->            

            </div><!-- #content -->        
        </div><!-- #container -->

<?php get_sidebar(); ?>    
<?php get_footer(); ?>

Look for the part of the page that has the 404 error text.  Something like “We’re sorry, but your page cannot be found”.  You can change this to something clever if you like by just modifying the text.  Note, to be safe, I’d stay away from special characters, apostrophes, and so forth in the error text.

Now, look for the div that surrounds your error text.  In the case of what I pasted above, div id=”content” is what we’re looking for (container would likely work too), and change it like so:

<div id="content">  becomes  <div id="content404">

(Techie note: there are more elegant ways to do this, but this is the easiest to explain in layman’s terms)

style.css

Next on to your style.css file.

You’re going to add this to the end of your css file.

 
#content404 {
    background: url(images/404image.png) no-repeat transparent;
    border: none;
    float: left;
    width: 653px;
    min-height: 600px;
}

The important parts of this are background (that sets the background to our new image), and min-height which i set to taller than my image.  The other items I got from the #content section of the css file.  Start with just adding the background, and if things look wonky go in and search for #content, and copy lines to your new #content404.

Now my 404 page looks like this:

The torn section looks fine, but the words are not in the right place, and it’s only showing up in that small section of the page.

So, improvements.

I decide I don’t want to show the sidebar, so I go to 404.php and remove the line:

<?php get_sidebar(); ?>

Then I centered the image, so my css now looks like this:

#content404 {

}

If you want your 404 image to overlay the header area (like it does on the Dabbled.org example) just move it up a little on the screen by adding something like:  margin-top: -50px;  to the #content404 section.

The Error Text

I also want to move the text so it displays on top of the image.

To do that I need to target the post text, which in my example would be this:

<div id="post-0" class="post error404 not-found">

You’ll notice there is already a class identified called error404.  If there isn’t one on yours, just add it in.

So in my css file I add:

.error404 {
background-color: rgba(256, 256, 256, .5);
font-size: 1.2em;
padding-left: 300px;
    padding-top: 50px;
    width: 200px;
}

• The background color setting adds a semi-transparent white box behind my text for better readability against the image.
• I increased the font-size to my liking, and used the padding settings to move the text to where I wanted it on the screen.
• I set the width of the text area as well.

Now this is what I have:

Obviously, your settings will be different on your text area to get it to the right spot.  This is where firebug comes in really handy, as you can Inspect Element and change width and padding to get it where you want it, then just copy those settings over to your style.css.

And here it is in action: http://foodwhirl.com/notarealurl

That’s it!

So several people have asked how to do something like this themselves. Obviously you’ll probably want to do something different than I have, using an image or a theme that fits with your site.

So, to show you a slightly different take with this tutorial, I’m going to walk you through doing a 404 page for Foodwhirl.com.  Since foodwhirl is a recipe site, I’ll use a photograph instead of the little robot drawing, and an image more appropriate to food.  A search through Creative Commons licensed (I adore CC licensing!)  images on flickr found me this ‘empty refrigerator‘ image, which I thought would be cute for a Page not Found on a food site.

Part 1 will address how to create the image for use on your webpage.  Part 2 will explain how to make it part of your 404 webpage, even if you’re pretty clueless around code.  It will be written with WordPress websites in mind, but you should be able to take those principles and apply to any website.

Part 1:  Create the Image.

For this step I’m using Photoshop.  You could probably do this with other image software as well*

Get an image to use behind your torn background.

This could be a photograph or a drawing, preferably something funny that relates to your site.  If you have a crochet site, for example, a kitten tangled in yarn could be cute.  (oops, the kitten got into the yarn and now we can’t find your page!).  Maybe you want to have a picture of exposed gears like they are seeing the background machinery that makes your website work.  Use your imagination.

Get your site’s background.

Create a new image in Photoshop, at about 1000×1000 px, at 72 pix per inch, just to have plenty of room to work.

Make a new layer and make that the same color as the background of your site.

(If your site is a solid color, you’ll need that color.  If your site has a texture overlay as the background, get the texture.  Note, if you site is say white, with some blue designs on it, don’t worry about the designs, you’ll just need white.  You’re just looking for the primary color of the background of your site.  Foodwhirl is white, so that’s all I need for that.  For Dabbled I actually used the .jpg that creates the watercolor paper look on the site.  Taking a screenshot of the site background will also work   But minimally, you want to get as close to the site color as you can.)

The Torn Section: Sizing

Next you’re going to want to figure out how big to make your torn section. For Dabbled, my image is about 600×600 at it’s widest points.  You’ll want to take into account how much space you have on your screen, whether you want to overlap the header at all, and whether you want to leave your toolbars visible.  For Foodwhirl, I think I’ll keep the size about the same, or maybe a little smaller.

I’m going for about 600×500 here.

• Paste your image into a separate layer, shown above.
• Turn your background into a layer if it’s not one already (rightclick to do so) and set it’s opacity to 75%.
• Move it on top of the photo layer (shown below)
• Turn off “Snap to Guides” (View|Snap To) and draw an odd shaped space with your lasso tool.

• Once you have a shape you like (remember, you’ll need room to add text to this, so space accordingly), make sure you are on the solid background layer, and click ‘delete’.
• Set your layer back to 100%, so you can’t see through it anymore.

• Now Expand the selection by about 6 px. (on my old PS version that’s Select|Modify|Expand)
• If you like, you can nudge the select a pixel to the right using the arrow key (makes it a little less uniform).
• Now,  create a new layer, and fill the shape with any color you want.  Hide that layer (you’ll need it later).
• Go back to your background layer.

Your Torn Edges

The area you now have selected is the area that will simulate the thickness of the paper where the multiple layers show up when you tear it.

Color-wise, you’ll want to think about what color you would see if you tore paper that is the color of your background.  A red background, for example, would probably look dark pink inside.  A creamy background could get away with white.

For my pure white background, I’m going to set both my foreground and background to a very light offwhite/cream color, and use the Torn Edges filter, as well as the Add Noise filter.

You’ll want to play around with this to get a good effect.  Experiment with different colors and filters depending on your background.

This is really subtle (maybe too much so) but this is what mine looks like zoomed to 280%

Next we add some depth, the quick and dirty way.  Our good friend the dropshadow layer style.

Play around with the settings, but this is what I used for mine. (Click to view larger)

Now we have our photo, we have our background with torn edges, we just need to cut it out.

• First, merge your background color layer, with the image layer.
• Remember that layer I told you to create earlier, and just fill the shape with any color?
  Go unhide that layer, and click on the shape with the magic wand tool to select it.
  Now go back to your merged layer, Select Inverse, and delete.
• (OK, for this example you really don’t have to do it this way, as you could just select the white background, but this is a simple methods and works with all backgrounds, even textured and multicolored.)

All that will be left is your lovely torn out piece!

• Trim this (Image|Trim) and Save For Web as a PNG.

Look, we made a hole!

Note, I don’t think this is quite as effective as the one on Dabbled, as the watercolor paper leads to a better effect than just the plain white, but it’s still pretty cool.

So, next will be part two where I explain how to make it part of your webpage:  Torn Page Tutorial Part 2: Put a cool graphic on your 404 page (WordPress).
—–

*I’m a photoshop girl myself, but if you don’t have it… there’s a learning curve, but I recommend Gimp for those who like free and powerful image manipulation. 

Faux food gifts are a fun idea that’s been floating around out there for a while. You’ve probably seen diaper cakes or sock cupcakes, but here’s a new twist! Jolene from Creative Dollar used an assortment of baby essentials to create “sushi”, which she presented all wrapped up on a plate. Hers was a baby girl gift and included hair bows; for boys, you could use more socks or other small soft goods instead. Sushi-loving moms-to-be will love this creative presentation!

Get the instructions here: http://dollarstorecrafts.com/2011/08/make-a-sushi-baby-shower-gift/

Here is one set, and there are a bunch more at the link.

I’ve seen several cute 404 pages recently, but mine was inspired by the one on Swiss Miss (great design site). Here’s her’s.

If anyone’s interested, I’ll write up a quick tutorial on how to make the graphic in photoshop, and also how to incorporate it into your 404 page.

PS: you can see another version of the same thing at my sometimes updated art site: http://nancydorsner.com/sdjflk

so stay tuned, this isn’t final… more to come!

My favorite are the Twitter ones, but they are all a bunch of fun.

While we are on the subject of social media, i might as well plug my own!:

• I’m enjoying checking out Google+, though I’m not really sure I have the hang of it yet…  If you want to find me there you can find me at nancydorsner.com/+.
• On Twitter: DotatDabbled
• On Facebook : https://www.facebook.com/dabbledblog

Here are several more of the posters, and you can see more here: etsy

Just for Fun

• When life gives you lemons, make bacon… and more. Love these:  Always Remember: A Wise Idea

Foodilicious

• Step by Step Deconstructed Sushi Bowl at the always awesome Wisdom of the Moon – TASTY!
• More tasty goodness: Hummus Jalapeño Poppers at Duhlicious
• I’d love to try this:  home-curing salmon (Copper River sockeye gravlax with goat cheese over a bagel) 
• Rubik’s Battenburg – LOVE this rubik’s cube cake by @stastycook
• Awesomely cute Angry Birds Bento box – Tutorial on Foodwhirl!

DIY / Crafty

• Emergency stakes at Superpunch. Break off in case of sparkly vampires. more.
• Inner Cycle Lamp at Dudecraft

• Make This: Drilled Natural Stone Jewelry Tutorial | papernstitch “Want to learn how to drill holes in beach stones? Well, I’ve got good news for you: it’s pretty easy and I’d love to tell you how it’s done.”