Drupal: Themes, views, panels and other modules

by Andres Baravalle

Drupal: Themes, views, panels and other modules

  • Themes
  • Views
  • Panels

Themes

Theming Drupal

In the past weeks we have seen how to install Drupal, how to set access control and how to create and catalogue content.

This week we are going to work on making the interface of Drupal web sites both distinctive and attractive.

Drupal themes allow you to change the look and feel of a Drupal site. You can use themes contributed by others or create your own to share with the community.

What are Drupal themes?

A Drupal theme is a collection of files that defines the presentation layer of your Drupal site.

Drupal themes allow to:

  • Create layouts (how the content is structured in therms of regions)
  • Set design elements (e.g. fixed headers, footers, graphical elements)
  • Customise HTML elements (fonts, spacing, backgrounds etc)

Drupal also allows to create a sub-themes - based on existing themes.

Theme manager

Drupal to enable and disable themes through the Appearance tab (?q=admin/appearance). Themes can also be customised to some extent through the settings tab (?q=admin/appearance, then select Settings).

By default, you can toggle the display of several Drupal elements, including logo, site name, site slogan, user pictures, shortcut icon and menus.

You can also upload a custom logo and a custom shortcut icon (favicon).

Global settings (unless overridden) apply to all themes; some per-theme settings are also often available.

Theme anatomy

Drupal themes consist of a set of file that define and control the features of Drupal nodes:

  • a .info file
  • template files
  • template.php file

.info file

The .info file defines the name of the theme (which is set to the name of the file, excluding extension) and allows to define a number of features, including:

  • meta data as name, description and version
  • style sheets
  • JavaScripts
  • block regions

.info file example

name = Garland
description = A multi-column theme which can be configured to modify colors and switch between fixed and fluid width layouts.
package = Core
screenshot = images/screenshot.png
core = 7.x
stylesheets[all][] = style.css
stylesheets[print][] = print.css

template files

.tpl.php files are typically used for the (x)HTML markup and PHP code to modify Drupal's appearance.

Each .tpl.php file handles the output of a specific themable chunk of data.

They are optional, and if none exists in your theme it will fall back to the default output.

Default versions for these files are defined in other Drupal (core) modules. For example, the default version for the comment.tpl.php template, is defined in the comment module.

template files (2)

Commonly defined template files include:

The full list of Drupal core template files includes several dozens of files.

template.php

The template.php file is used for conditional logic and data processing. This includes custom functions, overriding theme functions or any other customization of the raw output.

Drupal themes

Basing on intended use, Drupal themes can be classified in two categories:

  • End User themes: themes including many "theme settings", which allow an end user (not a developer) to have a customised version of a theme (e.g. Acquia Marina and Tapestry)
  • Starter themes: they are not supposed to be used on their own, but to be used as basis for development (more in the next pages)

What does a theme look like?

There are a number of popular Drupal themes available to download in the Drupal web site.

To try them, download and enable them on your own Drupal web site (/?q=admin/appearance) or use a Drupal theme gallery, as drupal7themegallery.com

Drupal starter themes

Popular starter themes include:

More starter themes are available in the Drupal web site.

Testing Drupal themes

When testing Drupal themes, you may find yourself installing a theme that breaks your Drupal installation.

To solve it, force a default theme by editing your settings.php file and adding a line like this:

$conf["theme_default"] = "garland";

After your web site works again, comment the line by adding a "#" sign in front of it and upload again.

Activity #1

Download, enable and test (/?q=admin/appearance) the Zen theme and other 2 starter themes of your choice.

Customise the themes by setting your own logo and a "Who's online" block in any of the regions defined by the theme.

Activity #2

Download, enable and test (/?q=admin/appearance) at least three End User themes. A list of popular themes is available here.

Customise the themes by setting your own logo and a "Who's new" block in any of the regions defined by the theme. Do not display the "Who's online" block.

Activity #3

The Color module allows to customise the color scheme of the web site, without any coding.

