Theming Your CMS Without Tearing Your Hair Out | WebReference

Theming Your CMS Without Tearing Your Hair Out

By Ernest Lilley

One of the great things about CMSs, especially open source ones, is that you can change the entire look of a site as easily as slipping into a clean pair of jeans and a new black t-shirt. Easier, in fact, because there are literally thousands of free themes out there for you to choose from.

The bad news is that none of them is quite what you wanted. Inevitably.

Basic Tools for the Job

It starts when you want to tweak the size of a div on one of your pages. Thankfully, you already have your suite of web developer plug-ins running on Firefox. You know:

  • Firebug
  • Web Developer
  • Colorzilla
  • IE View
  • And maybe a few others

So, you right click on the offending div, select "inspect element" and edit the CSS in its window while the site is live...just to see what happens. From there you can find the files and lines that need to be tweaked and in no time, you're hacking away at the template's CSS. You've started down the slippery slope of theming. Heaven help you.

As long as I'm on my favorite tools and techniques for code hacking on your own sites, let's include:

  • Google Desktop

This is an invaluable search tool. Using Firebug may only get you to the level where you know what variable or term you're looking for, but not where it's defined in the actual page templates. Google Desktop lets you select specific folders to search and does a vastly better job searching on terms than native search applications.

Because template files are generally either CSS of PHP files, I rarely use Dreamweaver when working on them. Instead I use a simple code editor to do the job. Mine is the shareware a simple program that works with a variety of languages and includes ftp capabilities. You might like to find your own favorite, and a good place to look is at PHP-Editors.com where they've reviewed lots of them, and provide ratings and links back to their main pages.

The CMS theme structures for Wordpress, Joomla! and Drupal are all pretty similar. You can find tutorials on changing one to another with a simple search, which isn't surprising, since most CMS driven web pages have common elements: Background, Header, Left/Right Columns (Rails), Content, Footer...and Blocks to put inside.

The problem is that the templates and themes quickly get complicated, and even with your handy web development tools, you can spend a lot of time trying to figure out how to make themes do what you want.

Making It from Scratch

Soon you'll decide that what you should really do is to make your own theme from scratch. That's actually a pretty good idea, and a basic theme isn't hard to build. Time to jump on the web again and see what's out there.

Here are a few places I'd suggest you start:

I strongly recommend making up a theme from scratch. Not that it's going to make you happy when you're done with it, because it probably won't be nearly as sophisticated as you were hoping. Nevertheless, the understanding of how themes are constructed, and where their components live, is worth the effort.

So now, you've hacked at a theme, made a simple theme of your own, and you're still not happy. Been there.

The Zen of Drupal

If you're working in Drupal, you're probably wondering why I haven't mentioned "Zen" created by Jeff Robbins. I'm getting to it. Jeff Robbins, web guru, rock star and Lullabot host, created a highly flexible theme framework for Drupal that you can use "right out of the box" with some simple adjustments, or you can go full bore and use it to theme a Photoshop (or GIMP) file. There are many designers, including theme guru Colleen Carroll of Palantir, part of the SXSW CMS challenge team, who use it as the basis for all their work, and it's worth getting to know. There have been efforts to do similar themes for other CMSs, but I don't think any have been accepted the way Zen has.

If you're considering working with Zen, you should watch Learning Drupal Part 14: Customizing the Zen Theme using Adobe Photoshop. Photoshop isn't the only image editing tool this video will work with, and you'll probably get motion sickness from the way the screencast follows the mouse, but you'll get a good idea of the process behind working with a theme, stuff that I spent many hours figuring out. With any luck, it will save you some pain.

By the way, Lullabot has just released a Theming DVD, which I'm looking forward to seeing.

Are We There Yet?

Wow, you've come a long way in two thirds of a column.

But no, we're not there yet, and if you're like me, this greater understanding of what theming takes frustrates you as much as it empowers you. Good themes are pretty complicated, and there's no way around that. So, you have to decide if you're going to get serious and become a theme guru...or take the easy way out.

I vote for the easy way(s), and there are several of them. The first gives you a toolkit that works pretty well, and will keep you out of trouble; while the other two give you total artistic control, which is more dangerous than it sounds. Here they are, listed in categories. You may well find others that fit these categories, but I can only speak for ones I've tried. Feel free to suggest others..

