A quick note about Zen for Drupal 7

The reason the instructions for creating a sub-sub-theme are so complicated is due to limitations and bugs in sub-theming in Drupal 6 core. Fortunately, all of these were fixed in Drupal 7 core, so no special instructions are needed for Zen 7.x-3.0 and later.

Before you begin

This document assumes you have already created a Zen subtheme based on the Zen STARTERKIT, as described in How to build your own sub-theme (6.x-2.x).

You should review Sub-theme structure and inheritance for an overview of how subthemes of subthemes inherit various elements from the direct parent (in this case, your subtheme) and the main ancestor theme (Zen).

Both Zen and the original subtheme need to be available in your sites/all/themes/ directory. Also note that your subtheme may not work properly until you have completed all of these steps. If you get errors after enabling your sub-subtheme, clear the theme cache and re-check to make sure you successfully made all of the changes listed below.

Note: These instructions are for Zen 6.x-2.x. You may need to modify them for 6.x-1.x themes.

Creating your subtheme

In the following example, sub is the machine name of your original subtheme, and subsub is the name of the new subtheme you are creating from sub. You need to replace these with the actual machine names of your themes.

Note: The sample commands in each step assume a Unix-like OS. Replace with the appropriate Windows-equivalent commands if you are using Windows.

1. Create a new, empty directory in sites/all/themes with the machine name you want your sub-subtheme to have (subsub here). You will probably also want to create a css directory inside it.

   [drupal_root/sites/all/themes] $ mkdir subsub 
   [drupal_root/sites/all/themes] $ mkdir subsub/css
   

2. Copy the .info file from your original theme into this directory and rename it for the new sub-theme:

   [drupal_root/sites/all/themes] $ cp sub/sub.info subsub/subsub.info
   

3. Open this new file (subsub/subsub.info inside your themes directory) and edit the name and description for your new sub-subtheme:

   ; The name and description of the theme used on the admin/build/themes page.    
   name        = subsub
   description = Sub-subtheme of my Zen subtheme
   

4. Change the base theme line to the name of your existing subtheme rather than zen:

   core       = 6.x
   base theme = sub
   

5. Delete or comment all of the stylesheets lines. (Use a semicolon at the beginning of the line to make it a comment.)

   ; We want to inherit these stylesheets from the parent theme, so comment them out.
   ; stylesheets[all][]   = css/html-reset.css
   ; stylesheets[all][]   = css/filetype-icons.css
   ; stylesheets[all][]   = css/wireframes.css
   ; stylesheets[all][]   = css/layout-fixed.css
   ; stylesheets[all][]   = css/page-backgrounds.css
   ; stylesheets[all][]   = css/tabs.css
   ; stylesheets[all][]   = css/messages.css
   ; stylesheets[all][]   = css/pages.css
   ; stylesheets[all][]   = css/block-editing.css
   ; stylesheets[all][]   = css/blocks.css
   ; stylesheets[all][]   = css/navigation.css
   ; stylesheets[all][]   = css/views-styles.css
   ; stylesheets[all][]   = css/nodes.css
   ; stylesheets[all][]   = css/comments.css
   ; stylesheets[all][]   = css/forms.css
   ; stylesheets[all][]   = css/fields.css
   ; stylesheets[all][]   = css/graphic-overrides.css
   ; stylesheets[all][]   = css/inline-styles.css
   ; stylesheets[print][] = css/print.css
   

6. Add a new line with an override stylesheet:

   ; Override the following stylesheets
   stylesheets[all][]   = css/style.css
   

   Note: Even if you do not wish to override your CSS, you must add at least one stylesheet in order for the parent theme's CSS to be inherited.

7. Save the file.

8. Now, create the style.css file you added to the theme. It can be empty.

   [drupal_root/sites/all/themes] $ touch subsub/css/style.css
   

9. Copy template.php and theme-settings.php from the STARTERKIT into your new theme folder:

   [drupal_root/sites/all/themes] $ cp zen/STARTERKIT/template.php subsub/
   [drupal_root/sites/all/themes] $ cp zen/STARTERKIT/theme-settings.php subsub/
   

10. Edit template.php. As you did when you originally created your subtheme, replace every occurrence of STARTERKIT with the new theme's name (subsub). (Use your text editor's find-and-replace functionality.)

    Additionally, change the hook_theme() to inherit hooks from your theme rather than directly from Zen. Change this:

    function subsub_theme(&$existing, $type, $theme, $path) {
      $hooks = zen_theme($existing, $type, $theme, $path);
      // Add your theme hooks like this:                                            
      /*                                                                            
      $hooks['hook_name_here'] = array( // Details go here );                       
      */
      // @TODO: Needs detailed comments. Patches welcome!                           
      return $hooks;
    }
    

    to this:

    function subsub_theme(&$existing, $type, $theme, $path) {
      $hooks = sub_theme($existing, $type, $theme, $path);
      // Add your theme hooks like this:                                            
      /*                                                                            
      $hooks['hook_name_here'] = array( // Details go here );                       
      */
      // @TODO: Needs detailed comments. Patches welcome!                           
      return $hooks;
    }
    

11. Similarly, edit theme_settings.php and replace all instances of STARTERKIT with your new theme name (subsub). (Use your text editor's find-and-replace functionality.)

    Then, to make your sub-subtheme inherit the subtheme's settings, change the following line:

    include_once './' . drupal_get_path('theme', 'zen') . '/theme-settings.php';
    

    to:

    include_once './' . drupal_get_path('theme', 'sub') . '/theme-settings.php';
    

    And change this line:

      // Add the base theme's settings.                                             
      $form += zen_settings($saved_settings, $defaults);
    

    to:

      // Add the base theme's settings.                                             
      $form += sub_settings($saved_settings, $defaults);
    

12. Save both files.

Your sub-subtheme is now ready for use and customization.

Customizing your subtheme

You can add new css to the style.css file you created earlier, or override specific stylesheets by adding a line for them in your .info file and creating a new stylesheet.

For example, to override page-backgrounds.css:

1. Edit your subsub.info file to add or uncomment the following line:

   ; Override the following stylesheets
   stylesheets[all][]   = css/page-backgrounds.css
   stylesheets[all][]   = css/style.css
   

   Note: if the style.css you added earlier is empty and unused, you can remove it if you like once you override at least one other stylesheet.

2. Copy the original file from your subtheme into your sub-subtheme's directory:

   [drupal_root/sites/all/themes] $ cp sub/css/page-backgrounds.css subsub/css/
   

3. Edit the new copy of the stylesheet to override the parent theme's styling.

Templates are overridden in the same way as for your original subtheme, by copying the template into the new theme's directory and editing it. Note that if you wish to override (e.g.) node-page.tpl.php, you must copy both that file and the more generic node.tpl.php. See Sub-theme structure and inheritance for more information.