Download and enable the Color module from the Drupal web site, and create a custom color scheme for the Garland theme (/?q=admin/appearance/settings/garland).

Customising a Drupal theme

Customising an existing theme is easy:

  1. Create a folder named themes under sites/default (if it doesn't exist) and add a folder for your new theme here (no spaces in the name)
  2. Copy the original theme in your folder
  3. Change the .info file as needed and specify a base theme setting
  4. Make your changes, upload and enable your new theme!

Customising a Drupal theme (2)

The approach just described is not optimal - why?

Creating a Drupal sub-theme

Creating a Drupal subtheme allows to keep the link between your theme and the original theme.

Your theme will be just overriding (part of) the original theme.

Debugging your CSS

Writing good CSS is the basis of creating good themes. To debug your CSS and/or to identify page elements, you can use the Web Developer Toolbar or Firebug.

Both tools are available for Chrome and Firefox.

Activity #4 (advanced and optional)

The Zen theme is designed to work through sub-themes. Create a new Zen sub-theme, with the same name of your website (no spaces), by following the instructions in the Zen documentation. If you are at home or if you have earphones, you can also follow this screencast (it's based on using a Mac but most of it can be replicated on Windows).

Customise the subtheme by:

  • changing the page spacing
  • changing the spacing for the block elements
  • changing the headings (h1, h2 etc)

Views

Why Views?

Views is one of the most powerful and complex Drupal modules, allowing you to use a graphical user interface to run queries against a Drupal and to manipulate the visualisation of the results.

What can you do with Views?

You can use Views (amongst other things) to:

  • Sort your nodes differently (e.g. in the home page)
  • Sort your taxonomy/term view in a different way
  • Display articles in a different way (or any node)
  • Display a block with the most recent posts of some particular type
  • Display a monthly archive similar to the typical Movable Type/Wordpress archives

Views: caveats

Views is a powerful module, but doesn't excel in robustness. When using views, you may experience the occasional problem/bug.

If that's the case, it's worth trying a more recent (e.g. development, or git) version or a more stable one.

We will be using the latest development version; if you are reading this page much after April 2014, it may not be any more the best choice.

Activity #5

Download, install and enable the Advanced Help module and download and install the Views module (Development version).

After the installation, open the Modules page and look for the Views module. You will see that the Views module has a dependency on a module that is not part of Drupal core.

You will have to download, install and enable that module before you can enable Views.

Conceptual framework

All views rely on a conceptual framework that includes:

  • Fields are the individual pieces of data being displayed
  • Arguments, or additional parameters that dynamically refine the view results, passed as part of the path
  • Sort criteria, which determine the order of items displayed in the view results
  • Filters, which limit items displayed in the results
  • Displays, which control where the output will be seen

Activity #6

Following the Views documentation, create a page to list users by role. The documentation doesn't match exactly the version of Views - so some steps might be slightly different from how they are described.

Step 8 is optional; please note:

  • The feature required to implement it is currently known as Contextual Filter
  • Roles are identified by id, not name

Activity #7

Before proceeding with this activity, you need to have a Drupal site with some content and a vocabulary.

Use the Views module to create a View (based on cloning the Tracker view) that will display only nodes that have 2 different taxonomy terms.

This is achieved by using the filtering feature of the Views module.

Activity #8

Use the Views module and edit the front page view to display only nodes from a selection of authors.

Panels

What are Drupal Panels?

Drupal Panels are a way to create complex pages by combining nodes and/or views in a single page.

Activity #9

Download and install the Panels module. Enable all the modules in the Panels category, and the Page manager module.

Panels options

Panels elements include:

  • Activity, to add recent posts, comments etc.
  • Menus, to insert any menus
  • Page elements, to add standard page elements from the site settings
  • Views, to add existing views
  • Widgets, to add elements as log-in and search forms
  • New custom content
  • Existing nodes

Panels example

Here is an example of using Panels to create a complex home page.

Activity #10

Create a landing page including an appropriate selection of widgets, suitable to be used as home page.

This work

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License

Creative Commons License

That's all folks