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!

Sharing some tips on good WordPress plugins over at the Dabbled|Studios (my web design site) blog today….

Check it out!

For a site I’m finishing up right now, I went through my list of WordPress Plugins that are really nice “must haves” for a new website. Since I was documenting what I was recommending for the client, I figured I’d share it with you guys as well. There are tons of great plugins out there, but these are a few that provide some great value…

Simple Trackback Validation Eliminates spam trackbacks by (1) checking if the IP address of the trackback sender is equal to the IP address of the webserver the trackback URL is referring to and (2) by retrieving the web page located at the URL used in the trackback and checking if the page contains a link to your blog.

(This one solved my Trackback Spam problems)

READ THE WHOLE THING

Oh, and the mandatory plug for Dabbled|Studios, for your website/graphic design needs!

The idea behind these efforts was to take up the challenge of building on a free platform something that was as easy to maintain as a blog, but didn’t look like a ‘blog’.

Well, the power of WordPress compels me to build a fabulous portfolio site using that platform.  Now, this is really not in the same spirit as the prior challenges, as a self hosted WordPress site is not a free option (note, the free option, WordPress.com, would not work for this).  And WordPress as a platform is considerably more suited to an effort like this–it’s hardly hacking when you’re just using the platform as designed!  So it’s not really fair to say that WordPress kicks the pants off the other options — they didn’t start in the same place.

So, I redid my friend Grieg’s photography website.  Check it out here!

If you guys are interested, I’ll do a tutorial/tips/lessons learned, and post it over at Dabbled|Studios.  I’m trying to move all my website related blogging over there.

In short, WordPress gives you a ton of tools and plugins which can really produce a professional look.  I will eventually get around to redo-ing my own portfolio site, which is still in Tumblr from the previous experiments.  WordPress is miles above the free options (like Tumblr or Blogger), but the free options do have one huge advantage… Free!  WordPress is technically free as well, but you do have to have your own hosting, which will run you around 5-10$ per month.  Not a huge expense, but not free either.

And if you want to see what we started with, you can see what the free Blogger version looked like here.

And of course, if you need a wedding or childrens photographer and you live in Georgia, do consider Grieg!

And yes, things are still a little broken. I’m trying to work through documenting all the “moving from Blogger to WordPress” steps and gotchas I ran into… and there were a bunch. If you’re interested I’ll write that up soon.

But I’d love any feedback you have for me!

And please, if you’ve been following Dabbled via Blogger’s Followers feature, update to the regular RSS feed at http://feeds.feedburner.com/Dabbled. If you were a blogger follower, please let me know if you received any posts after the “Sunday Inspirations” post.

edit: oops, just see something I might have broken!

xxoo
Dot

2-28-2011: Hi!  Although these instructions are, as far as I know, still quite valid, you may want to read this first.

As promised here’s a little info about making an art or photography portfolio using the free Tumblr blogging platform, like nancydorsner.com.

If you haven’t been following along, I set out on a quest to figure out how to use a blogging platform to create a portfolio site. (My first attempts were in Blogger, and you can view the write up here and see an example here.)

The idea was that “blogging” is easy, website design is not. Many creative types do not want to worry about keeping a portfolio site updated, and it’s easy for their sites to become out of date. Also, for struggling artists or photographers out there, they can get their feet wet with a portfolio site that doesn’t have any upfront or recurring cost to it.

Blogger had some limitations however, and while it was easy IF you already knew Blogger, it wasn’t as easy as I’d have liked.

Enter Tumblr.
Tumblelogs are incredibly easy to update. The Share on Tumblr bookmarklet added to your toolbar makes creating a new picture based post off a webpage almost effortless. Uploading a picture from your harddrive is also easy. For a portfolio site, these are key.

The one major con I have with Tumblr is it’s a relatively immature platform. It’s not got a huge feature set, and there are some buggy and awkward things. But I mostly encountered those in the customization of my blog, not in the actual post creation.

