Planning to custom create a Drupal theme? Well, it is actually not tough to do so. You just need the right start and it’s quite easy. This article is a guide about creating your very own Drupal custom theme. A Drupal theme consists of a few PHP files, a CSS file, and an info file. While, I personally prefer the PHPtemplate theme engine, which is the default, you have a number of choices. You may refer to the bottom of this post for a link to the official Drupal Theme Developer's Guide that has the information on several other Drupal template engines.
Navigate to your /themes directory. You should be having a theme there called /bluemarine. Here we will be using that as an example.
It is important to note that before you edit any files, you should copy the theme to another directory and rename it. Your custom themes would go in the directory /sites/all/themes/. More details will be discussed later in this post.
A Drupal Theme consists of the following files:
- bluemarine.info — A needed file that is new to Drupal 6, which provides information about the theme.
- page.tpl.php — This is the main template that defines the content on the majority of the page.
- style.css — Is the CSS file that sets the CSS rules for the template.
- node.tpl.php — This file describes the content of the nodes.
- block.tpl.php — This one defines the content of the blocks.
- comment.tpl.php — This file defines the content of the comments.
- logo.png — Your logo, if you are using one.
- screenshot.png — Is a screenshot of your theme that is used in the admin panel and in the user account settings if you have enabled more than one theme so that visitors can choose which theme they want to use.
- box.tpl.php — This puts a box around things like comments. See also http://drupal.oyrg/node/11814.
- style-rtl.css — This file is new to Drupal 6's Bluemarine. I think it's a CSS for right to left languages and can be ignored if you're using a left-to-right language like English.
What are page.tpl.php and style.css
The page.tpl.php and style.css files are the primary files for your Drupal theme. The page.tpl.php consists of a mixture of HTML and PHP. Take a look at the file and you’ll be able to notice which snippets of PHP are used in which places. For instance, the following snippet from the page.tpl.php file inserts the site's <head> information. All you need to do is to copy that snippet into your own custom Drupal template.
<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 uses the PHP if statements to print out optional information, like the primary links, secondary links, and site slogan. You can control whether or not those are to be displayed in the Drupal control panel. While the Bluemarine template uses tables, you can very well remove the tables and make it a 100% CSS-based template.
<table border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td id="logo">
<?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
<?php if ($site_name) { ?>
<h1 class='site-name'><a href="<?php print $base_path ?>"
title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
<?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
</td>
<td id="menu">
<?php if (isset($secondary_links)) { ?>
<div id="secondary"><?php print theme('links', $secondary_links) ?></div><?php } ?>
<?php if (isset($primary_links)) { ?>
<div id="primary"><?php print theme('links', $primary_links) ?></div><?php } ?>
<?php print $search_box ?>
</td>
</tr>
<tr>
<td colspan="2"><div><?php print $header ?></div></td>
</tr>
</table>
The Drupal styles.css File
Now, let’s consider the style.css file. This file is rather very straightforward. A good recommendation from my side would be the Firefox Web Developer Toolbar for creating the style.css file. You can use the toolbars option Display ID & Class Details in the Information menu to view the CSS classes and ID's that Drupal is generating. This done, you can add your own CSS rules to the style.css file.
The other Drupal Theme Files
The other files that are in the Drupal theme are block.tpl.php, box.tpl.php, comment.tpl.php, and node.tpl.php. Each one of these controls the layout of particular parts of the template. The comment layout is defined by the comment.tpl.php, as shown below. It is basically quite straightforward PHP: "If there is a user picture, print the user picture, etc.
<div class="comment<?php if ($comment->status == COMMENT_NOT_PUBLISHED) print ' comment-unpublished'; ?>">
<?php if ($picture) {
print $picture;
} ?>
<h3 class="title"><?php print $title; ?></h3>
<?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?>
<div class="submitted"><?php print $submitted; ?></div>
<div class="content"><?php print $content; ?></div>
<div class="links">» <?php print $links; ?></div>
</div>
Your very own custom Drupal theme
All you have to do is make a copy of the default Bluemarine template and place it in your Drupal /sites/all/themes/ directory. You should create this directory if you haven't already, as it doesn’t exist by default. Check out the README file in /sites/all/ for more information. Rename the copy of Bluemarine to the particular name of your new theme. Now, enable the new theme.
It’s important to note that in Drupal 6 there are also theme info files. Thus, to change the name of the theme you'll also have to change the name in 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
Having done this, strip most of the HTML out of the page.tpl.php file, and then replace it with the HTML that you would like have for your theme. You can leave the PHP, and modify it as preferred. Also, If you are using Linux for Web development, then you may use Quanta Plus as an editor to edit your template files directly on the server. Every time you save the file in Quanta Plus, the remote copy of the file will also get updated.
Use the Firefox Web Developer Toolbar's Display ID & Class Details feature to view CSS information on your new template, with which you are viewing the browser. You can either start a new style.css file from the beginning, or change the existing one to get the template the way you wish it to be. To edit the display of blocks, nodes, and comments, edit the block.tpl.php, node.tpl.php, and comment.tpl.php files correspondingly.
After this, when you are finally finished with your template, take a screenshot and resize it to about 150x90 pixels. The next step is to upload it to your theme directory as screenshot.png.
Drupal Template Variables
The above examples consisting of the PHP snippets are just printing PHPtemplate variables. You can go to Drupal.org org's PHPtemplate variables page, for a complete list of available PHPtemplate variables, which can be used in your template. Below are the some available variables:
$breadcrumb
This is the HTML for displaying the breadcrumbs at the top of the page.
$closure
This requires to be displayed at the bottom of the page, for any active javascript that needs to be called once the page has already been displayed.
$content
This is 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
This is the footer message as defined in the admin settings.
$head
HTML as generated by drupal_get_html_head().
$head_title
This defines the text that is displayed in the page title.
$help
Defines the dynamic help text, primarily for admin pages.
$is_front
This is true if the front page is currently being displayed. Used to toggle the mission.
$language
This defines the language that the site is being displayed in.
$layout
This allows you to style various types of layout ('none', 'left', 'right' or 'both') differently, depending on how many sidebars are enabled.
$logo
This is the path to the logo image, as described in theme configuration.
$messages
HTML for status and error messages, which is to be displayed at the top of the page.
$mission
This defines 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)
This is an array containing the links as they have been defined in the phptemplate specific configuration block.
$sidebar_left
This is the HTML for the left sidebar.
$sidebar_right
This is the HTML for the right sidebar.
$site
The name of the site, always filled in.
$site_name
This is the name of the site, to be used in the header, empty when display has been disabled.
$site_slogan
This is the slogan of the site, empty when display has been disabled.
$styles
This is required for stylesheet switching to work. It also prints out the style tags required.
$tabs
Is the HTML for displaying tabs at the top of the page.
$title
This is the Title, different from head_title, as this is just the node title most of the time.
There are several other variables that are also available for your Drupal theme. If you want a good list, then consider looking at Chapter 8 of the essential book Pro Drupal Development.
Also the following two books from Packt Publishing are also worth looking at: Drupal 5 Theming and Building powerful and robust websites with Drupal 6.
Additional Drupal theme documentation
If you require any further information on how to make a Drupal theme, then you can look out at the official Drupal Theme Developer's Guide, the anatomy of a Drupal 6 theme page, and the Themeable Functions list.
Hope the discussion would provide ample help for you to build your own Drupal theme. And then when you're completely ready to build yourself a Drupal 6 theme right from scratch, then you may also go through David Lanier's Minimal Drupal 6 Theme Creation tutorial.
Comments
I just book marked your blog
I just book marked your blog www.valuebound.com on Digg and Stumble Upon. I enjoy reading your commentaries.
Pages
Add new comment