From Photoshop to Drupal 6 Theme - Step by Step

Step One: Semantic HTML

This is part one in a series designed to show you how to go from photoshop mockup to Drupal theme step by step. In the process we will produce a full blown tutorial and a working Drupal theme that we will submit it to the themes repository on drupal.org. If the the tutorial is popular enough - I may even make an on demand print version available.

Good clean, valid xhtml is a must when starting your theme.

Note: there are two common ways to make a theme in Drupal. The first method is to start with stater theme like Zen. Here, most of the Drupal parts are set up but the theme is plain. You work your custom images, colors and CSS into an existing theme until you have it looking good.

The second, and my preferred method is to start from scratch. Convert your Photoshop mock up to a HtmlCss file and then add the Drupal/Php pieces in last. This is not to say my way is better. It's just my preference. I like to be in control of what is produced, and to be fair I haven't spent much time with the Zen theme. Yet, I find this method work well for me.

So lets get started ........

So lets say we have a Photoshop template that looks the image in this post. This mockup was rejected by a client so we can use it here - :(

The first thing we will do is describe the layout.
We have an area on top with curved corners, a middle area with a left and right "page", and a footer with some faux page numbers. The left page has a title, a navigation menu, and image, a mission statement, and a geographical/contact paragraph. The right page has a regular title and body.

So lets's describe this in html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My CSS/Html Template</title>
</head>
<body>
<div id="pageContainer">
<div id="columnContainer">
<div id="rightPage">
<h2 id="pageTile">Page Title</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="leftPage">
<h1 id="siteTitle">Our Site Name</h1>
<ul>
<li><a href="^^_^^">Home</a></li>
<li><a href="^^_^^">About</a></li>
<li><a href="^^_^^">Calendar</a></li>
<li><a href="^^_^^">Blog</a></li>
<li><a href="^^_^^">Contact Us</a></li>
</ul>
<div id="mission">
<h2>Our Mission is .......</h2>
</div>
<div id="geoStatement">
<p>We are located in Acme City, Co</p>
</div>
</div>
<div id="footer">
<span class="pageNumber">-3-</span>
</div>
</div>
</div>
</body>
</html>

So we start with all the things an html page needs - a doctype html and head, title tags. Once in the body we are describing the layout with divs. Here are the main div elelments

pageContainer - will let us center the layout in the browser. We can also give this element a top padding and a background image to let us get those curved corners on top.

columnContainer - this is a container for the left and right "pages" or columns. It may not be obvious why we need this container yet but we will see in a future installment that it allows us to use a repeating background that expand to the height of the left or right column whicever is larger.

rightPage - the right column. We place this before the left column because it holds the meat of the page content and we want Drupal to see this first

leftPage - the left column with navigation, etc..

footer - page numbers. We will likely pad the bottom of the footer as well to allow a background image with the curved corners.

Make sure your xhtml validates. Here is an online validator: http://validator.w3.org/. Or use the one in the Firefox Web developer toolbar. My favorite text editor, Textmate, has this built in - just control - shift -V. Your Css will not behave without vaild html. Take the ime to do it. You'll regret it if you don't.

Next time - Hands on CSS