Building Drupal Zen subthemes with Dreamweaver CS4

Additional Requirements

Drupal 6

• Download

Drupal Zen theme project

• Download

Drupal API extension for Dreamweaver

• Download

Designers continue to ask, "What is the best way to start a Drupal theme?" Drupal, a web content management system (CMS) popular for being extensible, has its share of designers struggling with some basic questions on converting custom designs into new themes. Most designers don't have the time of starting from scratch—project deadlines and budgets are often tight, and Drupal is new for many people so there is that learning curve.

For Dreamweaver users, Drupal has changed the traditional workflow. Traditionally, you would upload pages each time when content new content is needed. In addition to managing your content, Drupal also helps you build websites, but without the need to upload files for each page of content. Instead, Drupal manages all your content in a database and provides dynamic forms to add and administer content across the entire site—from pages and articles to user comments. Merging these two pieces of software should be easy, and with Drupal doing a lot of the dirty work, designers can focus on the best part: the site theme.

Still, designers need a production edge. The need for a theme framework grew very quickly. Inspired by the CSS Zen Garden site, community members collaborated on a blank (white) Drupal theme called Zen. The Zen theme project contains starter files and instructions to help designers rapidly build standard 1-2-3 column theme designs without having to start from scratch each time. Designers assemble theme pieces, all built on top of Zen, and any spot you missed will default to plain white Zen.

In this article, I show you how to work with the Zen theme project.

Note: When asked why I would recommend the Zen theme versus a core theme such as Garland, I answer, Zen was built to be a seed for your tree—you plant the seed, water it, and watch it grow! Garland looks nice, but is not documented well and has custom page template code that should not appear elsewhere. In short, Garland is just not right as the basis for a theme; the Zen theme is.

The Dreamweaver and Drupal workflow

A Drupal theme is a mix of PHP, XHTML, and CSS. This means you can use Dreamweaver to produce themes from start to finish. Some people have noticed that Dreamweaver doesn't render all Drupal files properly. In my article, Using Drupal themes with Dreamweaver CS4, I introduced my free Dreamweaver extension for the Drupal API, which helps Dreamweaver better understand Drupal file types. It also provides code hints for the entire Drupal API, which is great when working in Code view.

When working in Design view no extension is necessary, since Dreamweaver supports Drupal themes through the Design-time Style Sheets feature. Using this feature, you can emulate links to a CSS file in your site, allowing templates to render styles in Design view for each template and list styles in both the Property inspector and CSS Styles panel (Window > CSS Styles).

How do I apply design-time style sheets?

The CSS Styles panel lets you modify all style sheets. Each style sheet listed as "design" (see Figure 1) will render and provide access to each style without adding markup to your templates, which is really nice. Dreamweaver remembers all your design-time style sheets even when you close a file. The proper workflow here would be attaching design-time style sheets to each template, edit and add styles, and then refresh your browser to update your compiled display with content.

To apply a design-time style sheet in Dreamweaver, click the Design-time Style Sheet button on the Style Rendering toolbar (shown in Figure 2). Alternatively, you can also right-click inside the All styles list box of the CSS Styles panel and select the Design-time item (see Figure 3).

In the Design-Time Style Sheets dialog box (see Figure 4), click the Add (+) button above the Show only at design time field to browse for style sheets you want to attach to your template file.

Can I still use the Files panel? Yes, you can still use the Files panel while designing a Drupal theme in Dreamweaver. Just point your Site folder to your Drupal root folder, the site/all folder, or even the site/all/themes folder. The folder you choose for your theme does not matter. You will be editing, copying, and adding files to your sub-theme folder, so point to whichever folder is easiest for you. If you are using a Drupal Multi-site setup, then you may want to point the Dreamweaver Files panel to sites/website.com/themes.

Start with Zen (not from scratch)

The Zen project for Drupal is a great starting point and has been extremely helpful to designers in need of a flexible starter template. You can use the Zen theme for any one, two, or three column layouts, which meets most of today's web design needs. If necessary, you can enhance the theme with additional regions beyond the standard set of header, footer, content, left sidebar, and right sidebar (similar to the Acquia Slate theme released by Top Notch Themes). When a site design doesn't fit into the Zen theme framework, then your only choice is to build a Drupal theme package from scratch. Producing a theme from scratch involves a set of theme template files (page.tpl.php, node.tpl.php, and so on), a broad range of CSS styles declared, and of course your graphics. In my article, Using Drupal themes with Dreamweaver CS4, I provide an overview of themes in Drupal and the Drupal documentation provides details on theme development. This article does not go into theme building details, but you will learn how to build a theme from the Zen project.

Five steps to Zen

The Zen project comes with a base (parent) theme called Zen, a starter kit, and a legacy theme known as "Zen Classic". To start a new Drupal Zen sub-theme, download and unzip the 6.x-1.0 project files (see Figure 5).

To produce a sub-theme, you will be modifying copies of files found in this folder. Upload the zen/zen folder into your sites/all/themes folder. If you would like to preview the Zen Classic theme, then upload the zen_classic folder into your sites/all/themes folder. The images-source folder has raw graphic files for icons and tab designs used in Zen.

The zen folder also contains an important README.txt file with instructions and links on how to produce Zen sub-themes. The following sections guide you through those steps but with a Dreamweaver twist. You must have Drupal 6 installed to preview themes.

