Howto Building A Drupal 6 Theme
February 11th, 2010Building A PHPTemplate Theme
Your probably just installed Drupal, poked around and want to create your own theme. If your not a programmer, there are plenty free templates available or you could get paid Drupal services. Some us are the kind of people who want to learn and do things themselves. This is where Google and the community help out.
The goal of this article is to create a basic theme and to get a beginner Drupaler started on creating a masterpiece theme.
Getting Started
Create a directory for the theme.
Decide on the module name, name standards for your theme.
Create the following files inside the theme directory you created previously:
- style.css
- yourtheme.info file
- page.tpl.php
- node.tpl.php
- README.TXT
Additional files for individual node types, blocks and so forth.
Create Your Theme's .info
Every theme needs a .info file to provide information to Drupal about the theme and the features the come along with it. The .info file is very important for defining the regions available in your theme.
; $Id$
name = Greyscale
description = Rough lame grey theme
screenshot = screenshot.png
core = 6.x
engine = phptemplate
; Theme regions
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
; Theme features
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = favicon
features[] = primary_links
Create page.tpl.php
Inside page.tpl.php add the following:
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
</div>
<div id="sidebar-left">
<p>
This is the left bar
</p>
</div>
<div id="main">
<h2>Subheading</h2>
<p>
This is the main stage
</p>
</div>
<div id="sidebar-right">
<p>
This is the sitebar right!
</p>
</div>
<div id="footer">
<p>
Footer
</p>
</div>
</body>
</html>
Create style.css
Now we need to create a stylesheet. Usually in Drupal themes, the css sheet is called style.css
/*
CSS for the greyscale theme.
*/
#container {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#header {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#header h1 {
padding: 0;
margin: 0;
}
#sidebar-left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#sidebar-right {
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#main {
margin-left: 200px;
margin-right: 200px;
float:center;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#sidebar-left p {
margin: 0 0 1em 0;
}
#sidebar-right p {
margin: 0 0 1em 0;
}
#main h2 {
margin: 0 0 .5em 0;
}
Now without any of the default variables or for any way for Drupal to put in its options you will lock yourself out of the theme temporarly. To get back in if you decided to use this theme before completing the theme, rename the theme directory.
Modify page.tpl.php And Add The Drupal Variables
Now lets add some variables to make this a real theme and show you the true power in using Drupal. Go back into page.tpl.php
<html>
<head>
<title><?php print $head_title?> | <?php print $site_name?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<?php print $styles ?>
</head>
<body>
<div id="container">
<div id="header">
<?php print $header ?>
</div>
<?php if ($left): ?>
<div id="sidebar-left">
<?php print $left ?>
</div>
<?php endif?>
<?php if ($right): ?>
<div id="sidebar-right">
<?php print $right ?>
</div>
<?php endif?>
<div id="main">
<?php print $breadcrumb ?>
<h2><?php print $title ?></h2>
<?php print $content ?>
</div>
</div>
<div id="footer">
<?php print $footer_message?>
<?php print $footer?>
</div>
<?php print $closure?>
</body>
</html>
What now?
Now this is only a really lightweight theme, but this theme is far from being finished. A good start would be to copy exisiting node.tpl.php or blog.tpl.php and modifying it your needs.
There are plenty of resources available on Drupal.org on the forums, the handbooks and of course Google.
References:
Tags: 
Drupal vs Wordpress