Home › Drupal Tutorials

How to Make a Drupal Theme

Tags:
2006, August 27 - 7:29pm — Webmaster Tips

Making a custom Drupal theme is actually quite easy. A Drupal theme is just a few PHP files and a CSS file. I prefer the PHPtemplate theme engine (the default one) but you have several choices. See the bottom of this post for a link to the official Drupal Theme Developer's Guide which has information on other Drupal template engines.

The following information was originally written for Drupal 4.7, but the concepts also work for Drupal 5 and 6 too.

Navigate to your /themes directory. You should have a theme there called /bluemarine. We will use that as an example.

NOTE: before you edit any files you will copy the theme to another directory and rename it. Your custom themes go in the directory /sites/all/themes/. Details about that come later in this tutorial.

Here is a list of the files in the Bluemarine Drupal template:

Bluemarine Drupal tempate directory

The Files of a Drupal Template

  • page.tpl.php — The main template that defines the content on most of the page.
  • style.css — The CSS file that sets the CSS rules for the template.
  • node.tpl.php — This file defines the content of the nodes.
  • block.tpl.php — Defines the content of the blocks.
  • comment.tpl.php — Defines the content of the comments.
  • logo.png — Your logo, if you are using one.
  • screenshot.png — This 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 — puts a box around things like comments. See also http://drupal.org/node/11814.

page.tpl.php and style.css

The page.tpl.php and style.css files are the main files for your Drupal theme. The page.tpl.php is a mix of HTML and PHP. Look at the file and notice which snippets of PHP are used where. For example, the following snippet from the page.tpl.php file inserts the site's <head> information. Just 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 use PHP if statements to print out optional information such as primary links, secondary links, and site slogan. You control whether those display in the Drupal control panel. The Bluemarine template uses tables, but you can easily 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

The style.css file is straightforward. I recommend the Firefox Web Developer Toolbar for creating the style.css file. Use the toolbars option Display ID & Class Details in the Information menu to view the CSS classes and ID's that Drupal is generating. Then add your own CSS rules to the style.css file.

Other Drupal Theme Files

Other files in the Drupal theme are block.tpl.php, box.tpl.php, comment.tpl.php, and node.tpl.php. Each one controls the layout of certain parts of the template. The comment.tpl.php defines the comment layout as shown below. It is fairly 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">&raquo; <?php print $links; ?></div>
  </div>

Your First Custom Drupal Theme

Just make a copy of the default Bluemarine template and put it in your Drupal /sites/all/themes/ directory. That directory doesn't exist by default, so you should create it if you haven't already. See the README file in /sites/all/ for more information. Rename the copy of Bluemarine to the name of your new theme. Enable the new theme.

Then strip most of the HTML out of the page.tpl.php file and replace it with the HTML that you would like for your theme. Leave the PHP, modifying it as desired. If you are using Linux for Web development, you can use Quanta Plus as an editor to edit your template files directly on the server. Each time you save the file in Quanta Plus, the remote copy of the file will be updated.

Use the Firefox Web Developer Toolbar's Display ID & Class Details feature to view CSS information on your new template that you are viewing the the browser. Either start a new style.css file from scratch, or modify the existing one to get the template the way you would like. To edit the display of blocks, nodes, and comments, edit the block.tpl.php, node.tpl.php, and comment.tpl.php files respectively.

When you are finished with your template, take a screenshot and resize it to about 150x90 pixels. Upload it to your theme directory as screenshot.png.

Drupal Template Variables

The PHP snippets in the examples above are just printing PHPtemplate variables. A complete list of available PHPtemplate variables that you can use in your template can be found on Drupal.org's PHPtemplate variables page. Below are the available variables from 24 July 2007:

$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 also other variables available for your Drupal theme. A good list can be found in Chapter 8 of the essential book Pro Drupal Development. I believe that Chapter 8 is a free sample download.

Also check out these two books from Packt Publishing: Drupal 5 Theming and Building powerful and robust websites with Drupal 6.

More Drupal Theme Documentation

For more information on how to make a Drupal theme, check out the official Drupal Theme Developer's Guide, the PHPTemplate theme engine documentation, and the Themeable Functions list.

Bookmark/Search this post with:
  • Delicious
  • Digg
  • StumbleUpon
  • Propeller
  • Reddit
  • Facebook
  • Google
  • Yahoo
‹ Shortcut for Installing Drupal & Modules Over SSHupCSS Poster and Drupal Template Customization ›

Did you find this post helpful? Leave a comment below, and subscribe to my RSS feed.

Comments

2006, September 13 - 1:10pm — Steve Blaze (not verified)

Content Theme

I like this page. My question is can I theme a particular piece of content I created? Separate of course from the site theme.

2006, September 13 - 3:54pm — Webmaster Tips
Webmaster Tips's picture

Theming Drupal Content

One way to do it would be to set the input type to "Full HTML" and add CSS classes and IDs to the content:

<div class="about">
  <p>Some text here.</p>
  <p>Some more text.</p>
</div>

Then add the CSS rules to the file style.css in your Drupal theme.

/* for the "about" page. (Comment it well so you don't forget what it is for) */
.about p {
  background-color: #eee;
  border: 3px solid #ccc;
  padding: 5px;
}
2007, January 15 - 5:42am — Flash web design template (not verified)

Thanks for the useful

Thanks for the useful information.
Robert.

2007, April 13 - 2:00am — Anonymous (not verified)

Thank you very much. Your

Thank you very much.
Your information is very helpful.

2007, June 9 - 10:34pm — Drupal Dope (not verified)

I'd like to replace the blue