Template Program: Artisteer

The folks at Extensoft make a wide range of useful programs, which they call the "unofficial extensions for Windows." They've also come up with a program that walks you through theme creation and outputs to WordPress, Joomla!, Drupal, or plain XHTML without having to create a Photoshop image to start with, though it will let you import backgrounds and images into your layout. Everything works from menu selections and the theme you're building appears while you work so it's pretty neat, and you can quickly knock out complex themes with dynamic banners, any wide variety of menus, custom backgrounds, gradients and "glares," and much, much, more.

I've used it for both Joomla! and Drupal themes, with good results, and as the Home/Academic version comes with only the WordPress option, I'm sure that works just as well. Still, after you've created a new theme using Artisteer, you may still want to use your theme hacking skills to go in and tweak things.

There are some features it could use that it doesn't yet have, like a built in color sampler, and there are some things it doesn't support yet, like logos in Drupal, but those are pretty easy to work around, and it does a good job overall, giving you immediate satisfaction and the ability to change things on a whim. The development team is very responsive, by the way, and if you should find that the program does something weird, if you mention it on their forum, they jump on it.

What it won't do is take an existing theme and let you modify it, or take a Photoshop file and let you slice it up. And it won't run on a Mac, which brings us to our other options.

PSD Conversion Program: PSD2CSS Online

Up to this point, you've been held back by what preformed templates would allow, though they're pretty flexible. Still, letting the program determine the design is getting the cart before the horse. What you probably wanted to do is to take a layered graphic file, like a PSD (Photoshop/GIMP) and turn it into a theme.

I know of at least one online program that can take that file and spit out a fully formatted theme, literally in seconds. That's psd2css.com and they've recently added WordPress and Joomla! support in addition to Drupal.

You might think that this sounds like cheating, but there's a catch. You have to create your PSD to match their requirements, and having worked with a number of designers that had haphazard labeling systems (at best) for their layers, the rigor required for this to work warms my heart.

On the "tutorials" page, they offer the friendly encouragement: "Using psd2css online is simple. Here are some tutorials to get you started:"

Then they give you 23 in depth tutorials to show you how it works. Actually, you can build a web page after reading through the first one, and by the time you get to the end you've covered everything from forums to ecommerce. As I mentioned before, I really like the idea of standardized layer names, which you'll find on "Tutorial 4: More Control By Naming Your Layers." The site offers lots of sample files for you to work with, so you can see how it all relates.

The site gives you two weeks of free trial to see how it works, then costs $19.95 a month to use thereafter. For what you're getting, it's a steal, especially compared to the last option I'm going to give you - Service Bureaus.

PSD Slicing Service: Many

Turning PSD, or even just wireframes, into themes is a global cottage industry, and there's no shortage of people eager to take your pictures and turn them into CSS, PHP, and XHTML. Costs vary, but you should be able to get your theme "sliced" for somewhere between $100-200 (US) and it shouldn't take more than three days to do it.

If you're doing a theme for your own site, that may seem like actual money, but if you're doing it for a client, it's a bargain. Since these folks deal with themes day in and day out, and since they're working with themes they generated in the first place, they know exactly where to look when you come back with your client's "minor" changes. Though I've done projects with each of the methods I've talked about here, this is the one I use when it's an actual paying client. Like any contractor, it may take a little while to find one that you work well with, but they'll be easy to find by web searching "PSD Slicing Service" + your CMS name.

Conclusion

I hope that you've come away with a better idea of what theming takes, and have some ideas you want to try out. Theming is as important as anything that goes on in the backend of a site, and often even more so. Marshall McLuhan's famous comment, "the medium is the message," isn't so much a truth as a place to start thinking about information transmission but it lurks at the core of every site's design.

The look of a site is how you communicate its content to the user, and all the functionality in the world won't overcome bad design.

is a former columnist for Byte.com and Sr. Editor of TechRevu. He's been trying to organize the world by developing database applications since he owned his first PC and is currently dividing his time between writing about technology and web development and putting together CMS driven sites for clients.