It functions nicely, and is actually a helpful element to the page.  You could probably find some way in which you could implement something into one of your designs.  jQueryForDesigners did a tutorial awhile back on how to recreate this effect using javascript. I have to say that is was a wonderful tutorial and produced an excellent finished product.  To be honest, everything on jQueryForDesigners is nothing short of excellent.  The thing with this popup bubble is that it doesn’t work with javascript disabled.  If you have important information in here, you probably want a more light-weight and reliable solution.

Luckily, we have CSS to save us. CSS is certainly light weight, and you don’t have to worry about people disabling it.  We can recreate the effect used on the Coda website, without the use of image or javascript.  Before we do though, let’s take a look at what we want to accomplish.

Problems

What we want to create should be completely without images and javascript. This means we’ll have to use some CSS3, and progressive enhancement techniques.
We want to bubble to smoothly transition into visibility when a mouse over event occurs on the download image. We also want the popup to stay visible if the mouse is on the popup itself.

There will be no restrictions on height or width of the popup, because there aren’t any images to define that height or width.

Another plus is, without the external jQuery, javascript, and image files, we save a few http requests that shouldn’t be necessary for such a simple function.

HTML Markup

The markup for this should be similar to the following.

	<div class="bubbleInfo">
		<a href="#">
			<img src="path-to-your-image" alt="download" id="download" />
		</a>
		<div id="dpop" class="popup">
		        <!--INSERT YOUR CONTENT HERE-->
		</div><!--#dpop-->
	</div><!--#bubbleInfo-->

Here we wrapped both the download image, and the popup bubble in a container.  The actual image is a link, but doesn’t have any affect on the popup.  So the two elements inside our wrapper div are completely separate.

When there is a hover event on the wrapper div, that triggers the popup to transition into visibility.

CSS

Unlike with the markup there is a good amount of CSS involved in getting this to work.  Let’s look at what we want to accomplish with the CSS here

• Rounded corners
• Drop shadow
• Transition the location, and the visibility of the actual popup when the hover event occurs
• Graceful degradation in less modern browsers
• Write it with progressive enhancement

If you look at the bubble on the coda website, it slides upwards, and the opacity changes when you hover over.  We can accomplish this by manipulating the top, and opacity values of the popup.

Let’s first style the bubble.

#dpop {
	background:#FFF;
	border:1px solid #a0c7ff;
	display:block;
	left:-30px;
	opacity:0;
	padding:10px;
	position:absolute;
	top:-90px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:rgba(68,68,68,.5) 0px 3px 8px;}

These styles only apply to what the bubble will look like when it is partially visible.  The opacity:0 sets the div to be completely hidden from view.

Later, we will set a duration for the popup to transition into visibility.  It is necessary to define these styles on the hidden popup so we don’t affect the look of the partially visible popup.  Don’t worry, it’ll all make sense soon.

Next, we’ll style the visible bubble.  The only properties we need to change in this example are the opacity and the top value.

.bubbleInfo:hover > #dpop {									background:#FFF;border:1px solid #a0c7ff;display:block;left:-30px;opacity:1;padding:10px;position:absolute;top:-100px;-moz-border-radius:5px;
										-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:rgba(68,68,68,.5) 0px 3px 8px;}

We know that .bubbleInfo is our wrapper div.

But the code we used for our selector may seem a bit strange.  Essentially, it  translates to “When #dpop is a child of .bubbleInfo:hover, apply this styling”.

The trick here is that #dpop can only be a child of .bubbleInfo:hover when .bubbleInfo is being hovered over, otherwise .bubbleInfo:hover doesn’t exist.  This type of selector is more dynamic than something you’d see more commonly.  That’s thinking outside the box.
Let’s see what we have so far.  We have a styled bubble with both a visible and hidden state. Our only problem is that it isn’t a smooth transition, and the bubble ends up partly off the page.  Since it’s absolutely positioned, you just need to add one line of code to make sure it’s absolutely positioned relative to its wrapper div.  Don’t worry, it’s a simpler concept than I’m making it sound.  We’re really just adding position:relative to the wrapper div so we can contain the popup bubble.