I'd like to replace the blue gradient of blue marine at the top (header) with an image - yet I want to retain the text with the slogans, title etc. Is this possible (maybe by using a partially transparent image) - if so where would I make changes? I'm having trouble locating where the gradient is created. I do see where the logo.png is.

Also, what/where is the "bar" separating the top area from the main body of the page created. I understand that some of this might be done using CSS. I need some help identifying the parts so I can *intelligently* try to experiment with altering them. Thank You.

2007, June 19 - 9:09am — themegarden.org (not verified)

Interesting reading. Very

Interesting reading. Very helpfull.
It could be nice to find some article with complete drupal theme design process.

2007, June 19 - 3:22pm — Shay (not verified)

Thanks for this, its very

Thanks for this, its very helpful for a newbie like me just starting with Drupal and its themes.

2007, July 14 - 11:06am — Webmaster Tips
Webmaster Tips's picture

Drupal Themes

I highly recommend the new Drupal book by Apress: Pro Drupal Development by John K VanDyk and Matt Westgate. It has a lot of good information on Drupal theming.

2007, July 14 - 11:13am — Webmaster Tips
Webmaster Tips's picture

Drupal Theme Customization

Are you sure you mean the Bluemarine theme? Bluemarine doesn't have a gradient in the header.

Use the Firefox Web Developer Toolbar to display ID and Class information (in the Information menu). You will see that the header has a CSS ID called #header. You will also find other classes and IDs like .logo, .site-name, .site-slogan. Those control the display of the elements in the header.

You can use the Web Developer Toolbar to edit the CSS live on the page by going to CSS > Edit CSS. Edit the tab style.css (the CSS file from your theme). In Bluemarine (at lease in Drupal 5.1) you will see the following code:

#header {
background-color: #69c;
height: 100px;
}

Change that background-color to whatever you want. Or insert a background image by adding it there.

2007, July 22 - 2:03pm — Freeware Eugen (not verified)

My Themes is based also on

My Themes is based also on “bluemarine”. It gives thereby only few disadvantages: “bluemarine” consists it of tables and is not always good. I have try a Theme without tables to create, me however did not succeed :( I have myself decided my Themes on tables to develop. My last Themes can see here:

My first Themes for Drupal

2007, July 24 - 11:48pm — Webmaster Tips
Webmaster Tips's picture

Drupal CSS themes - tableless design

Nice themes...

One way to make Drupal themes without tables is to look up css layouts in Google. Then download an open-source CSS layout that you like. Put the main HTML in a Drupal template file called page.tpl.php. Insert the PHPtemplate variables into the HTML (a list of PHPtemplate variables is listed above). Put the CSS in a file called style.css.

Then add the other Drupal template files like block.tpl.php and comment.tpl.php. You can essentially copy those out of Bluemarine because they don't have tables in them.

Some places to find CSS layouts for making tableless Drupal themes are:

See also Chapter 8 of the Apress book Pro Drupal Development by John Van Dyk and Matt Westgate.

2007, July 31 - 11:06am — Freeware Eugen (not verified)

Thx. for tips :) PS: Forum

Thx. for tips :)

PS: Forum and Adminpanel makes most problems. block.tpl.php, comment.tpl.php, node.tpl.php or page.tpl.php do not make problems.

2007, December 4 - 2:09am — Oswel (not verified)

How can i make a Theme

Hey i know its kindo of dumb but, i've reading about customizing theme and some how i cant even change some minim details like backgrounds and stuffs.

I foun the #header and i did change a least the color but when i save the style.css nothing happens... its like they ignore my changes. If theres a manual where i can step by step (jaja its kind for dummies) change a theme or some one who can tell me how to make one or better if you guys can tell me how you do it. I have some skills of html (know the language) but i just can read css. Any way, some other guide i do apraciate.

What ill do maybe its record my all i did and then you see...

2007, December 4 - 8:30pm — Webmaster Tips
Webmaster Tips's picture

Drupal Theme CSS

If you post a link to your site, I could take a look.

Did you upload the CSS file to your server after you were done editing it? It might be a small problem like that.

2007, December 22 - 4:40pm — Tagir (not verified)

Very good tutorial. Thank's

Very good tutorial. Thank's a lot.

2008, January 31 - 1:45pm — Anonymous (not verified)

Hi, thanks for your

Hi, thanks for your article.

I am using the vote up or down module, and I want it to show on the comments of a specific content type.

Is there a way to force this by saving a comment-content_name.tpl.php or something like this?

Thanks

2008, February 14 - 5:10am — Alan F. (not verified)

Thanks for this nice

Thanks for this nice tutorial.
It was very helpful when I was Drupal theming novice :-)

2008, February 14 - 11:59am — Webmaster Tips
Webmaster Tips's picture

Drupal theming

Thanks for stopping by and leaving feedback. I like your "artists" theme. Just downloaded it and may use it on a site.

2008, May 7 - 6:37pm — Anonymous (not verified)

Print $scripts

I saw no mention of including <?php print $scripts ?> after $styles etc. Any reason that was omitted?

2008, May 7 - 10:20pm — Webmaster Tips
Webmaster Tips's picture

$scripts

Good catch...
I'm not sure why it's missing there, but I think that I copied and pasted it from Drupal 4.7's Bluemarine theme.

I've updated it now.

Thanks

2008, May 19 - 2:49am — Webmaster Tips
Webmaster Tips's picture

Bluemarine or Garland?

"I'd like to replace the blue gradient of blue marine at the top (header) with an image..."

Do you mean Bluemarine or Garland? I don't think Bluemarine has a header gradient. If you want to modify a theme I don't recommend starting with Garland. Bluemarine is a good beginners' theme, and after that try the Zen theme.

Syndicate content