This CSS simply adds a defi nition for some element with the ID of printer-button.
We will see that element a little later in this chapter. The styles here will fl oat that element to the right side of the screen, add a little padding, and make the font bold.
Adding JavaScript to a theme
We now have a shiny new theme to work with. Let's turn our attention to incorporating our JavaScript print tool into that theme.
This will require three short steps:
1. Add a template that will display a Print link.
2. Make a minor adjustment to the stylesheet to make this link stand out.
3. Add the JavaScript to our page.
Let's start with the template.
Overriding a template
Bluemarine already has all of the templates required for displaying Drupal.
However, we want to add a link on the righthand side of the main content display that will show a Print link. When clicked, this link will run our JavaScript.
To do this, we want to override Bluemarine's page.tpl.php fi le. In other words, we want to provide a Frobnitz template that will be used instead of Bluemarine's.
Since we want it to primarily look the same, we will start by copying themes/
bluemarine/page.tpl.php into sites/all/themes/frobnitz/.
The page template (page.tpl.php) is responsible for rendering the main structure of a Drupal page, including the main body of the HTML.
Let's take a quick look at the page template just to see howit's structured. Don't worry about the details. Most of it is just boilerplate HTML:
<?php
// $Id: page.tpl.php,v 1.28 2008/01/24 09:42:52 goba Exp $
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="<?php print $language->language ?>"
xml:lang="<?php print $language->language ?>"
dir="<?php print $language->dir ?>">
<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>
<?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>"
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)) { ?><?php print theme('links', $secondary_links,
?><?php } ?>
<?php print $search_box ?>
</td>
</tr>
<tr>
<td colspan="2"><div><?php print $header ?></div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="content">
<tr>
<?php if ($left) { ?><td id="sidebar-left">
<?php print $left ?>
</td><?php } ?>
<td valign="top">
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<div id="main">
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>
<?php if ($right) { ?><td id="sidebar-right">
<?php print $right ?>
</td><?php } ?>
</tr>
</table>
<div id="footer">
<?php print $footer_message ?>
<?php print $footer ?>
</div>
<?php print $closure ?>
</body>
</html>
There are a few important things to note about the template.
First, templates are the only place in Drupal where you will see this mix of PHP code and HTML. By design, Drupal keeps programming logic separate from layout.
Themes are the only area where these two converge.
PHP logic will always be enclosed inside the PHP processor instruction tag:
<?php ... ?>
Second, the PHP code in templates is generally restricted to the following:
Simple print statements (
• print $variable_name)
A handful of function calls, usually to either the theming subsystem
•
(theme()) or to the translatation subsystem (t()) Control structures, like
• if/else and foreach, to determine what needs to be displayed
If you are not a PHP expert, you can learn these techniques just by reading the themes.
Finally, the page template creates the basic framework for the page. Smaller sections are created by other templates, and provided to this template late in the rendering process.
For example, in Bluemarine, blocks are themed with block.tpl.php. Then the themed blocks are put in their designated regions. In this example, all of the blocks that are displayed in the lefthand column will be formatted and placed in the siderbar-left region, which is designated in the page.tpl.php fi le by the $left variable. Then the page.tpl.php fi le simply prints $left:
<table border="0" cellpadding="0" cellspacing="0" id="content">
<tr>
<?php if ($left) { ?><td id="sidebar-left">
<?php print $left ?>
</td><?php } ?>
<td valign="top">
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<div id="main">
There are many variables to keep track of in the page.tpl.php template (block.
tpl.php is much simpler). Fortunately for us, we won't be dealing with all of the variables directly. We're more interested in the HTML and JavaScript.
The Garland theme (themes/garland/) is very well-documented. You can get an idea of what each variable stands for by reading the comments at the top of Garland's templates.
What we now want to do is add a snippet of HTML to this theme that will add our new link. Here is our addition:
<table border="0" cellpadding="0" cellspacing="0" id="content">
<tr>
<?php if ($left) { ?><td id="sidebar-left">
<?php print $left ?>
</td><?php } ?>
<td valign="top">
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<!-- New Content -->
<div id="printer-button"><a
href="javascript:PrinterTool.print('main')" >
Print</a></div>
<!-- End new content -->
<div id="main">
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>
<?php if ($right) { ?><td id="sidebar-right">
<?php print $right ?>
</td><?php } ?>
</tr>
</table>
This section of code occurs about thirty fi ve lines into page.tpl.php. The
highlighted lines are highlighted are the only ones we've added. In these lines we create a new <div></div> tag, and then put a Print link inside. When clicked, this link executes the JavaScript function PrinterTool.print('main').
Recall that PrinterTool.print() takes as an argument the HTML ID (the value of id="" in an HTML tag). Taking a glance at page.tpl.php, we can quickly see what element this ID belongs to. In fact, it's directly below the link we just added:
<div id="main">
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>
<?php print $help ?>
<?php print $content; ?>
<?php print $feed_icons; ?>
</div>
This is the section of the template the print function will load into a new window for printing. Of course, all of the PHP calls will be replaced with HTML content.
We have one short step left before we can test out our new JavaScript-enabled theme.