Dissecting a Drupal Theme - dummies

By Lynn Beighley, Seamus Bellamy

Before you begin changing a Drupal theme, it’s good to know how themes are structured. To help you to understand the basic structure of a Drupal theme this example uses the Garland, because it contains all of the essential parts of a theme.

You can use FTP or your ISP’s file manager to look in the themes directory under Drupal and see the files that make up each theme. Look at the garland folder in the themes directory.


To follow the discussion better, enable the Garland theme and activate the main menu (not visible by default with this theme). Follow these steps:

  1. Click Appearance.

  2. Locate the Garland theme and click Enable and Set Default.

  3. Choose Structure→Blocks.

  4. Click the Garland tab at the top-right.

  5. Find the Main menu item in the list and drag it to the top of the Sidebar second section.

  6. Scroll down and click Save Blocks.

    Theme file types

The four types of files in the Garland theme are

  • CSS: The information in CSS (Cascading Style Sheet) files controls all the colors, font sizes, font styles, margin widths, and much more.

  • INFO: A very small text file containing theme-specific information.

  • PHP: These files contain lots of HTML code and some PHP code. They are responsible for displaying all the content that appears on the various content type pages such as comments and blocks.

  • PNG: Image files.

    Theme code files

Showing you how to modify and customize an existing theme is the focus of this discussion. To do that, you need to understand what each file in the theme controls. Garland contains eight files containing code:

  • style-rtl.css: Unless you’re creating a site for a language that is read from right to left, you can ignore this file. This is used to help make right-to-left running languages more readable.

  • style.css: This is the file to which you have to pay the most attention. This controls practically everything to do with the appearance of your site.

  • garland.info: This file contains the information Drupal needs about this theme.

  • node.tpl.php: This file controls the appearance of all the content types that appear in the blocks of the Garland theme. All your articles and blog posts are contained in nodes, for example.

  • page.tpl.php: The page template is the biggest file. It builds a complete page, including menus, all the blocks, and all the content. This defines where everything goes on the page. If, for example, you wanted the content in the Left Sidebar to shift to the right, this is the file you would change. The appearance of pages in Garland is managed by this file. The appearance of the content types in blocks within a page is managed by node.tpl.php.


  • comment.tpl.php: The comment template pulls in and structures an individual comment. Optionally, it can include a user photo and signature block. The following illustration shows a comment form in the Garland theme.


  • template.php: The node template controls the structure of content. All your stories and blog posts are contained in nodes, for example.

  • theme-settings.php: This controls what settings are available for this theme.

    Theme image files

Garland has a number of image files, but only two in the main directory:

  • logo.png: The Drupal logo that appears in the upper-left corner of this theme.

  • screenshot.png: The image preview of the theme.