I like to simplify this process by using a simple PHP script with a local TTF font (True-Type Font) to help me quickly generate my header graphics. I can then just include them into my CSS sheet, dynamically setting up the text that the header needs to say.This technique is very useful if your site is going to be mainly controlled by a client. As they’ll probably have to let you know every time they make a new header that needs to be a graphic loaded in via CSS. You’ll be able to accommodate them on-the-fly (or even better, teach them how to do it), as opposed to having them wait for you to generate the graphic with PhotoShop or Gimp, and then implement the CSS.Heads up: This PHP code requires the standard ImageGD library to be installed with your PHP configuration. This library has been on most shared/virtual hosting companies I’ve used, but to be safe, contact your website host administrator to ensure the ImageGD library is installed.You can place this script’s file anywhere you’d like. I usually place it in my theme’s image directory—imgtxt.php—as I will be referencing it as an image.

The HowToons.com site does something more than just make their posts creative; the speech-bubble bottoms of each post and the nice big background image that is positioned with no-repeat and fixed in the bottom right, achieve what I refer to as ‘boundary breaking‘.Whether we realise it or not, we tend to create theme designs and page templates that adhere to a ‘grid’ of some sort. This is not a bad thing. It makes for good design, easier use of the interface, and most importantly, easier content reading.However, I tend to find we can become ‘desensitised’ to many site’s designs, and thus, it’s interesting when a site’s design displays clever ways of breaking out of the layout’s grid.Whenever I see boundary breaking done on other sites, I find it catches my eye and awakens it to really move around and take in the other details of the site’s design that I might have otherwise ignored. As a result, I look for interesting ways to do this subtly within my own designs.

Within this book’s case study, the OpenSource Magazine theme, I achieved this in the main and internal headers by extending it out past the container2 div. The graphic seems to swoop back to line up with the container2 div’s boundary for easy content reading, but the header extends past it, engaging the reader in a little design detail:

