Today we present you with a vintage inspired, motivational wallpaper design. Everyone’s got their bad days but remember, when life’s got you down, you  are a Superstar!

Here’s a preview:

Download the wallpaper (with calendar)

• 1024 × 768
• 1280 × 800
• 1280 × 1024
• 1680 × 1050
• 1920 × 1200

Download the wallpaper (without calendar)

• 1024 × 768
• 1280 × 800
• 1280 × 1024
• 1680 × 1050
• 1920 × 1200

Requirements

To follow along in this tutorial, you’ll need:

• An ExpressionEngine website running EE 1.6.x (I haven’t yet tested this in EE 2.0)
• The Subcategories plugin
• To use category URL titles in your links, not category IDs

The Subcategories plugin is available for download on this thread in the EE forums; however, since it’s not clear which version to grab, and since there was a minor bug in the code, I’ve made a corrected version available for direct download right here.

Grab the plugin, save it as pi.subcategories.php, and upload it to your system/plugins directory.

Live Demo

If you’re the visual type (like I am) you probably need to see the menus in action. The demo is pulling from a live EE install on our web server. It may also help to see a screenshot of the category heirarchy.

Template Structure

Once you’ve uploaded the plugin file, you’ll need to create a few templates:

1. embeds/navigation
2. embeds/subcategories
3. embeds/sub_subcategories
4. an additional embed for each additional level of subcategories (if you desire more)

For the visuals, here is a screenshot of my templates page.

The embeds/navigation template controls your main, top-level navigation. Embedding this template as I have done is optional; you can also leave your main navigation code in your header template (or wherever it normally appears).

The embeds/subcategories template is only called if a top-level category has any subcategories. It displays a list of, well…subcategories.

The embeds/sub_subcategories template is only called if a subcategory has any subcategories.

You can create as many levels of dropdowns/flyouts as you want by replicating the embeds/subcategories template and naming it something else (like embeds/sub_sub_subcategories).

The Code

In your embeds/navigation template, place the following code:

<ul id="nav">
   {exp:weblog:categories parent_only="yes" style="linear"}
      <li>
         {exp:query sql="SELECT cat_id FROM exp_categories WHERE parent_id = '{category_id}' LIMIT 1"}
            <a href="{path='SITE_INDEX'}"{if '{total_results}' > 0} class="fly"{/if}>{category_name}</a>
            {if '{total_results}' > 0}{embed="embeds/subcategories" cat_id="{category_id}"}{/if}
         {/exp:query}
      </li>
   {/exp:weblog:categories}
</ul>

If you’re scratching your head about what that all means, here it is:

• First, we use the exp:weblog:categories tag pair to show a list of all categories. We show only top-level categories by using the parent_only=”yes” parameter.
• Next, we output a link to the category and display the name (using {path=’SITE_INDEX’} removes the “category” segment from the URL). The {exp:query} call allows us to add a class of “fly” to anchors that are associated with parent categories. This is useful if you’d like to add styling to your parent categories (see the demo for an example).
• The {exp:query} call also checks to see if your top-level categories have children. If so, call the embeds/subcategories template.

In your embeds/subcategories template, place the following code:

<ul>
   {exp:subcategories root_node="{embed:cat_id}"}
      <li>
         <a href="{homepage}/category/{category_url}"{if '{subcategories_count}' > 0} class="fly"{/if}>{category_name}</a>
         {if '{subcategories_count}' > 0}{embed="embeds/sub_subcategories" subcat_id="{category_id}"}{/if}
      </li>
   {/exp:subcategories}
</ul>

Here is an explanation of the code:

• We passed in the parent’s category ID as cat_id. The subcategories plugin takes this value in the root_node parameter to pull a list of subcategories.
• For each subcategory, output a link. The Subcategories plugin has a neat variable called {subcategories_count}, which lets us replace the SQL query that you see in the embeds/navigation template. If there are subcategories, apply a class of “fly” to the anchor. This lets us style our anchors to indicate that there are more dropdowns/flyouts.
• Lastly, use the {subcategories_count} variable to see if the current subcategory has subcategories of its own. If so, call the sub_subcategories template.

In your embeds/sub_subcategories template, place the following code:

<ul>
   {exp:subcategories root_node="{embed:subcat_id}"}
      <li>
         <a href="{homepage}/category/{category_url}">{category_name}</a>
      </li>
   {/exp:subcategories}
