David Slack - Web developer

Info

The first file we want to edit is the .info file so open the file in your editor. This file controls all the settings of the Theme and without it Drupal will not see your theme. Here are some of the things you can add:

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }name = Dodgy Dave description = Tableless, 3 column, elastic width. Designed Created for Dodgy Daves Discount Emporium by Dave Slack version = 1 core = 6.x engine = phptemplate stylesheets[all][] = style.css stylesheets[print][] = print.css scripts[] = script.js{/syntaxhighlighter}

Lets explain some of this. Name is the name of the theme and description is the description of the theme. The version is what version of the theme we are on and is useful if you put your theme online so developers can keep track of updates and upgrades. core is the version of Drupal and engine is the theme engine used (you can get other engines to plug into Drupal, but that is beyond the scope of this site). The last 3 lines tell the theme engine where the css and javascript files are.

Next we will add regions to our theme. A region is a place to add content. think of it as just a holder to add things later. For our theme we need these regions:

regions[header_nav] = Header Nav
regions[content] = Content
regions[left_sidebar] = Left Sidebar
regions[right_sidebar] = Right Sidebar
regions[footer] = Footer

Add the above to the .info file under the last text. It goes regions[DRUPAL_NAME] = HUMAN READABLE NAME

Block

Next we need to add the code to 'block.tpl.php'. This file controls the blocks of the site. A block is a block of code to do something for example a Recent Comments block, a Tags block or a Latest Posts block. A region can hold as many blocks as needed so we will create the code for each block. 

Add this code to the bottom of the file:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>"> <?php if (!empty($block->subject)): ?> <h2><?php print $block->subject ?></h2> <?php endif;?> <div class="content"><?php print $block->content ?></div> <div id="block-<?php print $block->module .'-'. $block->delta; ?>-bottom" class="clear-block-bottom block-bottom block-<?php print $block->module ?>-bottom"></div> </div>

With this code we are creating a div with the ID of the block and adding some classes to it. We are then adding a h2 tag with the title and then the content of the block. This menas using the class we can style all the blocks and with the ID we can style individual blocks. 

There is also a div at the bottom I have added incase we want to style the bottom of the block.

Comment

The 'comment.tpl.php' file holds the markup for each comment. This is a simple file so simply copy the code below and paste into your 'comment.tpl.php' file under the header you've already added from the previouse page 

<div class="comment<?php print ($comment->new) ? ' comment-new' : ''; print ' '. $status; print ' '. $zebra; ?>"> <div class="clear-block"> <?php if ($submitted): ?> <span class="submitted"><?php print $submitted; ?></span> <?php endif; ?> <?php if ($comment->new) : ?> <span class="new"><?php print drupal_ucfirst($new) ?></span> <?php endif; ?> <?php print $picture ?> <h3><?php print $title ?></h3> <div class="content"> <?php print $content ?> <?php if ($signature): ?> <div class="clear-block"> <div id="idSignatureSplit"></div> <?php print $signature ?> </div> <?php endif; ?> </div> </div> <?php if ($links): ?> <div class="links"><?php print $links ?></div> <?php endif; ?> </div> 

Node

The 'node.tpl.php' page holds the markup for each node. Any content is counted as a node from a new page to a blog post to a new product, so this is the markup for all the content when it is its teaser form or in its full form. Simply past the code below into your 'node.tpl.php' under your header

<div id="node-<?php print $node->nid; ?>" class="<?php print ($teaser ? 'node-teaser' : 'node'); ?><?php if ($sticky&&$page == 0) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?> clear-block <?php if ($page == 0) { ?>node-in-list<?php }; ?>"> <?php if ($page == 0): ?> <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2> <?php endif; ?> <?php if ($submitted): ?> <div class="clSubmitted"> <!--div class="clSubmittedImage"><?php print $picture ?></div--> <div class="clSubmittedInfo"><?php print $submitted; ?></div> </div> <?php endif; ?> <div class="content clear-block"> <?php print $content ?> </div> <div class="clear-block"> <?php if ($links): ?> <div class="links"><?php print $links; ?></div> <?php endif; ?> </div> </div>

Page

The 'page.tpl.php' file holds the markup for everypage on your site (unless we override it, see later) and will include all your region holders, navigations holders, breadcrumb holder and all the things that will be on every basic page, including the home page.

Before we start to edit this file we want to create the layout of the site in CSS and XHTML so we'll hold back making chages to this page until we have the layout created.

Template

The 'template.tpl.php' file holds all the code that is accessed on all the pages, so if you want a function accessed on every page then you would add it here. For example, the default Drupal install creates two meta tags for the content type. This causes no problems but can cause your site to fail W3C Validation. To combat this we add a function to the 'template.tpl.php' to take one of them out.

You could add this function to your 'page.tpl.php', but you may want to override this page later so you would have to recreate this function for every override. Also, adding these functions to a seperate file keeps your 'page.tpl.php' clean.

We will takle this file last when we know what we will need for it.

Now, lets create the layout for our theme