Last updated 27 May 2016. Created on 26 April 2012.
Edited by c_c_l, JohnAlbin, ashish_nirmohi, Christopher James Francis Rodgers. 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:

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
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:
      and put the copy one-level up at:

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

      For example, rename the STARTERKIT folder to "foo", so that it resides at:

      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 "" 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:

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

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

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

      • Change the file line:
        "description = Read...."
        "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";
      @import "layouts/fixed.css";

      In case of Sass, edit foo/styles.scss and change this line:
      @import "layouts/responsive";
      @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, 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

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

    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.

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


Screenack’s picture

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

kostask’s picture

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.

Christopher James Francis Rodgers’s picture

(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 (
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *

Bairnsfather’s picture

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.

Draconator’s picture


aminebourkadi’s picture

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

charlie charles’s picture

This video for bootstrap but it's similar to the way you
would make a sub theme for zen

bioavatar’s picture

When I watched a video it says you edit the page-background.css, but when i go to the css directory, it doesnt have that file. When i go to the style.css, it is different from what the video is showing. Also on fixed or responsive css files.