</ul>

Note how similar this code is to the embeds/subcategories code. The only difference is that we did not check to see if the grandchild categories had subcategories of their own. We can easily do this by adding the following line…

{if '{subcategories_count}' > 0}{embed="embeds/sub_sub_subcategories" subcat_id="{category_id}"}{/if}

…and then creating an embeds/sub_sub_subcategories template. In this way, you can create as many levels of menus as you want.

Enjoy

Adding category based dropdown menus to an ExpressionEngine website doesn’t have to be a drag. This tutorial should get you up and running without trouble; however, if you find bugs or see ways to improve the examples here, let us know in the comments.

Imagine for a moment that you’re a visionary business owner with big goals for your website. (Sounds familiar, no?) You want your website to make your business look credible. Drive more leads. Dramatically increase your sales, so you can kiss it all good-bye and move to beachfront property in Tahiti…

Hold the sunscreen.

Even if you’re a strong writer, there are many reasons to think twice before writing your own content. If results are important to you, investing in effective website content can be as important as investing in good website design and functionality.

Here are five reasons that professional copywriting can improve your website ROI:

1. Driving traffic to your website.

First things first. If you’re hearing a little voice in your head telling you, “If I build it, they will come…”, tell that voice to stop. You need a plan for getting people to visit your website.

There are lots of ways you could do it, including website marketing and advertising. But hey, why not take on the big dog?

Search engines.

Approximately 85% of all website visits come through search engines. And while many factors affect your website’s search engine ranking, your content is right up there.

How big of a role does content play? Well, that’s hotly debated. But there is general consensus that it’s a significant factor.

In 2009, SEOmoz conducted a study of top search engine optimization experts to get their opinions on what affects Google’s super-secret ranking algorithm. Among the expert panel, there was moderate agreement that having “substantive, unique content on a page,” as well as strategically using keywords, had very high importance in a website’s ranking in search engine results.

Good website content appeals to both search engines and customers.

If increasing visits to your website is important to you and you’re unclear how to write relevant content, invest in an expert who does.

2. Building trust.

So, you’ve figured out how to get people to visit your website. (Good job.) The next obstacle is getting them to call you. Make that purchase. Sign up for your mailing list. Whatever you need them to do to make Tahiti a faint possibility.

One of the main reasons people leave websites without as much as a peep is they don’t trust you.

Ah, trust. So hard to attain. So easy to lose.

There are many aspects of a website that can build trust ― for example, having a clean, professional design that doesn’t look like your cousin built it on his spare computer in the garage. Hey, that can build trust.

Good content can help you build trust too. In this case, good content is in the details (as one of my clients says, “the mind crap”). I define good content as website copy that is:

• Accurate and relevant. Before you start loading your website with product information, pricing data, calendars or other variable data, develop a plan for how you’re going to keep your content up-to-date. Out-of-stock items, mispriced products, and event calendars from 2008 do not instill confidence.
• Consistent, consistent, consistent. A good rule of thumb is, don’t make your customers think. Use the same tone and “voice” across your website. Use consistent terminology and capitalization, so your visitors don’t get frustrated or confused. When your content is inconsistent, you send a message that you don’t pay attention to details. And if you don’t pay attention to your website details, why should a potential customer believe you’re going to take care of his or her details?
• Written in plain English. For the record, using English words does not count as writing in plain English. Your content should not sound like it was translated from foreign language software. Your content should not include big stretches of fancy words that say absolutely nothing. Your words need to make sense. To a sixth grader. To your mother. To people other than your business partners. Why? Because friendly, plain English makes you more approachable. Likeable. Buyable.

3. Tapping into your customers’ needs and desires.

One of the biggest mistakes that business owners can make when they write their own content is positioning everything from their own perspective. I often hear, “I’m too close to my own story.”

Good, powerful content is customer-centric content.

It connects with customers and compels them to want to learn more about you. It demonstrates that you understand what painful challenges they face or what big dreams that want to fulfill.

Good content is not about you. (If you’re even thinking about leading your website with a giant “About Us” section, do not pass go.)

Instead, good content focuses on what matters to your customers. It’s information they care about and messages that resonate with them. At the end of the day, your content should be about connecting with people and inspiring them to do something.

4. Minimizing information overload.

