How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips

Home › Drupal Tutorials

How to Make a Drupal Theme

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, a CSS file, and an info 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 has been updated for Drupal 6 on March 4, 2009. 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 Drupal 6's Bluemarine theme:

The Files of a Drupal Theme — A required file that is new to Drupal 6 which provides information about the theme. 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 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.

1 of 12

1/20/2011 4:56 AM

Just copy that snippet into your own custom Drupal template. Look at the file and notice which snippets of PHP are used where.php is a mix of HTML and PHP. but you can easily remove the tables and make it a 100% CSS-based template.tpl.tpl.php defines the comment layout as shown below. Use the toolbars option Display ID & Class Details in the Information menu to view the CSS classes and ID's that Drupal is generating.php file use PHP if statements to print out optional information such as primary links.tpl.php . ?></h3> <?php if ($new != '') { ?><span class="new"><?php print $new.tpl. Each one controls the layout of certain parts of the template. Other Drupal Theme Files Other files in the Drupal theme are block. The Bluemarine template uses tables. <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'. ?></span><?php } ?> <div class="submitted"><?php print $submitted.How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips. secondary links. For example. ?></div> 2 of 12 1/20/2011 4:56 AM .tpl. Then add your own CSS rules to the style.css file.tpl. comment. $secondary_links) ?></div><?php } ?> <?php if (isset($primary_links)) { ?> <div id="primary"><?php print theme('links'.com/how-to-make-a-drupal-theme page. You control whether those display in the Drupal control panel.php file inserts the site's <head> information.tpl.css file is straightforward. <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. box.php and style. } ?> <h3 class="title"><?php print $title. $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. It is fairly straightforward PHP: "If there is a user picture. ?> <?php if ($picture) { print $picture. <div class="comment<?php if ($comment->status == COMMENT_NOT_PUBLISHED) print ' comment-unpublished'.tpl. I recommend the Firefox Web Developer Toolbar for creating the style. and node.php .css files are the main files for your Drupal theme. The comment. and site slogan.css The page. etc.tpl.css File The style.css file.php .php .tpl.webdesign10. The page.php and style. print the user picture. the following snippet from the page.

php . 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. $head_title The text to be displayed in the page title. $footer_message The footer message as defined in the admin settings. and comments. If you are using Linux for Web development. To edit the display of blocks.tpl. e.php file and replace it with the HTML that you would like for your theme. See the README file in /sites/all/ for more information. node. the remote copy of the file will be updated. That directory doesn't exist by default.webdesign10.g. for any dynamic javascript that needs to be called once the page has already been <div class="content"><?php print $content. To change the name of the theme you'll also need to change the name in the bluemarine. Leave the file: . $help Dynamic help text. and comment. themes/box_grey or themes/box_grey/box_cleanslate.How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips. you can use Quanta Plus as an editor to edit your template files directly on the server.tpl. <?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. Below are the available variables from 24 July 2007: $breadcrumb HTML for displaying the breadcrumbs at the top of the page. version = VERSION core = 6. $Id: bluemarine. Enable the new theme. take a screenshot and resize it to about 150x90 pixels. $content The HTML content generated by Drupal to be displayed. edit the block. NOTE: In Drupal 6 there are also theme info files. Upload it to your theme directory as screenshot. or modify the existing one to get the template the way you would like. $directory The directory the theme is located in .org's PHPtemplate variables page.png . nodes.v modifying it as desired. 3 of 12 1/20/2011 4:56 AM . $closure Needs to be displayed at the bottom of the page.php files respectively.tpl. ?></div> <div class="links">&raquo. mostly for admin pages.x engine = phptemplate Then strip most of the HTML out of the page. Each time you save the file in Quanta Plus.tpl. Rename the copy of Bluemarine to the name of your new theme.4 2007/06/08 05:50:57 dries Exp $ name = Bluemarine description = Table-based multi-column theme with a marine and ash color scheme. 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. $head HTML as generated by drupal_get_html_head().php . so you should create it if you haven't already.css file from scratch. Either start a new style. When you are finished with your template.

$sidebar_left The HTML for the left sidebar.7 and older only) Onload tags to be added to the head tag. $search_url (4. $search_description (4.tpl.php $search_box True(1) if the search box has been enabled. different from head_title. empty when display has been disabled. $scripts ( $is_front True if the front page is currently being displayed. to be used in the header.webdesign10. $site_slogan The slogan of the site. 'right' or 'both') differently. 4 of 12 1/20/2011 4:56 AM . as defined in theme configuration. Used to toggle the mission.7 and older only)Translated description for the search button. This prints out the style tags required. Previously. $onload_attribute (4. $secondary_links (array) An array containing the links as they have been defined in the phptemplate specific configuration block. $mission The text of the site mission.x and after only) HTML to load the JavaScript files and make the JS settings available. $site The name of the site. as this is just the node title most of the time. $sidebar_right The HTML for the right sidebar. $tabs HTML for displaying tabs at the top of the page. empty when display has been disabled. to be displayed at the top of the page.x and after only)If you are in page.How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips. $layout This setting allows you to style different types of layout ('none'. $styles Required for stylesheet switching to work. $title Title. $search_button_text (4. 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. $messages HTML for status and error messages. $language The language the site is being displayed in. $logo The path to the logo image.7 and older only)URL the search form is submitted to. always filled in. javascript files are hardcoded into the page.7 and older only)Translated text on the search button. $node (5.php displaying a node in full page view then $node is available to your template. $site_name The site name of the site. depending on how many sidebars are enabled. 'left'.tpl.

September 13 . September 13 . Printer-friendly version Add new comment Comments Content Theme theme. and the Themeable Functions list. More Drupal Theme Documentation For more information on how to make a Drupal theme. Also check out these two books from Packt Publishing: Drupal 5 Theming and Building powerful and robust websites with Drupal 6.1:10pm — Steve Blaze (not verified) I like this page.3:54pm — Webmaster Tips 5 of 12 1/20/2011 4:56 AM .How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips. Average: Average: 4.webdesign10. and subscribe to my RSS feed. 2006. When you're ready to build a Drupal 6 theme completely from scratch. check out David Lanier's Minimal Drupal 6 Theme Creation tutorial. My question is can I theme a particular piece of content I created? Separate of course from the site reply 2006. check out the official Drupal Theme Developer's Guide. A good list can be found in Chapter 8 of the essential book Pro Drupal Development.1 (87 votes) How to Make a Custom Front Page in Drupal CSS Poster and Drupal Template Customization Drupal Theming Tutorials ‹ Why Drupal? up How to Make a Custom Front Page in Drupal › Did you find this post helpful? Leave a comment below. the anatomy of a Drupal 6 theme page. I believe that Chapter 8 is a free sample There are also other variables available for your Drupal theme.

Sign up to vote on this title
UsefulNot useful