So, how to create your own:

First, create a Tumblelog. Takes 5 seconds.

Then from your dashboard, click Customize, then Info to setyour Title, Description (just make something up for now, its for testing purposes), and URL. You can either leave the address as yourname.tumblr.com or buy a domain (like $10 at Godaddy.com).

Also, grab the Share on Tumblr bookmarklet – it’s useful.

Now, don’t worry about format yet, just create some test content of pictures you want in your portfolio.
If you’re not already familiar with Tumblr, read this…
-If you already have pictures on flickr or somewhere similar, you can easily just go to the webpages and click your new bookmarklet button. In the window that pops up you’ll click Photo, then pick your picture. Caption it (replacing the current text/link). Click Advanced to tag it. I used the tags to create my categories.
-If you don’t have your work already online, just create a Photo post from your dashboard. Same process, just upload the file.

Also create a test Text post. (I use the Text post for my menus, and my About box)

Once you have a good number (say 10) of posts, you can now play around with the theme.

Your tumblelog’s look is determined by it’s theme. There are some interesting theme templates already out there. If one of these is to your liking, just snag it and go!

Check out these themes below, and install them each in turn on your tumblelog to see if they work for you.

First, check out the several different versions at hasaportfolio.com. There are several example sites at the bottom of the page, I love this one. I love the way this theme opens up the pictures on top of the page. Great for usability. He’ll also provide you a free URL – yourname.hasaportfolio.com which is pretty neat. (Free, but it’s nice to Donate if you use it)
This is easily the simplest and most usable of the lot.

I based mine off of this one: Beauty by Milo317 (Go here, and scroll or search for Beauty). But I made a bunch of changes to it to fit my needs.

Other cool ones for a portfolio:
Photoboard by Ben Delaney
Museum Theme by paulgiacherio
(Instructions to install at links)

You now have the basics for a portfolio. You’ll want to tweak it so it has your contact info, and whatever else you want.
If you’re comfortable with it, don’t be afraid to customize the theme (click Customize on your dashboard, and many themes let you easily set colors). Tumblr has instructions.

Also set up the Advanced tab (# of posts per page, etc). It’s pretty self explanatory.

Note: If you want to customize your site past the free templates I’ve given you, and you don’t have even a very basic understanding (or want to learn) CSS/HTML, you’ll probably want to hire someone to get the initial set up for you. That will require an upfront cost, but you won’t have any recurring cost since you have a free platform.

Some things I specifically did on mine:
– I used tags to categorize the Photo Posts, to create my menus (like robots, watercolors, etc) and just linked them with a regular href link: http://dorsner.tumblr.com/tagged/robots
– I used “Text” Posts for an About page, menu pages, etc. Some themes i linked to above don’t display text boxes, so if your theme doesn’t, you’d need to put your menu (if you want one) in the Description, or elsewhere on the page. Same for contact info, etc.
– I used an image for the background. A pretty easy theme tweak. If there is already an background image, just replace it with a URL to yours.
– Items display in the order of post date, so to change the order I manually changed the date of the post.
– Changed the links on the menu bars to more appropriate links (an easy fix with basic html knowledge)
– and a bunch of other more complex stuff! ..hence my Note above!

Once you’re happy with your site layout, just add content!

I hope this was helpful, or at least interesting. I do like tumblr as a blogging platform as well. In fact, you can visit my tumblr link blog HERE–it’s mostly random cool stuff I find (some of which ends up on Dabbled) and also my twitter tweets.

Some background:
A while back I wrote about my quest to create an Art Portfolio website using Blogger (or any blog based engine). The idea was that didn’t look like a blog, but would be as easy to update as a blog, since most creative types don’t want to spend a lot of time keeping a website up to date.
Here are a couple of the sites I created using Blogger
-My old art portfolio site: http://dorsner.blogspot.com/
-A friend’s photography portfolio site: Grieg Wehr Photography

Several people wrote to me that they really enjoyed using my tutorial–and I’m really glad to have helped!

Well, not content to rest on my laurels, I’ve created version 3.0 of my art portfolio site: nancydorsner.com

This is created in another blogging platform, Tumblr, and I think it’s even more well suited for something like this.

I’ll write up a more detailed post about how to create a portfolio site similar to this, and some other ideas I found while exploring the tumblr platform, later this week. EDIT : Here’s the WRITEUP

So, I would really love some feedback on the new site. Usability, art choices, and so forth. Hope you like it! Feel free to leave feedback here, or email me at nancy [at] dabbled.org

Related:
How to Use Tumblr as a Portfolio site
An exercise in using Blogger to create an art portfolio site
Some details on how to create the art/photog site using blogger
Version 2 of the art site

-My friend’s photography portfolio site: Grieg Wehr Photography

In other news, a photo I took at Dragon*con has been Boing Boing’ed!. So if you got here via Boing Boing, welcome, and if you like artsy, craftsy, geeky stuff, check out the place!

Coming tomorrow, the second installment of the Dabbled Interview Series: Diana Evans, an artist and illustrator and prolific blog proprietress from Ontario, Canada. Be sure to check it out!

And a big thank you for the feedback on my the Art Portfolio made out of Blogger blog — I’ve made some changes based on your feedback, check it out!! dorsner.blogspot.com (if you still want to see the original flash component that was on the front page, click on the link under the current one. Several people found the first one confusing.) Feedback is more than welcome, it is begged for! :)

