Pro_Drupal7_Development: Themes [The Theme System]

In Drupal-speak, themes are a collection of files that make up the look and feel of your site. You can download

preconstructed themes from http://drupal.org/project/themes, or you can roll your own, which is what you’ll learn to

do in this chapter. Themesare made up of most of the things you’d expect to see as a web designer: style sheets,images, JavaScript files, and so on. The difference you’ll find between a Drupal theme and a plain HTML site is targeted templatefiles. Template files typically contain largesections of HTML and smaller special snippets that are replaced by dynamic

content as Drupal constructs the page. You can create targeted template files for just about every container of content in Drupal—such as the overall page, regions, blocks, nodes,comments, and even fields.We’ll walk through the process of

creating several component-level template files in a bit, but let’s start by installing an off-the-shelf theme from Drupal.org

and examine the components that make up that theme.

Installing an Off-the-Shelf Theme

There are hundreds of themes available for Drupal. If you are looking for a quick and easy way to get a site up and

running, you might consider browsing through the themes at www.drupal.org/project/ themes. Be sure to select “7.x” inthe “Filter bycompatibility” drop-down list to show only themes that have been ported to Drupal 7.

As you browse through the themes, you’ll often run across themes that are described as “starter themes.” Starter themes

are focused on providing a solid foundation on which to construct a new theme. Starter themes typically have a wealth

of inlinedocumentation and helpful features and functionality. The benefit of a starter theme is that it provides a solid

structure on which to lay graphical elements and colors, without having to start with a blank “piece of paper.” Themes that are not classified as starterthemes already have graphical effects (e.g., images, colors, fonts, etc.) applied and may fit

your needs with very little modification.

