From PSD to Drupal Theme Tutorial - Part III

Part III of III

The last two parts of the tutorial, we went over how to take a finished design using the Photoshop slice tool to html and css.

This part we will take that completed HTML page and make it into a functioning Drupal theme.

What you will need:

  1. Download the latest version of Drupal found here
  2. Read through the requirements for Drupal here
  3. For notes regarding installation of Drupal, please read this article
  4. You will also need a text-editor and web browsers for testing. (I would also suggest downloading the firefox add ons Web Developer Kit and Firebug


After you've downloaded/installed Drupal, refur to the theme folder within the Drupal directory. Here will be a few premade Drupal themes. Create a new folder with the name of your theme. This is where you will store your theme files.

Admin Panel ** You can change drupals default theme within the admin panel
Open up the theme folder called Garland, and open up the file called page.tpl.php This is the future of your HTML file!


Refer back to the HTML page we created in Part II. Basically, we need to replace some of the header and content to make it understood by Drupal.

Drupal relies upon the tag: <?php print ?> to print the specified sections in the page. Place this section right before <body> tag. 

<!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"
xml:lang="<?php print $language ?>" lang="<?php print $language ?>">
  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>


Save these changes as a new file: page.tpl.php within your new theme directory, and copy over style.css to that directory as well.

The body content of page.tpl.php will still be the same as your HTML file, this also needs to be changed.

By default, Drupal has these blocks specified and can be referenced in your page.tpl.php file: 

$header, $left_sidebar, $right_sidebar, $content, and $footer_message


These will be called in your page.tpl.php file by the tag: <?php print $right_content?>

How to use these tags? Simply replace the sections of your page.tpl.php that you want to have dynamic content to be placed in. In my example, I left comment tags for the sections I wanted to turn into blocks for the Drupal theme. In the HTML I had this:

<div class="maincontent"><!--Main Content!-->
	<h1>Xer inibh eniat lut</h1>
	<h2>Created by <a href="name">Name</a> Dec 19th</h2>
	<p>Lortin utat. Xer inibh eniat lut vel dit lore mod digna accum 
</p>
		<a href="link">Leave a Comment</a>
		</div>


To change this section to a block:
<div class="maincontent"><!--Main Content!-->
	<?php print $content ?>
		</div>


So I left the div tag and class around the content, because I wanted everything that is rendered inside the content block to have this tag. I will now do the same for the remaining blocks, in my example that means footer_message, menuorange, menugreen, menublue, menupink, topbanner. These last ones are custom block names, not the default names. They can be added as usual to your page.tpl.php file, but will not show up until they are specified in another file.

Create a page named template.php and include this code:

<?php

function Yourtheme_regions() {
 return array(
        'left' => t('left sidebar'),
        'right' => t('right sidebar'),
        'content' => t('content'),
        'header' => t('header'),
        'footer' => t('footer'),
        'menuorange' => t('orange'),
        'menugreen' => t('green'),
        'menublue' => t('blue'),
        'menupink' => t('pink'),
        'topbanner' => t('banner'),
   );
}
?>


Make sure you rename function Yourtheme_regions() to your theme name. You can customise your block sections here. Once you've added all the regions in your page.tpl.php file you'll be mostly finished your theme, just a few things left.
This is the final result of adding the blocks to page.tpl.php:

<body>
<!--Containing DIV!-->
	<div class="bdcontain">
<div class="topcontent">
<div class="topnav">	
	<!--Primary Links!-->
	<?php print $primary_links ?>
	</div>
	<div class="toplogo">
<!--Logo!-->
<img src="<?php print base_path() . path_to_theme() ?>/images/logo.png">
	</div>
</div>
	<div class="topbanner">
		<?php print $topbanner ?>
	</div>
<div class="maincontent"><!--Main Content!-->
	<?php print $content ?>	
</div>
<div class="rightcontent">
	<!--Blocks:Search Bar, Recent Entries, More Info, User Menu!-->
	<div class="greenblock"><?php print $menugreen ?></div>
	<div class="orangeblock"><?php print $menuorange ?></div>
	<div class="blueblock"><?php print $menublue?></div>
	<div class="pinkblock"><?php print $menupink ?></div>
	<div class="pinkblockbottom"></div>
</div>
		<div class="footerlogin">
		<!--FooterLogin!-->
		<?php print $footer_message ?>	
		</div>
	</div>
</body>


The one thing in this final code that I haven't gone over is the <?php print $primary_links ?> this is for printing the main links specified in ADMIN >> SITE BUILDING >> MENUS.

Blocks can be configured and added through ADMIN >> SITE BUILDING >> BLOCKS

There! You're theme is finished! The rest is content customisation, and I'll close by briefly explaining what I put in the block regions.

For my theme, I had to Add new blocks for the "topbanner" region. It basically just holds the image file, as I wanted it to change depending on which page it was on. Blocks have the option to appear on all but specified pages or no pages except specified.

The custom block regions should appear in the blocks drop down menu, and can be configured to however you want. I chose to have the green block hold the search bar. Orangeblock have the full navigation which is viewed only while logged in. Blueblock recent comments (which i chose to view on only pages where the blog appeared). And Pink Block which held recent blog posts. The footer also changes when a user logs in from login form to 'who's online'.

There are also many template files that can be added to further customisation of the theme, including front-page.tpl.php (front page), user_profile.tpl.php, blog.tpl.php.

Check out Drupal.org documentation for further information about theming, customisation, modules and more.

Beautiful

Submitted by Tash (not verified) on Tue, 10/02/2007 - 04:28.

Excellent work, man. Absolutely great! Keep 'em coming

cron.php

Submitted by Dawn (not verified) on Mon, 09/24/2007 - 09:23.

Hi Alexa,

Thanks for the tutorial - good work. I noticed you don't seem to have cron jobs running as my searches didn't return anything. I ran it on your site at http://www.xalking.com/cron.php, but maybe you'll want to schedule it to run regularly.

All the best,
Dawn