1
BUILD YOUR OWN SUB-THEME
2
------------------------
3
4
*** IMPORTANT ***
5
6
* In Drupal 6, the theme system caches template files and which theme functions
7
  should be called. What that means is if you add a new theme or preprocess
8
  function to your template.php file or add a new template (.tpl.php) file to
9
  your sub-theme, you will need to rebuild the "theme registry." See
10
  http://drupal.org/node/173880#theme-registry
11
12
* Drupal 6 also stores a cache of the data in .info files. If you modify any
13
  lines in your sub-theme's .info file, you MUST refresh Drupal 6's cache by
14
  simply visiting the admin/build/themes page.
15
16
17
The base Zen theme is designed to be easily extended by its sub-themes. You
18
shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you
19
should create a sub-theme of zen which is located in a folder outside of the
20
root zen/ folder. The examples below assume zen and your sub-theme will be
21
installed in sites/vojo.co/themes/, but any valid theme directory is acceptable
22
(read the sites/default/default.settings.php for more info.)
23
24
  Why? To learn why you shouldn't modify any of the files in the zen/ folder,
25
  see http://drupal.org/node/245802
26
27
 1. Copy the STARTERKIT folder out of the zen/ folder and rename it to be your
28
    new sub-theme. IMPORTANT: The name of your sub-theme must start with an
29
    alphabetic character and can only contain lowercase letters, numbers and
30
    underscores.
31
32
    For example, copy the sites/vojo.co/themes/zen/STARTERKIT folder and rename it
33
    as sites/vojo.co/themes/foo.
34
35
      Why? Each theme should reside in its own folder. To make it easier to
36
      upgrade Zen, sub-themes should reside in a folder separate from their base
37
      theme.
38
39
 2. In your new sub-theme folder, rename the STARTERKIT.info.txt file to include
40
    the name of your new sub-theme and remove the ".txt" extension. Then edit
41
    the .info file by editing the name and description field.
42
43
    For example, rename the foo/STARTERKIT.info.txt file to foo/foo.info. Edit
44
    the foo.info file and change "name = Zen Sub-theme Starter Kit" to
45
    "name = Foo" and "description = Read..." to "description = A Zen sub-theme".
46
47
      Why? The .info file describes the basic things about your theme: its
48
      name, description, features, template regions, CSS files, and JavaScript
49
      files. See the Drupal 6 Theme Guide for more info:
50
      http://drupal.org/node/171205
51
52
    Then, visit your site's admin/build/themes to refresh Drupal 6's cache of
53
    .info file data.
54
55
 3. By default your new sub-theme is using a fixed-width layout. If you want a
56
    liquid layout for your theme, delete the unneeded layout-fixed.css and
57
    layout-fixed-rtl.css files and edit your sub-theme's .info file and replace
58
    the reference to layout-fixed.css with layout-liquid.css.
59
60
    For example, edit foo/foo.info and change this line:
61
      stylesheets[all][]   = css/layout-fixed.css
62
    to:
63
      stylesheets[all][]   = css/layout-liquid.css
64
65
      Why? The "stylesheets" lines in your .info file describe the media type
66
      and path to the CSS file you want to include. The format for these lines
67
      is:  stylesheets[MEDIA][] = path/to/file.css
68
69
    Then, visit your site's admin/build/themes to refresh Drupal 6's cache of
70
    .info file data.
71
72
    Alternatively, if you are more familiar with a different CSS layout method,
73
    such as Blueprint or 960.gs, you can replace the "css/layout-fixed.css" line
74
    in your .info file with a line pointing at your choice of layout CSS file.
75
76
 4. Edit the template.php and theme-settings.php files in your sub-theme's
77
    folder; replace ALL occurrences of "STARTERKIT" with the name of your
78
    sub-theme.
79
80
    For example, edit foo/template.php and foo/theme-settings.php and replace
81
    every occurrence of "STARTERKIT" with "foo".
82
83
    It is recommended to use a text editing application with search and
84
    "replace all" functionality.
85
86
 5. Log in as an administrator on your Drupal site and go to Administer > Site
87
    building > Themes (admin/build/themes) and enable your new sub-theme.
88
89
 6. Internet explorer has a nasty bug that limits you to 31 stylsheets total. To
90
    get around this limitation during theme development, download, install and
91
    configure the "IE CSS Optimizer" module.
92
93
    http://drupal.org/project/ie_css_optimizer
94
95
    On a production server, you should enable full optimization of the "Optimize
96
    CSS files" option on the Admin Performance page at
97
    admin/settings/performance.
98
99
100
Optional:
101
102
 7. MODIFYING ZEN CORE TEMPLATE FILES:
103
    If you decide you want to modify any of the .tpl.php template files in the
104
    zen folder, copy them to your sub-theme's folder before making any changes.
105
    And then rebuild the theme registry.
106
107
    For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.
108
109
 8. THEMEING DRUPAL'S SEARCH FORM:
110
    Copy the search-theme-form.tpl.php template file from the modules/search/
111
    folder and place it in your sub-theme's folder. And then rebuild the theme
112
    registry.
113
114
    You can find a full list of Drupal templates that you can override in the
115
    templates/README.txt file or http://drupal.org/node/190815
116
117
      Why? In Drupal 6 theming, if you want to modify a template included by a
118
      module, you should copy the template file from the module's directory to
119
      your sub-theme's directory and then rebuild the theme registry. See the
120
      Drupal 6 Theme Guide for more info: http://drupal.org/node/173880
121
122
 9. FURTHER EXTENSIONS OF YOUR SUB-THEME:
123
    Discover further ways to extend your sub-theme by reading Zen's
124
    documentation online at:
125
      http://drupal.org/node/193318
126
    and Drupal 6's Theme Guide online at:
127
      http://drupal.org/theme-guide