.bubbleInfo {								position:relative;}/*Contains the popup bubble*/

Ok, know we’re rocking.

The bubble should appear when you hover over the download image, and then disappear when you hover out.  Unfortunately, for some browsers, that’s as good as it’s gonna get. But we’ll use some progressive enhancement so people using better browsers get a few extra treats.

.bubbleInfo:hover > #dpop, .bubbleInfo > #dpop, #dpop {									-webkit-transition-duration: .25s; -webkit-transition-property: opacity,top;}

This uses CSS3 transitions to make the opacity and top properties smoothly change.  You’ll notice that now the change is less abrupt than it was previously.
One last thing before we’re done.  On the Coda website, the bubble has a little tail on the bottom, like a speech bubble.  We can recreate this with CSS.  There is an old trick that involves using borders to create triangles, we can take advantage of this in our code.

.bubbleInfo:hover > #dpop:after, #dpop:after {
	border-color:#fff transparent transparent;
	border-style:solid;
	border-width:10px 10px;
	bottom:-20px;
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	height:0;
	left:75px;
	position:absolute;
	width:0;
	}

There are some downfalls to this however.  The triangle is essentially just a border, so we can’t apply any CSS properties such as box-shadow, or borders, without thinks going a bit wonky.  It isn’t incredibly noticeable, but you might want to consider using an image nonetheless.

Wrapup

Go ahead and save all of your files, and

BAM!  You’ve got yourself a fully working CSS popup bubble.

This is pure CSS, with no images used at all.  It doesn’t look exactly like the one on the Coda website, but it’s pretty darn close.

If you want to implement this into your designs, you may want to consider whether it’s okay to lose some of the cool effects in older browsers.  Personally, if older browsers don’t get some fancy shadows and rounded corners, I really don’t care.  As long as it works, right?

Here are a few links to consider when customizing this effect -

• Panic Website
• jQuery Coda Bubble Tutorial
• Attribute Selecters
• CSS Speech Bubbles

Enjoy

View Demo / Download Files

In WordPress you can easily list out the categories that a post was posted in. This is done with a single tag, that must be within the Loop.

<?php the_category(', '); ?>

You can change a few parameters of this tag, including the separator. This is the piece of text that separates each category if there’re more than one. In the code I gave you, it is a comma. You can change it to a bullet •, an arrow >, or whatever else suits you.

This piece of code will display links to each of the individual category pages. You can change the structure of these links on the Permalinks page in you WordPress admin settings.

For example, if you use articles as your base, then your category pages will be linked as such
http://example.com/articles/uncategorized

When WordPress is trying to display the category page, it is going to look for certain template files. If they aren’t found, then it looks for the next one. For category page, WordPress use the category.php file. You are welcome to write out your own category.php file, but I typically use the next template file, which is archive.php. For more info on what template files WordPress uses to render pages, visit DigWP.

Anyway, your archive or category page can typically be a modified version of the Loop used on the index page. If you want to leave out something, or add some type of content, then go ahead. One thing you may want to do is display a descriptive heading. This tells the user what they’re viewing exactly. I use the following

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="archive">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2 class="archive">Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="archive">Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="archive">Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="archive">Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="archive">Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="archive">Blog Archives</h2>
<?php } ?>

This piece of code runs through several if and elseif statements to determine what type of page you’re viewing, and display a heading accordingly. You can use it in your own archives page by inserting the above code after

<?php if (have_posts()) : ?>

in your archive.php file.

Lastly, let’s cover listing out your blogs categories. This is easily done with the following code -

<?php wp_list_categories( ); ?>

This will list out all of the categories and their children that exist on your blog. You can do things to customize this output such as exclude categories, or change the title of the list

<?php wp_list_categories('exclude=1,2&title_li=New Title'); ?>

Or only show the parent categories.

wp_list_categories('depth=1'); ?>

