Make a 7.x-5.x sub-theme manually

The base Zen theme is designed to be easily extended by its sub-themes. You should Not modify any of the CSS or PHP files in the zen/ folder; but instead you should create a sub-theme of zen which is located in a folder outside of the root zen/ folder.

• Drush: If you use Drush, you can take advantage of the drush zen command to automatically generate a sub-theme. For information, type drush help zen.

  Or view the handbook page How to build your own sub-theme (7.x-5.x) using Drush.

The following instructions assume that you have already installed Zen, and the examples below are based on Zen having been installed at:
[drupal7-root]/sites/all/themes/zen

The base theme Zen does Not have to be enabled, but it will need to remain installed for your sub-theme to work.

The examples below will assume that you will also install your sub-theme in the folder
[drupal7-root]/sites/all/themes
along-side the "zen" base theme folder; but any valid theme directory is acceptable. For more info, read the file "default.settings.php" at [drupal7-root]/sites/default/default.settings.php.

1. Setup the location for your new sub-theme.

   • Copy the STARTERKIT folder at:
     [drupal7-root]/sites/all/themes/zen/STARTERKIT
     and put the copy one-level up at:
     [drupal7-root]/sites/all/themes/STARTERKIT

   • Rename your new STARTERKIT folder to be your new sub-theme.

     For example, rename the STARTERKIT folder to "foo", so that it resides at:
     [drupal7-root]/sites/all/themes/foo

     IMPORTANT: The name of your sub-theme folder must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.

   Why? Each theme should reside in its own folder. To make it easier to upgrade Zen, sub-themes should reside in a folder separate from the base theme.

2. Setup the basic information for your sub-theme.

   Why? The .info file describes the basic things about your theme: its name, description, features, template regions, CSS files, and JavaScript files. See the Drupal 7 Theme Guide for more info

   Note: Anytime in the future that you make changes to a theme's *.info file, you can get the new changes to apply on your site by simply visiting your site's "Appearance" page at [drupal7-root]/admin/appearance. Going to the "Appearance" page refreshes the Drupal 7 Core's cache of .info file data.

   • Rename the "STARTERKIT.info.txt" file, in your new sub-theme folder, to include the name of your new sub-theme; and remove the ".txt" extension.

     For example, rename the file:
     [drupal7-root]/sites/all/themes/foo/STARTERKIT.info.txt
     to:
     [drupal7-root]/sites/all/themes/foo/foo.info

   • Edit your new .info file: Change the "name" and "description" fields.

     • Change the .info file line:
       "name = Zen Sub-theme Starter Kit"
       to:
       "name = Foo"

       That is the name for your sub-theme as it will appear on your site's "Appearance" page.

     • Change the foo.info file line:
       "description = Read...."
       to:
       "description = A Zen sub-theme".

       That is the description that accompanies your new sub-theme on your site's "Appearance" page.

       Note: Instead of your having used "A Zen sub-theme", you can type anything you like for the 'description'. You can even use some HTML in that description, including <a href...>...</a> hyper-links.

3. Choose your preferred page layout method or grid system.

   By default your new sub-theme is using a responsive layout.

   If you want a fixed-width layout for your theme:

   • Edit your sub-theme's styles.css file (or styles.scss if you're using Sass), and replace the reference to responsive.css with fixed.css.

     For example, edit foo/styles.css and change this line:
     @import "layouts/responsive.css";
     to:
     @import "layouts/fixed.css";

     In case of Sass, edit foo/styles.scss and change this line:
     @import "layouts/responsive";
     to:
     @import "layouts/fixed";

   Why? The (S)CSS imports in styles.(s)css describe the media type and path to the (S)CSS file you want to include. The format for these lines is: stylesheets[MEDIA][] = path/to/file.css

   Alternatively, if you are more familiar with a different CSS layout method, such as GridSetApp or 960.gs, etc., you can replace the "layouts/responsive.css" line in your styles.(s)css file with a line pointing at your choice of layout CSS file.

4. Edit your sub-theme to use the proper function names.

   Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.

   For example, edit foo/template.php and foo/theme-settings.php and replace every occurrence of "STARTERKIT" with "foo".

   It is recommended to use a text editing application with search and "replace all" functionality.

5. Set your new sub-theme as your website's default theme.

   Log in as an administrator on your Drupal site.

   Go to the "Appearance" page at admin/appearance, and click the link "Enable and set default" for your new sub-theme.

• IMPORTANT NOTE: The Drupal-7-Core theme system caches which template files, and which theme functions, should be called.

  This means that if you add a new theme, preprocess, or process function to your template.php file; or if you add a new template (.tpl.php) file; or if you modify any lines in your sub-theme's .info file, you must refresh Drupal 7's cache with a new theme registry, by doing the following:

  To apply any new changes to any of those files, simply visit your site's "Appearance" page at [dupal7-root]/admin/appearance.

  For more info, see http://drupal.org/node/173880#theme-registry

Optional steps:

1. Modify the markup in Zen core's template files.

   If you decide you want to modify any of the .tpl.php template files in the zen folder, copy them to your sub-theme's folder before making any changes. And then rebuild the theme registry.

   For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.

2. Modify the markup in Drupal's search form.

   Copy the search-block-form.tpl.php template file from the modules/search/ folder and place it in your sub-theme's template folder. Don't forget to rebuild the theme registry.

   You can find a full list of Drupal templates that you can override in the templates/README.txt file or http://drupal.org/node/190815

   Why? In Drupal 7 theming, if you want to modify a template included by a module, you should copy the template file from the module's directory to your sub-theme's template directory and then rebuild the theme registry. See the Drupal 7 Theme Guide for more info.

3. Further extend your sub-theme.

   Discover further ways to extend your sub-theme by reading Zen's documentation and Drupal 7's Theme Guide.