People process information differently on the web. They scan. They jump. They look for content that grabs their attention: headlines, sub-heads, bold words, lists. Typically, they don’t read word-for-word. And they certainly don’t want cluttered, overwhelming websites ― that’s another big reason people abandon websites.

Good website content is user-friendly content.

It follows best practices in website writing. It’s easy for people to process on their computer screens or mobile devices. It’s light and airy and void of huge blocks of text. It doesn’t overwhelm people.

It’s a different technique than writing for print.

5. Increasing conversions.

All of these aspects of content ― relevance, trustworthiness, customer focus, ease of use ― can contribute to conversions. And really, isn’t that what you’re striving for? Sure, it’s great if potential customers visit your website, but it’s even better if your desired customers take action.

Speaking of which, good content compels action.

It’s amazing how a simple message in your website content (such as contact us today, order now, sign up here, download our report, donate now) can get people to do things. These “calls to action” are a subtle, but effective technique that skilled website writers use.

The bottom line? Even if you’re a strong writer, collaborating with a professional on effective website content can help you improve your ROI… and put you that much closer to sipping cocktails on the beach.

This month’s design is a collection of actual newspaper headlines collected from U.S. and world newspapers. Each headline represents an event that took place in 2009.

Here’s a preview:

Download the wallpaper (with calendar)

• 1024 × 768
• 1280 × 800
• 1440 × 900
• 1680 × 1050
• 1920 × 1200

Download the wallpaper (without calendar)

• 1024 × 768
• 1280 × 800
• 1440 × 900
• 1680 × 1050
• 1920 × 1200

We’re big fans of tradition, especially this time of year. For over a century, the American Lung Association has been a part of the American Christmas tradition by releasing an annual Christmas Seal. These look like stamps, but they’re used to seal your holiday correspondence (and they cost a bit less). Proceeds from the sale of these seals goes to fund research to fight lung-related diseases.

In the spirit of this great tradition, we’ve released a Christmas Seal of our own. It won’t seal your holiday cards (unless you get very creative) but it should make your desktop a bit more festive. Merry Christmas and Happy Holidays from all of us at 3 Roads Media.

Download the wallpaper (with calendar)

• 800 × 600
• 1024 × 768
• 1152 × 864
• 1280 × 800
• 1280 × 1024
• 1440 × 900
• 1680 × 1050
• 1920 × 1200

Download the wallpaper (without calendar)

• 800 × 600
• 1024 × 768
• 1152 × 864
• 1280 × 800
• 1280 × 1024
• 1440 × 900
• 1680 × 1050
• 1920 × 1200

Preview of this month's free desktop wallpaper

Download the wallpaper

• 800 × 600
• 1024 × 768
• 1152 × 864
• 1280 × 800
• 1280 × 1024
• 1440 × 900
• 1680 × 1050
• 1920 × 1200

This tutorial is geared toward both the novice user installing sIFR for the first time and to those who have done it many times before. If this is your first time working with sIFR, you should know a few things before getting started:

• To work with sIFR and follow along here, you’ll need Adobe Flash.
• sIFR requires both JavaScript and Flash to work. In the absence of either, it will fall back to displaying regular text.
• Don’t try testing sIFR locally, or nothing will work. It needs to run on a server, either remotely or on a local XAMPP install.
• sIFR is not intended to replace large blocks of text. Try to use it sparingly, for headers and small snippets of copy only. Too much sIFR will bog down your site, increasing page load times.

1. Accommodate those without JavaScript

The very first thing you should do is to make sure your to-be-replaced text looks correct before using sIFR to replace it. If you don’t do this now, you’ll spend more time later switching between your sIFR text and your regular text (they end up using different stylesheets) to make sure they both look right. It’s better to take care of the non-JavaScript people first.

When you’ve gotten your text where you want it, move on to step #2.

2. Download the sIFR files

Download the latest version of sIFR and unzip it somewhere on your computer. For this tutorial, we’ll be working with sIFR release 436.

3. Open sifr.fla

When you unzip the sIFR archive, you’ll see four folders: css, demo, flash, and js. You can completely ignore the demo folder. Click into the flash folder and open sifr.fla.

4. Modify sifr.fla

Once you’ve opened sifr.fla, you should see something like this:

The white rectangle in the middle is called the stage or the canvas. Double click it and you’ll see this:

Double click the stage again to select the text inside. Delete everything, then type a single character (glpyh) of your choice for each font style you’d like. For instance, if you only need normal and bold styles, enter two glyphs: one for normal and one for bold. Make sure all of your glyphs are the same letter.

Of course, you’ll have to choose a font that supports all of the styles you need. In this tutorial, I’m using Arno Pro, which has bold, italic, and bold italic glyphs.

5. Choose your font

Select all of your glyphs, then look to the right of your screen for a dropdown menu like the one highlighted below:

All of your characters will now be the default “normal” style of the chosen font. If your font supports additional styles, the “Style” menu will be active. Highlight each individual glyph you want to change, then choose a different style from the dropdown. In the example below, I’m about to make the second glyph italic:

For fonts like Arno Pro, which have tons of glyph styles, you may be tempted to pick a “caption” or “extra wide” style. These will not work, since HTML only supports normal, bold, italic, and bold italic.

TIP: If you only need to display one style on your site, then you only need one glyph on your stage. I.e., if you only want to display bold, then type one glyph and bold it. You don’t need any more than that.

6. Add additional glyphs

If you anticipate using special characters (for example, Ñ, β, £, «, ™), you’ll need to embed them in your Flash movie. Right beneath the menus you just worked with is a “Character Embedding” button which, when clicked, pops up a window like this:

The basic glyph sets are already chosen for you, along with a list of extra characters. Choose the additional character sets you want (if any) or type special characters in the list, then click OK.

7. Publish your movie

When you’re happy with your font, go to File › Publish Settings. Untick the box near “HTML” since we won’t need to output any HTML files. Next, click the “Flash” tab near the top to adjust your settings.

The only setting you should change is JPEG quality. I always set it to 100, since there’s almost never a difference in file size between 80 and 100. This ensures your replaced text looks as good as possible. You can, of course, adjust this setting to try and reduce the size of your Flash movie.

Once this is set, click Publish.

8. Rename your movie

Go back to the folder that has your sIFR files and click into the “flash” folder. You should now see a sifr.swf file, which is the movie you just published.

It’s good practice to rename your movie after the font it contains, since it’s not uncommon to replace more than one font on a website. This naming convention will make it easy to know what’s what.

I renamed my movie arnopro.swf.

9. Open sifr-config.js and configure

Now it’s time for the hearty, meat-and-potatoes part of the tutorial. You’ve got your movie; you just need to tell your site where to find it and what to do with it.

Go to your sIFR folder, click into the “js” folder, and open sifr-config.js.

There are instructions in the file, but here are the basics:

• On line 15, change the variable name to match your font’s name and change the path to point to your swf file. For example:

// what you see when you open the file
var futura = { src: '/path/to/futura.swf' };

// an example of what you should change it to
var arnopro = { src: 'http://www.3roadsmedia.com/flashstuff/arnopro.swf' };

• Now is a good time to upload everything to a web server so you know the path to your movie. You won’t be able to test sIFR by just calling the movie from your hard drive.
• Do a find/replace to swap out all instances of futura with the name of your new font.
• Tell sIFR how to display your new font by adding CSS selectors and style rules (see the next step)

10. Tell sIFR how to display your new font

All of the styling for your Flash-based font is handled via sifr-config.js, starting on line 53.

A couple of pointers:

• Be sure the font name after sIFR.replace matches the name you specified in line 15
• The “selector:” tells sIFR which HTML element to target with the style rules. sIFR supports most HTML elements, but if you want to target things like :first-child, read this article on how to do it.
• You can target multiple selectors at a time by using a comma-separated list; e.g.:

selector: 'h1, h2 a, #footer h3',

• When using hex colors, always use the full six digits. Three-digit CSS shortcuts do not work here. For instance, use #003300, not #030.
• If you’re getting a funky colored box behind your replaced text, add this line to each of your selectors:

wmode: 'transparent'

• To style hyperlink hover behavior, do something like the following:

css: [
   '.sIFR-root { color: #000000; }',
   'a { color:#9f2321; text-decoration:none; }',
   'a:hover { color:#99e232; text-decoration:underline; }'
   ]

11. Include the sIFR files in your web page

For this tutorial, I’m assuming you already know how you want to style your font, so you can configure first and hook up second (sounds like I’m inviting some derisive snickering…).

sIFR requires 3 files to work: sifr.css, sifr.js, and sifr-config.js.

Add these files to the <head> section of your web pages by copying/pasting this:

<!-- sIFR files -->
<link rel="stylesheet" type="text/css" href="http://path/to/sifr.css" />
<script type="text/javascript" src="http://path/to/sifr.js"></script>
<script type="text/javascript" src="http://path/to/sifr-config.js"></script>

12. Upload everything and test

Upload everything to your web server and load your web page. If all went as planned, you should see your new font instead of that old, dreary thing you’re replacing:

If you don’t see your new font, go through this checklist:

• Double check the paths to all of your files.
• If your JS files are linked properly, make sure you entered the right path on line 15 of sifr-config.js.
• If that’s linked properly, try to load the Flash movie directly. If you don’t get anything, you may not have Flash installed or it may be turned off.
• Make sure JavaScript is enabled in your browser.

Once you’ve got your replaced font showing, tweak your CSS in sifr-config.js until things are exactly where you want them.

13. Tweak the CSS

The final step is to tweak your replaced text. You may notice it’s a bit off in some places, or that it wraps in the middle of a word. The solution is to edit sifr.css, which is located in the “css” folder of your sIFR download.

Once you’ve opened that file, scroll to the very bottom, where you’ll see this:

@media screen {
 /* Example:
 .sIFR-active h1 {
 font-family: Verdana;
 visibility: hidden;
 }
 */
}

This is where you make your edits (you can leave the rest of the file alone).

A common fix you may need to implement is preventing your replaced text from wrapping in the middle of a word. This is caused by the replaced text taking up less space than the sIFR text. The solution is to increase the font size, letter-spacing, or width of the replaced text. If you do this in your regular CSS file, you may find that your regular (non-sIFR) text is too large.

In this case, you’d create a new rule in your sifr.css file to make the font larger only for the replaced text; e.g.:

// regular CSS file
h1 { font-size:20px; }

// sifr.css
.sIFR-active h1 { font-size:28px; visibility:hidden; } 

Regardless of whether you edit sifr.css, you must include it in your <head> section.

Post script: frequently asked questions

You’ve got sIFR up and running, but something isn’t acting quite right? I’ve compiled this short list of questions that I’ve seen asked many times before:

How do I adjust line-height in sIFR?

Flash doesn’t understand the concept of line-height. Instead, it uses a custom property called leading. To adjust the line-height in sIFR, do this in your sifr-config file:

// leading must be a number (decimals allowed); no units needed
css: '.sIFR-root { color:#5a3b00; font-size:25px; leading: -3; }',

How do I style links in sIFR? My cursor doesn’t work.

A common problem with sIFR-replaced links is that your cursor doesn’t appear as the friendly hand pointer, but as a text selector. This is because you haven’t replaced the link, but the text inside the link. Read here for how to fix this.

That’s it!

If you have suggestions for improving this tutorial, or if you get stuck, feel free to leave a comment. You can also post a question at Stack Overflow where Mark Wubben (lead sIFR developer) is great at answering questions.

This month’s wallpaper is inspired by a passage from Samuel Taylor Coleridge’s ballad The Rime of the Ancient Mariner. The passage is my favorite in the poem, so I thought it would be fitting if we commemorated that with a seasonal design.

Preview of this month's free desktop wallpaper

Wallpaper with calendar

• 800 × 600
• 1024 × 768
• 1152 × 864
• 1280 × 800
• 1280 × 1024
• 1400 × 1050
• 1440 × 900
• 1600 × 1200
• 1680 × 1050
• 1680 × 1200
• 1920 × 1200

Wallpaper without calendar

• 800 × 600
• 1024 × 768
• 1152 × 864
• 1280 × 800
• 1280 × 1024
• 1400 × 1050
• 1440 × 900
• 1600 × 1200
• 1680 × 1050
• 1680 × 1200
• 1920 × 1200

In fact, we enjoyed the process of creating this theme so much that we plan on doing it again. From time to time, we’ll post a free WordPress theme on our blog for you to download and enjoy. Check back soon or subscribe to the feed so you don’t miss out.

Features

This theme is essentially a re-purposed and enhanced version of our old blog theme. It won’t make you coffee, but it will make your blog look good.

• Widget ready
• Supports threaded comments
• sIFR enhanced (minimal configuration)
• Random, rotating banner images
• One-click social bookmarking
• Segregated search results (pages styled differently than posts)
• Localization support (interested translators please leave a comment below)
• Support for WordPress’ Custom Header API

