Main content begins here

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 1

Friday, March 13, 2009

This will be as short and sweet as I can make it while covering the entire theme development from concept to launch, with occasional pitstops for my bad humour... Whew, what an undertaking!

Web Design, The First Step to Theming Drupal

Example of using Photoshop guides in a design

Start with a design in Photoshop. Stop using Illustrator to design web sites. Stop using Fireworks or ImageReady to cut them. For goodness's sake, if you're a designer, then be one for real. Use Photoshop. Use vector shapes and guides to cleanly define areas using a grid to setup the design. It doesn't have to be perfect but if you're making your own design then it should at least be good, otherwise you may as well go grab a free theme somewhere and save yourself some time.

Do not use images for navigation unless you are prepared to constantly edit them yourself, meaning if this job is for a client, get off your designer's high horse and use text for navigation. Its irresponsible to use images for nav when YOU won't have to maintain it, just because you think it looks pretty. Keep the client in mind. Use text.

Coding Your Drupal Theme

Code a HTML/CSS tableless template by hand. Do not use an app to export it. Just look at the darn design and visualize the rows and columns you'll need. A header is usually one row (div set), the nav might be another, the body content another, and then a footer, generally speaking. Within the rows are columns, each column is another div set. For example often the body content area has columns, in the case of this site there are 3; the left column for navigation/quotes, the center for body content, and the right column for callouts. You will define a width for these columns, then float them all left and then clear the floats afterward. If all this is mundane to you and you want a new challenge try coding so that your page content is at the top of your HTML.

I've really plowed through the design and code portion of creating a theme because the main topic of this post is the Drupal aspect, theming Drupal, and not really the creation of a design/HTML template. If you need more in depth info on those aspects I may have other articles later, or again, save yourself some trouble and pick up a free theme somewhere.

Once you have the HTML template code complete (with some dummy content in place) or have purchased a plain HTML theme elsewhere, and have tested it in FireFox, IE6 (hopefully dead soon), IE7 and Safari, you'll need to create your own theme folder. To start it may be easier to just duplicate the garland theme, then rename the folder whatever you want (hint: if you plan to have spaces in the name it is best to use underscores instead). For now let's assume your folder has been renamed "my_theme". Inside /themes/my_theme/page.tpl.php is where most of the work goes into creating a theme. If you don't know what the page.tpl.php file is, again, check into an existing Drupal theme such as Garland to see an example of the file.

The Drupal Guts Switcheroo

Next is swapping out your pieces of code for Drupal's guts. When I am creating a new theme I usually paste the entire new HTML code ahead of the old code of an existing page.tpl.php file. This makes the copying/pasting of the Drupal guts easier... Be careful to copy/paste all the region variables you'll need to ensure a smooth transition. If you see PHP in the old theme's code, it probably belongs in the new theme but you will have to learn over time exactly what you can add/keep/discard.

I'm not going through the whole list of region swaps you'll need to make but an example would be, cutting out the body content area of your HTML code and adding Drupal's <?php print $content ?> snippet. Another example is, deleting the code for what should be the left column content of your HTML template then inserting Drupal's <?php if($sidebar_left) {print $sidebar_left;} ?> region snippet.

When working on this part of the process, you'll have to consider your client's needs. Generally for my projects, clients don't need every bell and whistle. For example how often will a client change their logo? Nearly never is the answer in my case, so I don't usually use Drupal's $logo variable. Same with the mission statement ($mission variable) since most of the time designs incorporate the mission statement as a part of the logo. But you be the judge of what works best for you.

More In-Depth Drupal Theming Tips

We've covered the basics. Now it's time for the nitty-gritty...

Your theme should be well inside the ballpark now, with Drupal trying to generate its Drupally system bits in the right places, however now the devil is in the details. At this point Drupal will be inserting content in the right place in your theme, the $content variable, and even though it may be trying to insert left-column stuff in the $sidebar_left region variable, you may not have told Drupal what it is exactly that you want in that area. This is where blocks come into play.

In "administer > site building > blocks" you will see any themes that are registering with Drupal, such as garland and minelli. As long as your new theme has been enabled in "administer > site building > themes" you should see it in the blocks area. Clicking the name of your theme will allow you to instruct Drupal what content should appear in which region (the variables you just added to your new theme) Now you can control what shows in the various regions of your page, the header, left and right columns, and footer. For example if you need a copyright statement in the footer, as long as you have swapped the $footer_message into your new theme, all you need to do is add a new block called, say, "my copyright", add the copyright statement into this new block, then in the "my_theme" theme tell this new block to reside in the footer by choosing "footer" from the dropdown.

This ia a pretty simple way to get a quick site created in Drupal. The thing is... people always want to customize. They want this and that coded exactly this and that way. This leads to the need for more control over what Drupal is exporting and where it is exporting it.

For example, what if we need our main navigation to render a bit differently, say with a span tag inside the anchor, or a div surrounding each ul for special effects? What if we are creating a site for ourselves and we DO want to use images in the navigation because we know we can update the images ourselves if needed? What if we want a view to sometimes render items as a list that DOES use a proper list format (unordered or ordered) and in other cases we want a list of items that are NOT inside a list structure?

All these questions and more might be answered in Part 2, or possibly Part 3, or the way I'm rambling it could be in Part 12, after this commercial break!

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <br> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
John has always been a pleasure to work with. He has done a great job and has always been an expert! Will continue to work with him any chance possible. Absolutely superb service. I have full intentions of using him in the future. Very knowledgeable and easy to work with! THANK YOU for working so fast on this project for me!
M. T., Owner Crux Creative, LLC
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.