The list goes on and on.

You may have noticed on your WordPress admin category page that you can add descriptions to the categories. Well, with a bit of php magic you can list out the names of the categories along with their descriptions.

First, go into your functions.php file and insert the following function

function advanced_cat () {
	$args=array(
		'orderby' => 'name',
		'order' => 'ASC',
		'pad_counts' => '1'
	);
	$categories=get_categories($args);
		foreach($categories as $category) {
			echo '<li><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '><span>' . $category->name.'</span> ';
			echo '<span>'. $category->description . '</span></a></li>';
		}
}

This is creating a foreach statement that defines the display for each category in the list. In this case we have it echoing the entire category name with its description inside an li tag. The category name is displayed within a link, and a span. The categories description is then outputted inside a span, as well as within the same link and list element that the category name was listed in. You can of course customize it and add classes, or more data.

In order to actually display our list you need to put the following code somewhere in your theme -

<?php advanced_cat(); ?>

This simply outputs the function we created earlier in the functions.php file.

Fin

Well that concludes today’s post. Thanks go out to comment author – Benje for bringing up the question on how to accomplish this.

There are a few key features that Carpe Diem will have that may be of interest to you -

• WordPress 2.9+ Ready
• Widgetized Sidebar
• Fully customizable via organized theme options page
• Support for all modern Webkit, Gecko, and Opera based browsers
• Support for IE6, IE7, and IE8
• Beautiful design
• CSS3 fanciness
• Adsense Ready, with Ad manager admin panel
• Fully layered logo PSD
• Custom color scheme
• Custom Logo / Favicon upload
• Fully commented CSS
• Web 2.0, TABLELESS design
• Easily Editable, Fully Commented, CSS
• Easily Editable, Fully Commented, Markup
• Integrated Flickr Area
• Integrated Twitter Feed
• Threaded and Paginated Comments
• Integrated Twitter Feed
• Integrated Flickr Feed
• Featured post slider with your choice of s3Slider, Cu3er, or nothing
• Did I mention it’s FREE?

Well, those are just a few things that’ll make this slice special.
The theme is quickly nearing its release date.

The really unique and amazing thing about this theme is it’s Theme Options page. User control like this just doesn’t exist in other free themes. Every aspect of the sidebar, the ads, the featured post slider, everything is customizable by you. The theme options page is organized in an accordian style, which just makes things cooler.

Anyway, I can’t wait to release this theme as I’m sure you guys will love it.

