Last updated April 11, 2014. Created by JohnAlbin on April 26, 2012.
Edited by Christopher Jam..., kselden, MF82, cam10025. Log in to edit this page.

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.



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.

    • 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.

    • 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.

  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.

    Note: By default, all of the occurrences of the replacements of "STARTERKIT" you made in the files "template.php" and "theme-settings.php" are commented-out: That is to say, they are Not used by default. So, in a sense, this step was unnecessary, unless you un-comment one of them at some point in the future (which I never have).

  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:

  • 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.

  • 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.

  • Further extend your sub-theme.

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

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Helpful page; thanks. Is it possible to build a Zen sub-theme without a grid?

Yes, it is totally possible.

Just replace the "css/layouts/responsive-sidebars.css" line in your .info file with a line pointing at your layout CSS file.

(Since there is no "css/layouts/responsive-sidebars.css" line in the *.info file)

I would have to guess that you would instead want to try...

===

Open/Edit your "styles.css" file:
( sites/all/themes/my_zen_subtheme/css/styles.css )

Replace the line:
@import "layout-responsive.css";
with a line pointing at your layout CSS file.

"All the best; intended."
- Chris
___

Drupal 8 is great.

Re: Dupal 9,000
Three-minute Video on the problem
of technology out-pacing users.
http://great-grandma.com/gill_bates-dead_at_42/index.html

As of Drupal 7.23 one should also apply this patch (#1198904: drupal_load_stylesheet() fails to load @import files in different directories) to Drupal core, otherwise choosing to “ Aggregate and compress CSS files” will, out of the box, cause Zen 7 display problems.

Fixed

Zen theme comes with default 25 50 25 grid system, but on the page of the theme i saw a picture of 50 25 25 grid.
Is there anyway to get the 50 25 25 grid system?
Thank you