For demonstration purposes, we’ll install the Pixture Reloaded theme. There’s nothing significant about this theme other than it has been converted to work with Drupal 7. Visit the theme’s page on Drupal.org (http://drupal.org/project/pixture_reloaded), and copy the URL associated with the download link for the Drupal 7 version of the theme. Return to your site, click the Appearance link at the top of the page, and on the Appearance page click the “Install new theme” linkOn the form for uploading a new theme, paste the Pixture Reloadeddownload URL into the text box labeled “Install

from a URL,” and then click the Install button. Drupal will download and save the theme in your sites/all/themes

directory. You may then enable the theme as the default theme by revisiting the Appearance pageand clicking the “Set

default” link.

Installing themes from Drupal.org is simple and quick. You can download any number of themes and give them a test

drive on your site by following the foregoing directions, but it is likely that you’ll want at some point to create your

own customtheme. In the following sections, I’ll show you how to start with a clean slate and create a brand-new

Drupal theme from scratch.

Building a Theme

There are several ways to create a theme, depending on your starting materials. Suppose your designer has already given you the HTML and CSS for the site. It’s relatively easy to take the designer’s HTML and CSS and convert it into a Drupal theme. The general steps for creating a new Drupal theme include the following:

1. Create or modify an HTML file for the site.

2. Create or modify a CSS file for the site.

3. Create an .info file to describe your new theme to Drupal.

4. Standardize the file names according to what Drupal expects.

5. Insert available variables into your template.

6. Create additional files for individual node types, blocks, and so on.

We’ll start constructing our new theme by first deciding on a name—“Grayscale”—and then create a directory in the

sites/all/themes directory using that same name (sites/all/themes/grayscale). Next we’ll need to create an .info file for

our new theme in thesites/all/themes/grayscale directory. I’ll create the grayscale.info file initially with the basic

information necessary to incorporate the theme into Drupal’s theme registry:

name = Grayscale core =7.x

engine = phptemplate

Once you’ve saved the grayscale.info file, you can now enable the theme by clicking the Appearance link at the top of the pageand scrolling down until you see the Grayscale theme. Click the “Enable and set default” link to apply the theme as thesite’s

default theme. Click the Home button to visit the home page of your site, and volia! You have a new Drupal theme (see Figure

9-1), and all you had to do was create three lines of code in the .info file.

Figure 9-1. The site rendered in the Grayscale theme

While it would never win an award for creative design, the process that you just walked through shows how simple it is to create a Drupal theme from scratch. Let’s expand on our site a little bit by applying some CSS to rearrange and style things a bit. The first step is to create a new directory in your Grayscale theme directory called css. While it’s not required that you put all of your

CSS files into a subdirectory, it does make it nice so that others don’t have to dig through your theme directory to locate all the

CSS files. In the css directory, create a new file named style.css. The name is purely arbitrary, but several Drupal themes use

style.css as the naming convention for the primary .css file associated with that theme.

Next we need to instruct our theme to apply style.css to the theme. To do that, we’ll update the grayscale.info file by adding the

following line:

stylesheets[all][] = css/style.css

This specifies that style.css should be applied to all mediums used to display the site (screen, projector, and print). You can also

apply style sheets that are specific to a particular medium—for example, print, by using the following:

stylesheets[print][] = css/print.css

Or to use a style sheet for both screen and projector combine the two as shown below:

stylesheets[screen, projector][] = theScreenProjectorStyle.css

For our purposes, we’ll stick with all mediums. Next we’ll examine the structure that Drupal used to render the page so that we

can identify CSS IDs and classes to apply styles to. If you use Firefox, I suggest that you download and install Firebug (http://

getfirebug.com). If you use Internet Explorer, I suggest you download and install the IE Developers Toolbar (www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535), or if you’re using Safari,

try the built-in web inspector. All three tools provide the ability to inspect the structure of the site and easily identify which

CSS IDs and classes to apply styling to. Figure 9-2 shows the types of information that Firebug for Firefox displays when

inspecting a page.

Figure 9-2. Output generated by Firefox’s Firebug tool

Take a moment to download one of the tools if you don’t already have it, and once installed, use the Inspection option to examine the structure of the HTML and the DIVs that were generated by Drupal.

The next step is to define the styling for the CSS IDs and classes. Before taking that step, let’s look at the page source of our

site to see the HTML generated by Drupal for the home page of our new site, focused on the structure of the DIV tags. I’llomit

the HTML between the DIV tags for brevity’s sake. If you want to see the details of the page, simply right-click in the

browser window and select view source as it appears on the screen. I’ll show just the DIV structure between the <body> and

</body> tags.

</div></div>

</div>

</div></div>

</div></body>

There is significantly more between the DIV tags, but what is important for our exercise is to understand the general DIV structure so we can add style definitions to the css/style.css file. The following (see listing 9-1) are CSS definitions that I used to create the

visual design shown in Figure 9-3.

Listing 9-1. Contents of style.css

body {

background-color: #c6c6c6;

}

#page {

background-color: #c6c6c6;

}

#skip-link { width: 960px;

margin-right: auto; margin-left: auto; background-color: #c6c6c6;

}

#header {

width: 960px;

background-color: #ffffff; margin-right: auto;

margin-left: auto; margin-top: 10px; height: 40px; padding-top: 10px;

border-top: 3px solid #000;

border-bottom: 3px solid #000;

}

#logo {

float: left;

margin-left: 20px;

}

a#logo {

text-decoration: none;

}

#name-and-slogan { float: left;

margin-left: 100px;

}

#site-name a {

text-decoration: none;

}

#navigation { width: 960px;

margin-right: auto; margin-left: auto; background-color: #c6c6c6; height: 45px;

}

#navigation h2 { display: none;

}

ul#main-menu {

background-color: #EEE; height: 25px;

}

ul#main-menu {

text-decoration: none; padding-top: 5px;

}

ul#main-menu li a {

text-decoration: none; padding-right: 10px;

}

ul#secondary-menu { background-color: #333; height: 25px;

}

ul#secondary-menu li a { text-decoration: none; color: #fff;

padding-right: 10px; height: 25px;

border-right: 1px solid #fff;

}

ul#secondary-menu a:hover { color: #ff0000;

}

#main-wrapper { clear: both;

background-color: #ffffff; width: 960px;

margin-right: auto; margin-left: auto;

}

#main {

width: 960px; margin: 5px auto;

}

