How to Make Drupal Themes that Impress
To create a custom Drupal is rather easy, of course,
if you know some basic info to start with. A Drupal theme consists of CSS File, a few PHP files and info file. Most people suppose the PHPtemplate theme engine is the best solution, however, you have different things to choose from.
The following information is written for Drupal 6. The theme /bluemarine is used as an example for this post. You can find it in your /themes directory.
IMPORTANT: you should copy the theme to another directory before start editing any files. Don’t forget to rename it as well. Your custom themes go in the directory /sites/all/themes/.
This is the list of the files in the Drupal 6’s Bluemarine theme presented:
- block.tpl.php — Defines the content of the blocks.
- bluemarine.info — A required file that provides information about the theme.
- box.tpl.php — puts a box around things like comments. You also can check http://drupal.org/node/11814.
- comment.tpl.php — Defines the content of the comments.
- logo.png — Your logo.
- node.tpl.php —Defines the content of the nodes.
- page.tpl.php — The main template that defines the content on most of the page.
- screenshot.png —Used in the admin panel and in the user account settings when you have enabled more than one theme. Thus, visitors can choose which theme they want to use.
- style.css — The CSS file that sets the CSS rules for the template.
- style-rtl.css —CSS for right to left languages. Can be ignored if you use a left-to-right language such as English.
The Files of a Drupal Theme Explained
page.tpl.php and style.css
These are the main files for the your Drupal theme. The page.tpl.php is a mix of HTML and PHP. This file allows you to learn where used certain snippets of PHP. Here is the snippet from the page.tpl.php file that inserts the site’s <head> information. You can copy it into your custom Drupal template as well.
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<script type=”text/javascript”><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>
The following code from the Bluemarine page.tpl.php file use PHP if statements to print out optional information such as site slogan, secondary links and primary links. You can control their display in the Drupal control panel. With Bluemarine template using tables, you can remove them easily to make it CSS-based template only.
<table id=”header” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td id=”logo”><a title=”<?php print t(‘Home’) ?>” href=”<?php print $base_path ?>”>
<img src=”<?php print $logo ?>” alt=”<?php print t(‘Home’) ?>” /></a>
<h1><a href=”<?php print $base_path ?>”>
title=””></a></h1>
</td>
<td id=”menu”></td>
</tr>
<tr>
<td colspan=”2″></td>
</tr>
</tbody>
</table>
The Drupal styles.css File
The style.css file is straightforward. It is better to use the Firefox Web Developer Toolbar to create this type of file. Choose the toolbar option Display ID & Class Details in the Information menu and see the CSS classes and ID’s that Drupal generates. Then you can add your own CSS rules to this style.css file.
Other Drupal Theme Files to Know
Other files in the Drupal theme are node.tpl.php, comment.tpl.php, box.tpl.php and block.tpl.php. All of them control the layout of certain parts of the template. The comment.tpl.php defines the comment layout as displayed below. It is rather straightforward PHP:
<div>
<?php if ($picture) {
print $picture;
} ?>
<h3><?php print $title; ?></h3>
<?php if ($new != ”) { ?><span><?php print $new; ?></span><?php } ?>
<div><?php print $submitted; ?></div>
<div><?php print $content; ?></div>
<div>» <?php print $links; ?></div>
</div>
Create Your First Custom Drupal Theme: Things to Start With
First of all, you need to make a copy of the default Bluemarine template and put it in your Drupal /sites/all/themes/ directory as we have already mentioned above. You need to create that directory, because it doesn’t exist be default. You also can check README file in /sites/all/ for details. Then you should rename this copy and enable a new theme created.
However, there are also theme info files in Drupal 6. Thus, in order to change the name of the theme you should also change the name in the the bluemarine.info file:
; $Id: bluemarine.info,v 1.4 2007/06/08 05:50:57 dries Exp $
name = Bluemarine
description = Table-based multi-column theme with a marine and ash color scheme.
version = VERSION
core = 6.x
engine = phptemplate
Then you should strip most of the HTML out of the page.tpl.php file and replace it with the HTML that you choose for your theme. Leave the PHP, modifying it as desired. It is recommended to use Quanta Plus in case you prefer Linux for Web development. Thus, the remote copy of the file will be updated every time you save file in Quanta Plus.
In order to view CSS information on your new template that you are viewing the browser you can use Display ID & Class Details feature of Firefox Web Developer Toolbar. You can start a new style.css file or just modify the existing one to get and get the template you want. Just edit the block.tpl.php, node.tpl.php, and comment.tpl.php files in order to edit the display of blocks, nodes, and comments accordingly.
As soon as you finish your template, you should take a screenshot and resize it to 150×90 pixels approximately. Then, upload it to your theme directory as screenshot.png.
Drupal Template Variables to Check
The above mentioned PHP snippets are just printing PHPtemplate variables. You can find more info about them here PHPtemplate variables
The following list presents you available variables as well:
b$breadcrumb
HTML for displaying the breadcrumbs at the top of the page.
$closure
Needs to be displayed at the bottom of the page, for any dynamic javascript that needs to be called once the page has already been displayed.
$content
The HTML content generated by Drupal to be displayed.
$directory
The directory the theme is located in , e.g.
themes/box_grey or themes/box_grey/box_cleanslate.
$footer_message
The footer message as defined in the admin settings.
$head
HTML as generated by drupal_get_html_head().
$head_title
The text to be displayed in the page title.
$help
Dynamic help text, mostly for admin pages.
$is_front
True if the front page is currently being displayed. Used to toggle the mission.
$language
The language the site is being displayed in.
$layout
This setting allows you to style different types of layout (‘none’, ‘left’, ‘right’ or ‘both’) differently, depending on how many sidebars are enabled.
$logo
The path to the logo image, as defined in theme configuration.
$messages
HTML for status and error messages, to be displayed at the top of the page.
$mission
The text of the site mission.
$node
(5.x and after only)If you are in page.tpl.php displaying a node in full page view then $node is available to your template.
$onload_attribute
(4.7 and older only) Onload tags to be added to the head tag, to allow for autoexecution of attached scripts.
$primary_links (array)
An array containing the links as they have been defined in the phptemplate specific configuration block.
$scripts
(5.x and after only) HTML to load the JavaScript files and make the JS settings available. Previously, javascript files are hardcoded into the page.tpl.php
$search_box
True(1) if the search box has been enabled.
$search_button_text
(4.7 and older only)Translated text on the search button.
$search_description
(4.7 and older only)Translated description for the search button.
$search_url
(4.7 and older only)URL the search form is submitted to.
$secondary_links (array)
An array containing the links as they have been defined in the phptemplate specific configuration block.
$sidebar_left
The HTML for the left sidebar.
$sidebar_right
The HTML for the right sidebar.
$site
The name of the site, always filled in.
$site_name
The site name of the site, to be used in the header, empty when display has been disabled.
$site_slogan
The slogan of the site, empty when display has been disabled.
$styles
Required for stylesheet switching to work. This prints out the style tags required.
$tabs
HTML for displaying tabs at the top of the page.
$title
Title, different from head_title, as this is just the node title most of the time.
There are quite a lot of information concerning creating a Drupal theme including various books and official Drupal Theme Developer’s Guide