Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
com/how-to-make-a-drupal-theme
2006, August 27 - 7:29pm — Webmaster Tips Tags: CSS HTML / XHTML PHP Drupal
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.
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.
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.
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
How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips.webdesign10.com/how-to-make-a-drupal-theme
<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.
2 of 12 1/20/2011 4:56 AM
How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips.webdesign10.com/how-to-make-a-drupal-theme
NOTE: In Drupal 6 there are also theme info files. To change the name of the theme you'll also need to change the name
in the bluemarine.info file:
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 .
$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.
3 of 12 1/20/2011 4:56 AM
How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips.webdesign10.com/how-to-make-a-drupal-theme
$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.
4 of 12 1/20/2011 4:56 AM
How to Make a Drupal Theme: a Drupal theming tutorial | Webmaster Tips http://tips.webdesign10.com/how-to-make-a-drupal-theme
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.
When you're ready to build a Drupal 6 theme completely from scratch, check out David Lanier's Minimal Drupal 6 Theme
Creation tutorial.
Average:
Did you find this post helpful? Leave a comment below, and subscribe to my RSS feed.
Comments
I like this page. My question is can I theme a particular piece of content I created? Separate of course from the site
theme.
reply
5 of 12 1/20/2011 4:56 AM