#content { width: 775px; float: right;

padding-left: 15px;

}

#sidebar-first { float: left; width: 130px; margin:0; padding: 20px;

background-color: #EEE;

}

#footer {

width: 920px; padding: 20px; margin-right: auto; margin-left: auto; clear: both;

min-height: 100px; background-color: #333;

color: #fff;

}

#footer a { color: #fff;

}

After saving style.css, revisit the home page of your site. It should look something like Figure 9-3.

Figure 9-3. The site after applying the style sheet additions

With just a four-line .info file and a few lines of CSS, we were able to create a brand-new Drupal theme from scratch.

We didn’t have to create template files, HTML, or touch a single line of PHP code in the process, demonstrating how easy and

power ful the Drupal theming is. One of the reasons the job of creating the Grayscale theme was so easy is that Drupal comes with a predefined set of template files that are applied to a theme when the theme itself does not provide those files as part of its own

distribution. In the nextsection, we’ll cover the details of the various template files.

The .info File

The Grayscale theme .info file had the minimum amount of information required to register the theme and make it available for selection on the Appearance page. In most cases, you’ll want to define your own regions, incorporate additional style sheets, and include

JavaScript files as part of your theme. Let’s take a look at how you expand the .info file to address each of those attributes.

Adding Regions to Your Theme

A region is essentially a section of the page on your site. When we constructed the Grayscale theme, we used the standard regions that Drupal automatically creates for us: sidebar first, sidebar second, content, header, footer, highlighted, help,page_bottom, and page_top. There may be situations where you want to divide your theme into additional regions, and we do that through a

combination of specifying the region in the .info file and including that region in our page.tpl.php file. To define a new region in

your theme, the syntax is as follows:

regions[alerts] = Alerts regions[featured] = Featured Articles regions[socialnetworks] = Social Networks

You can define as many regions as you wish in your .info file, but you must include page_bottom, page_top, help, and content in

your .info file, as core requires those regions to function properly. The next step is to update your page.tpl.php file toaddress your new regions. The process for displaying the region on the page is as follows:

<?php print render($page['alerts']); ?>

</div>

Adding CSS Files to Your Theme

When we created the Grayscale theme, we added a single CSS file that incorporated all of the styles that we needed to accomplish

our design objectives. There may be situations where you need to incorporate more than one style sheet, or you want style sheets

based on the device that the site is being viewed on. Both are accomplished by adding style sheets using the following syntax (assuming all of your style sheets are in a subdirectory named css in your theme directory).

;// add a style sheet that deals with colors for all mediums stylesheets[all][] = css/colors.css

;// add a style sheet just for printing stylesheets[print][] = css/print.css

;// add a style sheet just for projecting stylesheets[projector][] = css/showtime.css

;// add a style sheet for screen stylesheets[screen][] = css/style.css

;// add a style sheet for screen and projector stylesheets[screen, projector] = css/showit.css

Adding JavaScript Files

If your theme uses JavaScript, it’s a best practice to create and store the JavaScript in external files. To include those files into your theme requires that you list each JavaScript file in your .info file. Assuming you’ve placed all of your JavaScriptfiles into

asubdirectory of your theme named js, the syntax of including the files is as follows:

scripts[] = js/jcarousel.js

Adding Settings to Your Theme

There may be situations where you want your theme to be configurable without having to touch the template files or CSS. For

example, you may want to provide the ability for a site administrator to change the default font size and the default font face.Wecan do that by providing settings. To define a setting, you incorporate the definition into the .info file as follows:

settings[font_family] = 'ff-sss' settings[font_size] = 'fs-12'

Update your grayscale.info file with the foregoing settings and follow along as we implement the other pieces of the puzzle that

allow a site administrator to set the values and your theme to use the values. The next step is to provide the means for a site administrator to change the values. To do this, we’ll create a theme-settings.php file in our Grayscale theme directory and add the form elements necessary to collect the values for font family and font size. In the theme-settings.php file,

we’ll use the hook_form_system_theme_settings_alter() function to add the fields for setting the font family and font size.