Step 1: Copy the STARTERKIT folder

Included in the starter kit are all the files you will be modifying. The STARTERKIT folder (see Figure 6) is what you will base each new sub-theme on and the following steps cover preparation of each necessary file.

Start your sub-theme by copying the STARTERKIT folder out of the zen folder and rename it to match your new sub-theme name, using only lowercase letters and underscores. For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it to sites/all/themes/new_theme.

Step 2: Edit STARTERKIT.info

In your new sub-theme folder, rename the STARTERKIT.info file to match the name of your sub-theme. Usually this is the same name as the sub-theme folder. Next, edit the .info file and replace every occurrence of STARTERKIT with your new theme name. Be sure to also customize your theme description and name values.

If you plan to add custom regions to the theme, add additional regions in the .info file. The Drupal core theme guide has more details on theme .info files, and in my article, Using Drupal themes with Dreamweaver CS4, I introduced a free Adobe AIR app that generates new Drupal theme .info files through an easy interface. If you are just getting started with Drupal, then do not worry about adding new regions just yet.

Step 3: Choose layout and copy style sheets

Time to choose a layout type: your options are fixed or liquid. Liquid is when a site stretches or grows with the browser window. Fixed means your site width will have a set value and the design is usually centered.

• Copy either the layout-liquid.css or layout-fixed.css file from the zen/zen folder into your sub-theme's folder, and rename the file to layout.css. You should see layout.css listed in your theme .info file.
• Copy the zen.css file from the zen folder and place it in your sub-theme's folder. Rename it to match the name of your sub-theme, which is the same file name as your .info file. This is the style sheet that presumably will receive the bulk of your edits.
• Copy the print.css file from the zen folder into your sub-theme's folder. You may or may not need to edit this style sheet, but I always recommend including this file.
• Copy the html-elements.css file from the zen folder into your sub-theme's folder.

Step 4: Edit theme files and templates

There are a two PHP files you should modify in your sub-theme: template.php and theme-settings.php. Edit both files and replace every occurrence of STARTERKIT with the name of your sub-theme. These files are important and should not be skipped. If you do not see the Configure link for your sub-theme, then you should check these two PHP files to make sure they were modified and uploaded in your sub-theme folder.

The graphics of your theme can be placed in an images folder inside your sub-theme. If you plan to package images with your sub-theme, create an empty folder named images. It is common to see logo.png, screenshot.png, and favicon.ico graphic files appear on the same folder level as a .info file (as seen in the STARTERKIT files) and not in the images folder.

In this step, you also link each theme template (.tpl.php) to each CSS file as a design time style sheet in Dreamweaver. However, your Zen sub-theme folder doesn't have any theme files (.tpl.php). Because sub-themes use their parent templates first, unless you override them with custom templates. A Zen sub-theme does not need any templates to run.

If you want a custom theme you will need to copy and edit all the desired templates found in the zen folder. When you plan to modify the markup in these templates be sure to copy them to your sub-theme's folder before making any changes. The two templates that are changed often are zen/zen/page.tpl.php and zen/zen/node.tpl.php, copy these files into your sub-theme folder and edit as necessary. If you are interested in adding other templates beyond page or node, then read my article, Using Drupal themes with Dreamweaver CS4, and refer to the official template suggestion documentation page to see what templates are available in Drupal core. For those looking for an interactive method to learning what templates are possible, download the Theme Developer module (Devel) for Drupal to reveal template suggestions from clicking on any area of your site.

Step 5: Enable your new sub-theme

Prior to changing your site theme, you should make sure you have set the site Administration theme to a core theme (for example, Garland). Making sure you set a core-based administration theme before installing custom themes prevents accidents such as you locking yourself out of your site because a theme region was incorrect or missing.

To set the Drupal site administration theme go to Administer > Administration theme and choose Garland, then click Save configuration. When you have an administration theme set, you can safely enable new themes.

Be sure your sub-theme resides in the site/all/themes folder, then enable your new sub-theme on your Drupal site under Administer > Site Building > Themes. When enabled, you may notice a message at the top talking about theme cache. This is not an error but a note telling you that the internal theme cache continues to be rebuilt each page load so Drupal can easily pick up your new changes, otherwise you would have to do this manually by clearing the site theme cache. This is a feature built into every Zen sub-theme and is deactivated at the end.

Now visit the Blocks administration page (Administer > Blocks) and set up how you would like your blocks positioned. When your theme is enabled and the blocks are set, you should be able to click around your site and immediately notice if any content is missing or not styled.

When you are happy with your theme, turn the theme cache message off in your theme settings (under the Themes administration screen where you enabled the sub-theme). Click the Configure link for your sub-theme and make sure the cache rebuilding option is cleared, then click Save. You should notice the message disappear. At this point, feel free to activate any site performance settings (for example, CSS compression, which is covered in Step 9 of my article, Building a Drupal site in 10 steps.

Where to go from here

After reading all three of my Drupal articles you should be familiar with the CMS and how basic themes are created. To move up in the Drupal learning chain you will need to know some basic PHP. Learning basic PHP will take you a long way forward in producing advanced Drupal themes.

Here is where I leave you to swim towards deeper ends of Drupal design. Build up your CSS skills, and consider getting some PHP under your your belt. Build on top of Zen, build on top of Drupal.