Drupal theme development

DRUPAL THEME
DEVELOPMENT
By
Rajeev Ranjan

INTRODUCTION


Drupal is an open source content management system (CMS)
written in PHP. It is a publishing platform and used to create
blog and enterprise applications. Drupal gives a strong base
for organizing, structuring, creating, developing and managing
web presence. Drupal has standard structure which makes it
easier to access basic functionalities and source code to
anyone who wants to work on it. It comes with multiple user
features which allow creating multiple users and each can be
assigned different roles and permission. Drupal has
thousands of add-on modules and designs which enable to
you to create a unique website that you desire. Its PHP based
platform allows the safe and secure management of websites.



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 PHP template theme engine (the default one) but
you have several choices.



The following information was originally written for Drupal 7.1



Now We will Go to an Overview to how to make a template in
drupal.

DRUPAL TEMPLATE DEVELOPMENT






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


bluemarine.info — 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.

THE FILES OF A DRUPAL THEME








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.
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.

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.



The Above 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.

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.

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.
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.

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



$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
e.g.themes/box_grey or themes/box_grey/box_cleanslate.



$footer_message- The footer message as defined in the admin
settings.

in

,



$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 php template 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
description for the search button.

older

only)Translated



$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 style sheet 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.

Drupal theme development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Drupal theme development

Similar to Drupal theme development (20)

More from Fortune Innovations Dublin

More from Fortune Innovations Dublin (6)

Recently uploaded

Recently uploaded (20)

Drupal theme development