Insert the following code:

<?php

function grayscale_form_system_theme_settings_alter(&$form, &$form_state)

{

$form['styles'] = array( '#type' => 'fieldset','#title' => t('Style settings'),'#collapsible' => FALSE, '#collapsed' => FALSE,);

$form['styles']['font'] = array( '#type' => 'fieldset', '#title' => t('Font settings'),

'#collapsible' => TRUE, '#collapsed' => TRUE,);

$form['styles']['font']['font_family'] = array( '#type' => 'select', '#title' => t('Font family'),

'#default_value' => theme_get_setting('font_family'), '#options' => array(

'ff-sss' => t('Helvetica Nueue, Trebuchet MS, Arial, Nimbus Sans L, FreeSans, sans- serif'),

'ff-ssl' => t('Verdana, Geneva, Arial, Helvetica, sans-serif'), 'ff-a' => t('Arial, Helvetica, sans-serif'),

'ff-ss' => t('Garamond, Perpetua, Nimbus Roman No9 L, Times New Roman, serif'),

'ff-sl' => t('Baskerville, Georgia, Palatino, Palatino Linotype, Book Antiqua, URW Palladio L, serif'),

'ff-m' => t('Myriad Pro, Myriad, Arial, Helvetica, sans-serif'),

'ff-l' => t('Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, Geneva, sans-serif'),),);

$form['styles']['font']['font_size'] = array( '#type' => 'select','#title' => t('Font size'),

'#default_value' => theme_get_setting('font_size'),'#description' => t('Font sizes are always set in relative units - the sizesshown are the pixel value equivalent.'),'#options' => array('fs-10' => t('10px'),'fs-11' => t('11px'),'fs-12' => t('12px'),

'fs-13' => t('13px'),'fs-14' => t('14px'),'fs-15' => t('15px'),'fs-16' => t('16px'),),);}

After saving the file, visit the Appearance page and click the Settings link for the Grayscale theme. You should now see the style settings feature that we just added at the bottom of the form. Click the Font Settings link to expand the form, as shown in

Figure 9-4.

Figure 9-4. The font settings options

We’ll do that by adding the settings for font family and font size in our theme’s $classes variable. To add the values, we’ll need to

create a template.php file. This file is used for various theme processing. We’ll look at this file in detail later in the chapter. For now we’ll create the template.php file in the Grayscale theme directory and a hook_process_HOOK() function to add the values of

the parameters to the $classes variable. The name of the hook_process_HOOK() function will be grayscale_process_html(), where grayscale is the name of the theme and html is the name of the .tpl.php file that we want to override. We can also override any

other theme file using the same hook_process_HOOK() function.

<?php

/**

* Override or insert variables into the html template.

function grayscale_process_html(&$vars) {

// Add classes for the font styles

$classes = explode(' ', $vars['classes']);

$classes[] = theme_get_setting('font_family');

$classes[] = theme_get_setting('font_size');

$vars['classes'] = trim(implode(' ', $classes));}

With the variables set, they will now be applied in the html.tpl.php file and used in the body tag through the $classes variable.

The html.tpl.php file resides in the modules/system directory and is part of core. Later in the chapter, I’ll show you how to

override core templates, including the html.tpl.php file.

If you printed the values of $classes, you would see, if you didn’t change the default values of font family and font size, the

following values: html front logged-in one-sidebar sidebar-first page-node toolbar toolbar-drawer ff-sss fs-12

You can see that ff-sss and fs-12 were added to the end of the $classes variable. The only thing left to do is to create

the CSS to address each of the options. We’ll update the css/style.css file to include styles for each of the options that we defined

in the theme-settings.php file we created previously.

/* font family */

.ff-sss {font-family: "Helvetica Nueue", "Trebuchet MS", Arial, "Nimbus Sans L", FreeSans, sans-serif;}

.ff-ssl {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}

.ff-a {font-family: Arial, Helvetica, sans-serif;}

.ff-ss {font-family: Garamond, Perpetua, "Nimbus Roman No9 L", "Times New Roman", serif;}