Kaushal Sheth has created a WordPress theme based on his favorite book, The Hobbit (http://www.kaushalsheth.com/the-hobbit-wordpress-theme-released/). His use of Bilbo’s sword in the upper-left corner adds a nice layered dimension to the theme and interests your eye in moving around taking in all the other very nice details that Kashual took the time to put into it—the detailed paisley corners, the ‘elvish’ writing separating the posts, and so on.

Kaushal achieved this effect by splitting the sword and title graphic into two parts, then using an absolute positioned div to lay the handle of the sword up against the part of the image contained inside the header div.

In these next few sections, we’re going to focus more on ideas than specifictechniques. The good news is, because you’re using the Firefox browser with theWeb Developer Toolbar, you’ll be able to easily ‘deconstruct’ many of these sitesamples using the CSS | View Style Information and CSS | View CSS tools andthink of ways to creatively use them in your own themes.How Toons (http://www.howtoons.com/blog/) is a great kid’s site thatteaches them interesting things in math, art, history, and science using fun comicillustrations. The site’s blog features a great use of the Comic Sans font (we discussedin Chapter 2 how it’s hard to make that font work well; here it’s perfect), and the site’sauthor has created a very unique post template.If you explore this site with your Web Developer Toolbar, you’ll see the authorcreates these posts using actual image tags inside the .blogpost class. It works, andit allows the author to easily randomly assign bottom speech-bubble images withdifferent cartoon scenes.

More aListApart: Again aListApart.com comes in with a great take on this two image process, along with some great tips for creating the corners in your favorite graphic program:

http://www.alistapart.com/articles/mountaintop/

This rounded corner fix only works for a set width with a variable height. That means, how wide you make your graphic, is as wide as your outer div should be. So, if you know the width of your columns and just need the height to expand, you can do this two image cheat by only making a top image and an extended bottom image like so:

Test this technique! In the previous graphic, I mention to make sure this height is a bit longer than what you think the div may need to expand to. Once you have it implemented, try it out in different browsers and set your browser’s default type to different sizes. If someone has their browser set to very large type, this effect can be easily broken!

Really understanding rounded corners in a table-less design: If you haven’t noticed by now, I’m a fan of aListApart.com, so I’ll leave it to these trusted experts to give you the complete low-down on the details outs of making rounded corner boxes with pure CSS:http://www.alistapart.com/articles/customcorners/Also, there are many rounded corner generator sites out there which will do a lot of the work for you. If you’re getting comfortable with CSS and XHTML markup, you’ll be able to take the generated code from one of these sites and ‘massage’ the CSS into your WordPress style.css. Roundedcornr.com is my favorite:http://www.roundedcornr.com/To start, just make four rounded corner images named left-bot.gif, right-bot.gif, left-top.gif, and right-top.gif respectively (or generate them at roundedcornr.com). And using a class name called .sidebarItem (you can name this class whatever you’d like), reference the images via background parameters in your CSS like so:.sidebarItem {background: #cccccc;background: url(../images/left-top.gif) no-repeat top left;/*be sure to set yourpreferred font requirements*/}.sidebarItem div {background: url(../images/right-top.gif) no-repeat top right;}.sidebarItem div div {background: url(../images/left-bot.gif) no-repeat bottom left;}.sidebarItem div div div {background: url(roundedcornr_170953_br.png) no-repeat bottomright;}.sidebarItem div div div, .sidebarItem div div, .sidebarItem div, .module{width: 100%;height: 30px;font-size: 1px;}.sidebarItem {margin: 0 30px;}

First off, we’ve already looked at several ‘cool factor’ techniques that are very popular in web design today. Among these techniques are using floats to create a three column layout complete with header and footer, along with a two column internal page layout. We’ve looked at styling lists with CSS (essential, as WordPress outputs a lot of lists). And we’ve also covered using the CSS hover property for our drop-down menus, which could be applied to text or used with images for a rollover effect without the use of (or with minimal use of) JavaScript.

Get good with backgrounds! If you haven’t already realized this by now, about ninety eight percent of the CSS that will make your WordPress theme look great is dependent on how creative you get with images and the background properties of your XHTML objects, classes, and id rules. From page header backgrounds to data table spruce ups, rounded corners and fancy text (as you’ll find out about in a minute), knowing how to really control and manipulate background colors and images via CSS is key. Check out http://w3schools.com/CSS/CSS_background.asp to learn the ins and outs of this CSS property.

Alright, for this last chapter, let’s sum things up by giving you a few final design tips, tricks, and troubleshooting ideas to take with you into your future WordPress theme designs. As we’ve gone through this book there are quite a few tips that have been given to you along the way. Here are the top four to remember:1. Create and keep lists: Check lists, color lists, font lists, image treatment lists. Keep all of these handy from your initial design phase. You’ll find them to be useful and excellent inspiration for your designs to come.2. Design for FireFox first, then, fix for IE: Firefox is more than a browser preference; it’s a true web designer and developer’s tool.3. Validate your XHTML and CSS… often: The more stable your markup and CSS, the less hacks and fixes you’ll need to make.4. Consider usability issues when implementing site enhancements: Steve Krug is a cool guy. Moreover, good usability naturally lends itself togreat design.With that said, let’s just go over a few last design techniques that any good designer wants in their arsenal these days.

The fun doesn’t stop there! What’s that? You don’t have time to go read up on how to use a JavaScript library like jQuery? Never fear! There are many other JavaScript effect components and libraries that are built using the libraries above. One of the most popular scripts out there that makes a big hit on any website is Lightbox JS:http://www.huddletogether.com/projects/lightbox2/Lightbox JS is a ’simple, unobtrusive script used to overlay images on the current page.’ It’s great, but it uses both the Prototype and Script.aculo.us libraries to achieve its effects. I also found that Lightbox was limited to only displaying images and a hair difficult to manipulate it to handle anything more than that. What if I wanted to display XHTML text, or markup containing YouTube videos, maybe even make an AJAX request to the server?Enter Thickbox: http://jquery.com/demo/thickbox/Thickbox is very similar to Lightbox JS. It uses only the jQuery library, and in addition to handling images similar to Lightbox JS, it can also handle in-line content, iFrame content, and AJAX content (be sure to check out the examples on the ThickBox page!). The downside—Thickbox doesn’t do that smooth animation that Lightbox JS (version 2) does when images are different sizes. This is the trade-off I made when I decided it was more important to be able to display more than just images in my OpenSource Magazine theme.

Depending on your theme’s design and what type of blog or site you’re creating it for, you may opt to use Lightbox instead or something all together different! It’s your theme, don’t feel limited to what I specifically discuss in this book. I’ll walk you through the process of installing ThickBox, but many ‘Ajaxy’ scripts that use these JavaScript libraries/frameworks are installed similarly. Just follow the instructions in the ReadMe files and you’re on your way to an enhanced theme.

Time For Action:

1. This is an extremely easy-to-implement script. After downloading it, add the key js and CSS files to your WordPress theme’s home.php and header.php files using the bloginfo template tag to target your theme:

<script type=”text/javascript” src=”<?php bloginfo

(‘template_directory’); ?>/js/jquery.js”></script>

<script type=”text/javascript” src=”<?php bloginfo

(‘template_directory’); ?>/js/thickbox.js”></script>

2. You’ll also add in a call to the ThickBox CSS file:

<style type=”text/css” media=”all”>@import “<?php bloginfo

(‘template_directory’); ?>/thickbox.css”;</style>

3. Don’t forget to upload the loadingAnimation.gif and macFFBgHack.png images to your theme directory and update the thickbox.js and thickbox.css files as per the ReadMe file instructions.

4. Then, you can create a post (or page) in your Administration Panel and using the Code View add in basic href links around your image tags, like so:

<a href=’/wp-content/uploads/2008/04/inkscape2.jpg’

class=”thickbox” rel=”inkscape”><img src=”/wp-content/

uploads/2008/04/inkscape2-150×150.jpg” alt=”" title=”inkscape2″

width=”150″ height=”150″ class=”alignnone size-thumbnail

wp-image-15″ /></a>

<a href=’/wp-content/uploads/2008/04/inkscape1.jpg’

class=”thickbox” rel=”inkscape”><img src=”/wp-content/

uploads/2008/04/inkscape1-150×150.jpg” alt=”" title=”inkscape1″

width=”150″ height=”150″ class=”alignnone size-thumbnail

wp-image-14″ /></a>

I uploaded the images via WordPress’s built-in up-loader and let WordPress create the thumbnails; I just added the captions to the title attribute, the rel attribute and the thickbox class by hand.

That’s it!