Is there interest on a tutorial on the Baby Elepurse?

Now for the winner of the Shrinky Dink Test Lab comment contest!
from random.org..
Random Integer Generator
Here are your random numbers:
51
Timestamp: 2008-07-15 17:55:55 UTC
This means that lindsey is the winner of a collection of the experiments! Lindsey, please email me to claim your prize. (dot at dabbled.org)

• 7/08: Steps to create a portfolio in Blogger If you already know how to blog in Blogger, this is a pretty easy option. It’s not quite as easy to keep updated as Tumblr though. HTML skills help.
• 3/09: Steps to create a portfolio in Tumblr (and some advantages over Blogger) Tumblr platform is not as mature as Blogger’s, but adding new portfolio items is easy.
• A Site done in Blogger (more linked here)
• A Site done in Tumblr (more here)

I’ve been researching this for a while, and I’m glad to share what I’ve learned/collected with you. If this is useful to you, I’d adore some link-love back to dabbled.org!

——————
One of my goals for my sabbatical was to create a new art portfolio site. A photographer friend and I were discussing how it’s such a pain to keep portfolio sites updated, and I was thinking it would be really cool to see whether I could create one using Blogger, that would look like an art site, not a blog–but be as easy to update as a blog. I figured this had to have already been done, but I wasn’t having much luck with my google-fu finding anything like what I was looking for. There seems to be no standard art or photography portfolio template out there. So I decided to do it myself. (Note that I have very limited development skills, having never really messed around with xml or css or any kind of blog template, other than tweaking the dabbled one) It’s not finished yet, (I still can’t figure out how to make the right column start at the top of the page, not under the header), but I think it’s pretty decent for an artist or photographer portfolio site totally done in Blogger.

Since it took me 3 days of trial and error (and one episode of messing up the dabbled.org template by accident) I would love some feedback on the layout/usability etc. Not really looking for feedback on the art (unless you want to tell me which ones should stay and which should go), more on the website itself. Like should each picture be in an individual post rather than scrolling down to see a collection? Is it annoying to link things back to flickr? Does the flash on the main page work/look good? Are the categories good?

And if anyone would like information or instructions on how to do this, I can write something up..
edit: here’s some of the instructions. I’m sure i’ve forgotten alot, so ask questions..

dorsner.blogspot.com

Mar09 Edit: You may also want to check out my new version of a portfolio site using Tumblr instead of Blogger.