.ff-sl {font-family: Baskerville, Georgia, Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif;}

.ff-m {font-family: "Myriad Pro", Myriad, Arial, Helvetica, sans-serif;}

.ff-l {font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, sans-serif;}

/* Base fontsize */

.fs-10 {font-size:0.833em}

.fs-11 {font-size:0.917em}

.fs-12 {font-size:1em}

.fs-13 {font-size:1.083em}

.fs-14 {font-size:1.167em}

.fs-15 {font-size:1.25em}

.fs-16 {font-size:1.333em}

With everything set, try changing the font family and font size by visiting the Appearance page and clicking the Settings link for

the Grayscale theme.

Understanding Template Files

Some themes have all sorts of template files, while others, like our Grayscale theme, have only .info and .css files. The number of template files required by a theme is dependent on how much customization you want to do to the standard Drupal templates for thevarious components on your site. As you walk through the various template files, keep in mind thatif your theme doesn’t provide oneof the template files described here, Drupal itself will apply the template files contained in Drupal core for each associated

component (e.g., page, node, comment, field). I’ll show you where each of these files resides in thefollowing sections.

The Big Picture

There are several tpl.php files associated with any given Drupal theme. Some themes provide just the basic html.tpl.php, which you can think of as a theme file that has everything that appears above the <body> tag in a traditional HTML-based web site,

and the page.tpl.php file, which you can think of as everything between the <body> and </body> tags in a traditional HTML-based web site. Some themes take advantage of Drupal’s abilities to theme individual components on a page by providing additional

theme files, such as the following:

node.tpl.php: The file that defines how nodes are rendered on a page

field.tpl.php: The file that defines how a field is rendered on a page

block.tpl.php: The theme file that defines how blocks are rendered on a page

html.tpl.php is the granddaddy of all template files, and provides the overall page layout for the site.

Other template files are inserted into page.tpl.php, as Figure 9-5 illustrates.

Figure 9-5. Other templates are inserted within the encompassing page.tpl.php file.

The insertion of html.tpl.php, page.tpl.php, block.tpl.php, node.tpl.php, and field.tpl.php in Figure 9-5 happens automatically

by the theme system during page building. If your theme does not contain any or all of these files, Drupal uses thetemplates shipped with Drupal core, as shown in Table 9-1.

Before creating custom versions of some of these template files for our Grayscale theme, let’s take a brief tour of the structure and contents of the core template files just listed.

The html.php.tpl File

This is the default template that displays the basic HTML structure of a page on a Drupal site. The focus of this theme file is on

the elements between the opening <HTML> tag and the start of the <body> tag. In the following code, you can see that the

html.tpl.php file provides elements like the DOCTYPE definition, RDF definitions, HTML, a few DIV tags, and snippets of PHP

code that print the content associated with various variables, which are defined in Table 9-2.

While the template file is relatively simple, it does demonstrate the power of a Drupal themeand the ability to display dynamic

content by setting the value of variables at runtime and having the theme engine replace those values with content. The value of

variables can be set by the context of things like parameters in the URL, whether the user is ananonymous user or one that is

logged in, the role of the user if he or she is logged into the site, and other contexts that help define what should be rendered on

the page. We’ll see more of this as we look at other template files, but it’s important to understandthe significance of the little

snippets of PHP code you’ll see in the example html.php.tpl file here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>

" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces;?>

<?php print $head; ?>

<?php print $styles; ?>

<?php print $scripts; ?>

</head>

</div>

<?php print $page_top; ?>

<?php print $page; ?>

<?php print $page_bottom; ?>

</body></html>

Table 9-2 lists all of the variables that are made available to the html.tpl.php file through the various template processor and

preprocessor functions. For example, the $css variable contains a list of CSS files for the current page. Those CSS files were

defined in the .info file of the theme through the style sheets[all][] that were defined in that file.

Pro_Drupal7_Development

Thứ Năm, 29 tháng 5, 2014

Themes [The Theme System]

Installing an Off-the-Shelf Theme

Không có nhận xét nào:

Đăng nhận xét