Testing and validation

• Tested W3C valid (XHTML 1.0 transitional and CSS 3)
• Tested in Firefox 3, Safari 4, Internet Explorer 7 & 8, and Chrome
• Tested at resolutions from 1024 x 768 to 1680 x 1050

Requirements

• WordPress 2.7 or higher

Download or try the demo

Grab the zip file below (658 kb) or try out the fully functional demo first.

I’ve included documentation in the zip file that explains how to install and customize the theme; however, feel free to post a comment if you get stuck (or if you find a bug).

Alternate versions

sIFR support also requires some extra work, and we like to keep things simple. If you just aren’t interested in using sIFR on your blog, you can grab the latest version without sIFR support.

Download version 2.3 (no sIFR) (509 kb)

As of 2.2, we decided to drop support for Internet Explorer 6. To keep our theme accessible to users of IE6, we’ve kept the older 2.1 version available. This version has been fully tested in that browser and works fine.

Download version 2.1 beta (1.74 MB)

Legal

The Elegante WordPress theme is licensed under the GNU General Public License version 3. In plain terms, this means you are free to download, modify, and use the theme for commercial or personal purposes, provided that you keep the footer link, which reads “Elegante website theme by 3 Roads”, intact and unchanged.

Change Log

2.3 (23 December 2009)

• Added localization support
• Completely widgetized the sidebar
• Added support for WordPress custom header API
• Added support for SEO custom fields
• Changed to a GPL compatible license

2.2 (30 October 2009)

• Added support for child and grandchild pages
• Added support for sIFR dropdown menus (when child pages are present)
• Added new styles for HTML embedded in comments
• Added new styles for HTML tables
• Enabled comments for pages
• Improved image styling (large images no longer break layout)
• Comments and trackbacks now display separately
• Dropped support for IE6

2.1 Beta (1 October 2009)

• Added sIFR support for special characters
• Actually included the sIFR Flash files this time…
• Updated documentation on how to configure sIFR

2.0 Beta (16 September 2009)

• Initial public release

When viewing the latest post, next_post_link() displays nothing; when viewing the earliest post, previous_post_link() displays nothing. This can result in some less than friendly navigation.

In this post, I’ll show you how to use a built-in WordPress function and PHP conditionals to improve your WordPress page navigation.

The problem

Here is an example of next_post_link() and previous_post_link() at work on our blog’s old theme:

When viewing a post that is neither the newest nor the oldest, the post navigation links display as expected.

The trouble with these functions comes when you get to the first or last post. In the case of the first, you’ll have something like this:

When viewing the oldest post, the "previous post" link disappears, leaving an ugly hole.

And when viewing the last post, you’ll have something like this:

Similarly, when viewing the newest post, the "next post" link disappears.

To the rescue: get_adjacent_post

We’re going to use the obscure WordPress function get_adjacent_post() to check if… (shockingly) …there is an adjacent post. If there isn’t, we output whatever HTML markup we like to take the place of the gaping hole we’re trying to fill. If there is an adjacent post, we output it as normal.

The function retrieves a link to the adjacent post (either next or previous) and takes the following form…

get_adjacent_post([bool $in_same_cat, string $excluded_categories, bool $previous])

…and has these parameters:

• $in_same_cat : Whether the link should be in the same category
• $excluded_categories : A comma-separated list of excluded category IDs
• $previous : Whether to retrieve the previous post

The solution, with sample markup

The code block below contains the markup you should add to your single.php template file. Place it where you’d like your navigation to appear, then adjust the parameters and output to suit your needs.

<span id="prev">
   <?php previous_post_link('%link', '&laquo; Previous'); ?>
   <?php if(!get_adjacent_post(false, '', true)) { echo '<span>&laquo;Previous</span>'; } // if there are no older articles ?>
</span>
<span id="next">
   <?php next_post_link('%link', 'Next &raquo;'); ?>
   <?php if(!get_adjacent_post(false, '', false)) { echo '<span>Next &raquo;</span>'; } // if there are no newer articles ?>
</span>

I then added this line to my CSS file:

#prev span, #next span { color:#ccc; } /* lighter than the normal anchor text */

And here is the final result:

The final result, showing user-friendly language at both ends.

In the example above, I grayed out the inactive links. If you have more room, you might get creative by replacing the text with something like “Sorry, there aren’t any newer posts!”