::selection {										background: #7fc548; color: white;text-shadow:none;/* Safari */}
::-moz-selection {										background:#7fc548; color: white;text-shadow:none;/* Firefox */}

You can use other properties to customize the ::selections pseudo class, but it isn’t recommended. You don’t want the padding of elements changing when you highlight them now do you?

Chalkdust is a beautifully, minimalistic, dark theme. It’ll add life and style to any site. Don’t like red? Don’t have a flickr account? Chalkdust can easily change that for you by way of a few mouse clicks. You can have virtually ANY color scheme that suites you.

Chalkdust comes with an integrated Flickr widget, as well as an integrated Twitter widget. If that weren’t already great, Chalkdust makes it even better by allowing you to customize these widgets to your liking. This is done via the built-in Theme Options page. That means that any change you want to make to your theme can be easily done without getting your hands dirty with code. From the theme options page you can do things such as:

• Customize colors
• Customize the Built-in Twitter widget
• Choose to display the integrated flickr widget
• Upload your own custom logo
• Specify detailed settings for your logo
• View Theme Options Page HERE

If that’s not enough for you, check out some of the other amazing features packed into Chalkdust.

• WordPress 2.6, 2.7, 2.8+ Ready
• Widgetized Footer
• Fully customizable via organized theme options page
• Support for all modern Webkit, Gecko, and Opera based browsers
• Support for IE7, and IE8
• Minimalistic, yet elegant design design
• CSS3 fanciness
• Sidebarless template, Which places focus on the main content
• Fully layered logo PSD
• Any custom color scheme
• Built-in custom logo image upload, upload your custom logo with ease
• Detailed readme.txt for help with installing and using Chalkdust
• Web 2.0, TABLELESS design
• Easily Editable, Fully Commented, CSS
• Easily Editable, Fully Commented, Markup
• Integrated Flickr Feed
• Integrated Twitter Feed
• Gravatar Ready
• Threaded Comments
• Did I mention it’s FREE?

And that’s not all.  We just didn’t want to push the limits of the size of that box up there.

You may be wondering, how can something this wonderful, be absolutely free, what’s the catch?  There is not catch, there aren’t even any sponsored links in the footer, because I’m just that nice (no one wanted to sponsor it )

Well, what are you waiting for?! Go ahead and check it out!

• Preview This Theme
• Download Chalkdust Wordpress Theme Free
• Downloaded 6 times

Note – You may not remove, or modfy the links in the footer, in any way shape or form.

Like this theme? The best best way to get more is to – Follow me on Twitter or subscribe to our RSS Feed via email.

If you don’t go through the effort of designing a 404 page, a few things could happen. The browser might show its own version of a 404 page -

Internet Explorer

Google Chrome

Or your host may have a default 404 that it serves up to all its websites.  This is more common on free hosts, and sometimes you can’t override it.  And of course there’s the bland and generic Apache 404 page.

Anyway, the thing about these 404 pages is they really aren’t helpful.  Sure, we’ve got a google search bar, and some explanations of why this might be happening, but none of that relates to the actual website.  Your job as the developer should be the makes your users lives as easy and simple as possible.  They aren’t supposed to do the thinking, that’s your job.  So if you put  up your own custom 404 page with helpful links, a search bar, and a few other elements, your users will easily get to where they want to be, and love you just a little bit more for helping them accomplish that.

Now, what have you learned so far?  You need to have your own custom 404 page, and to help you accomplish that, I’ve provided you with a few best practices.

1.  Keep it Simple

On your 404 page, you should only have what needs to be there and nothing else.  Putting a joke, or a picture is fine, but you don’t want to fill up the page with useless content.

2.  Keep the Design Standard

Let’s say a user on this website is searching for something, and gets a 404.  Instead of the green and white that we all know and love, I decide to serve up some crazy purple page, with insane gradients and bokeh effects.  The average person will experience a lot of confusion.  For all he knows, this isn’t even the same website he was one seconds ago, how could it be?  It looks NOTHING like it.  In general, arriving on a 404 page  inspires confusion and irritation in the user.  You want to try to minimize that as much as possible.  So keep the design of your 404 page looking just like every other page on your website.  At least then, the user knows he’s on the right website, just not the right page.

3.  Useful Links

You don’t want to necessarily go listing out every post and page you’ve ever written, that could get rather enormous.  But listing out your recent posts, or your most popular posts is always a good idea.  Chances are, that’s where people want to be anyway.  On the off chance that none of the links you provide are helpful, offer them the opportunity to contact you.  That way you can be notified of the problem, if there is one, and you can fix it as soon as possible.

As well as the “Recent Posts”, “Popular Posts”, and contact  link, consider a link to a full archives page.  If it’s not on your archives page, chances are it doesn’t exist (or you have a malicious hacker on your hands).

4. Search

This is a definite must.  Maybe the page they’re looking for is in a different location, or the link changed.  Assuming you already have some sort of search feature built into your site, this is your opportunity to serve it up to them when they need it most.  Maybe they couldn’t find the page they were looking for, but chances are your search bar can (you coded it after all, if must be awesome ).

5. Jokes/Humour

This whole 404 thing might be an awkward moment for you and the user.  Try to lighten things up by adding a funny picture or joke.  Nine times out of ten, they laugh it off and forget the day that YOU failed finding the page they wanted.

(That was a joke right there, in case you didn’t notice.)

Showcase of 404 Pages

Okay, so now you KNOW what you need in your 404 page and why you need it.  But you still don’t know what you’re up against.  There are millions of 404 pages out there, so you’ve got quite a bit of competition to design the best one.

CSS-Tricks

Chris Coyier actually shows you some of the code, as well as providing useful information.

Heinz

Everyones favorite brand of ketchup has its very own 404 page.

Twitter

Twitter’s own minimalistic 404 page.  It’s also worth noting that there is an actual user named @404 with one status update saying – Twitter couldn’t find what you were asking for.

ForTheLose

A simple 404 page.

CricketFeet

Why not cure the loneliness of a 404 page with a talking robot?

RealMacSoftware

One of the better 404 pages out there, functionality wise.

My very own 404 page. I think it’s pretty nice, if you have any suggestions, leave them in the comments.

Extra Reading

Want to know more?  Just for you little over-achievers out there, here’s some of the best posts out there on 404 pages.

• 404 Error Pages, One More Time
• 404 Best Practices
• Wanted: Your 404 Error Pages
• 404 Error Pages: Reloaded

Fin

That’s all folks, I hope you learned something.  Enjoy the world of 404, next we’ll do 503 (not really).

You may have noticed that there is a built in button in IE8 that can render the site as it would in IE7. If a user finds that a page doesn’t look the way it’s supposed to, they can click this button, and WALLAH! It’ll render just as it should in Internet Explorer 7. The laughable fact that Microsoft’s method of fixing rendering problems is to display the page in a legacy browser aside, what if you could just put a line of code in your design that accomplished the same thing as this button. Well, luckily you can.

<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />

This is a real saving grace in some cases. It’s so simple, you put one line of code in the head of the page, and BAM! You have one less browser to worry about.

Download / More Information

As mentioned in an earlier post, one method of fighting Internet Explorer, is putting a simple bar at the top of the page warning users that their browser is out of date. This is a very simple unobtrusive way to notify your users that their browsing experience could be better if they switched browsers. The thing with a lot of Internet Explorer users is that they don’t know how badly their choice of browser affects the web developer. There are even some who don’t know that other browser choices exist.

Download / More Information

Simply add this markup and CSS to your text design, and any users using IE7 and below will see a black and yellow strip of caution tape across the top of their screen.

I hope you enjoy using it, and find this method of IE fighting as effective as I have.

1. WhatTheFont

Ever see a cool font on a site that you would just LOVE to use in your next design?  You take a closer look, and realize it’s an image.  What do you do now?  Some people might just look through all their own fonts trying to find a match.  But that leads to a lot of extra and useless work.  Why not just automate the process?  That’s what WhatTheFont (WTF) is here for.  All you need is an image with text in it.  WTF will give you a list of fonts similar to the one in the picture, and you can pick the right one on your own.  I’ve been using this tool for awhile, and I rarely have a case where it can’t find the font I’m looking for.  But when I do, I just post on their forums.  Yes, believe it or not, they have a whole community of font-enthusiasts that can instantly recognize any font, and put a name to it.

2. My IP Neighbors

Most of us are on a shared server.  Meaning that there are a bunch of other websites on the same server that our site is on.  Maybe it’s just me, but I often find myself wondering, or needing to know, what other websites are on your sever.  I’ll be honest, it isn’t the greatest service.  It works, but I’ve noticed that it can randomly go into an “Under Construction” state for months at a time.  But it gets the job done.  After five minutes of using it, I know that my host packs me on to a server with hundreds of other sites, and I need to switch hosting providers.

3. Who Is Hosting This

This goes hand in hand with My IP Neighbors.  If you’re ever curious about who is hosting a certain website, then this is the place.  When you’re actually searching for a hosting provider, this is also a great tool.  You can check out who hosts those lightning fast sites that we all love so much.

4. CSS Superscrub

As a developer, loading times should always be one of your main concerns.  Simple things like getting rid of redundant calls and stripping uneeded content can significantly reduce the size of any CSS file.  CSS Superscrub does that all for you.  This could significantly decrease page load times, as well as give you a more organized, and overall, better stylesheet.  I highly recommend giving it a try.

5. DomainScour

Every new site starts with a domain.  The problem is finding one that works for you.  You probably want to know which ones are already registered.  And you probably want to be given different options, in case your first choice was already taken.  You probably know of a few tools that can easily accomplish this task.  But in my own opinion, DomainScour is one of the best out there.  Every time I need a domain, I head to DomainScour first.

Wrapup

Well, I hope these tools make your life easier.  I find myself constantly using one or the other, whether I have a reason to or not.

Anyway, now I’ll show you how to actually use this feature in your WordPress themes.

1. Activate

For some reason, the WordPress guys decided to not make the post thumbnail post automatically show up in the “Write Post” page.  You have to activate it via a line of code in your functions.php file.

So just open up functions.php in your favorite text editor, or create a blank file if it doesn’t exist already.  Add the following snippet somewhere in the file, making sure it is within the php start and end tags.

add_theme_support('post-thumbnails');

Now, there should be a box labeled post-thumbnail in the editor.  But if you want to be backwards compatible, use an if statement so versions of WordPress below 2.9 won’t get screwed up by this function.

if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' );

2. Display the Post Thumbnail in Your Theme

Now that you’ve gotten the feature activated and available for use, you need to add it to your theme somewhere.

Add the following code somewhere in the Loop

<?php the_post_thumbnail(); ?>

When you upload an image via the post-thumbnail feature it gives you several default size options.

The above code is essentially

<?php the_post_thumbnail('thumbnail'); ?>

But you can use different size such as

<?php the_post_thumbnail('full'); ?>

To display the full image.

<?php the_post_thumbnail(medium'); ?>

For medium sized images.

<?php the_post_thumbnail('large'); ?>

For large images.

These all output a generic img tag with a class of wp-post-image.

You can use this hook to apply styling to the image.

It is also possible to add a custom class to the outputted image, or customize the thumbnail size.

<?php the_post_thumbnail(array( 175,175), array( 'class' => 'alignleft' )); ?>

3. Check if the Post has a Thumbnail

If for whatever reason you need to check if the post actually has a thumbnail, use the following function -

<?php
	if ( has_post_thumbnail() )
		the_post_thumbnail( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

4. Make it Backwards Compatible

WPRecipes wrote a post on how to make the WordPress 2.9 post thumbnail feature degrade.  Here’s the code.  It just checks to see it the post thumbnail function exists.  If it does not, it serves up code for a post thumbnail that’ll work in older versions of WordPress.  This is useful for people that don’t want to go through all of their older post images and change them to be compatible with this new feature.

<?php
	if (  (function_exists('has_post_image')) && (has_post_image())  ) {
		the_post_image('thumbnail');
	} else {
		$postimageurl = get_post_meta($post->ID, 'post-image', true);
		if ($postimageurl) {
			echo '<img src="'.$postimageurl.'" alt="" />';
		}
	}
?>

5. Using the Post-Thumbnail Box

How many of you have used the media upload in the WordPress Editor before?

I know that for me, this was one of the first times.  Us hardcore web designers are too cool to use built in tools like “media uploads” when we have our fancy FTP software to do it ourselves, right? Right?

Well, while it may seem unusual and scary, you will be forced to venture into the unknown area of the media upload when using the post thumbnail function.  By the way, I hope I’m not the only one that just noticed that button a few minutes ago, otherwise I’ll sound like a jerk.

Anyway, you have the post thumbnail activated, and you also have it actually inserted into the theme.  The only thing left to do is upload and image and test this baby out.  Just click the “Set thumbnail” link, and up comes the media upload window.  I’m sure you can figure out how to upload your image, and then all you have to do is select “use as thumbnail”.  It’s really that easy.

That’s A Wrap

Well, hopefully you learned something about one of the newer, and more useful WordPress features.  Remember to leave a comment with questions and constructive criticism relating to this post.  And have fun with your new fancy post images, I bet all your friends will be jealous.