Theming

Movie Project: Override Template Files for Drupal 7

Last updated
Categories
Up-to-date with minor version
7.x

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

In this exercise you will demonstrate that you understand the CSS patterns used for smaller elements of Drupal such as fields, and can create selectors which override them appropriately. You will also override template files to create your own markup and suggest new template files.

Goal

Add a template file with custom classes and styles for the movie review content type.

Prerequisites

You will need the following knowledge and skills. If you need a review, check out the Additional resources section at the bottom of this page.

  1. Familiarity with the default classes that are generated by Drupal core.
  2. Override default classes to create page layouts.
  3. Use preprocessors to modify the theme.
  4. Create custom template files.

Wireframe reference

You will need to refer to the wireframe collection PDF.

Tasks

Create a custom template file for the Movie Review node.

Theme the layout of the page view of a Movie Review. Wrap the submitted by and links elements in an HTML wrapper div, and apply CSS to identify the new wrapper.

See how the Movie Review looks in full page and teaser view modes.

Create a theme suggestion for the Movie Review content type, so we have template files using the following convention: node--{CONTENT-TYPE}-{VIEW-MODE}.tpl.php.

Create template files for each new theme suggestion, with CSS to theme them.

Recap

  • By understanding the conventions used within Drupal themeing, we can extend the template files to allow fine-grained control over content elements.

Further your understanding

Additional resources

Creative Commons License

Drupal Training Resources by Damian Robinson are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.damianrobinson.co.uk.

Hands-On Exercises: Movie Project