| Commit | Line | Data |
|---|---|---|
| 47d4fcdc | 1 | Full documentation on the Zen theme can be found in Drupal's Handbook: |
| 52521ba9 J |
2 | http://drupal.org/node/193318 |
| 3 | ||
| 206f00d1 | 4 | Excellent documentation on Drupal theming can be found in the Theme Guide: |
| 7dadabdd | 5 | http://drupal.org/theme-guide |
| 206f00d1 | 6 | |
| 52521ba9 J |
7 | |
| 8 | Installation: | |
| 9 | ||
| 10 | 1. Download Zen from http://drupal.org/project/zen | |
| 11 | ||
| 206f00d1 J |
12 | 2. Unpack the downloaded file, take the entire zen folder (which includes |
| 13 | the README.txt file, a zen_classic folder, etc.) and place it in your | |
| 14 | Drupal installation under one of the following locations: | |
| 52521ba9 | 15 | sites/all/themes |
| 206f00d1 J |
16 | making it available to the default Drupal site and to all Drupal sites |
| 17 | in a multi-site configuration | |
| 52521ba9 | 18 | sites/default/themes |
| 47d4fcdc J |
19 | making it available to only the default Drupal site |
| 20 | sites/example.com/themes | |
| 21 | making it available to only the example.com site if there is a | |
| 22 | sites/example.com/settings.php configuration file | |
| 52521ba9 J |
23 | |
| 24 | 3. Log in as an administrator on your Drupal site and go to Administer > Site | |
| 25 | building > Themes (admin/build/themes) and make Zen or one of its | |
| 26 | sub-themes the default theme. | |
| 27 | ||
| 206f00d1 | 28 | Build your own sub-theme: |
| 52521ba9 | 29 | |
| af06308f J |
30 | IMPORTANT: In Drupal 6, the theme system caches template files and which theme |
| 31 | functions should be called. What that means is if you add a new theme or | |
| 32 | preprocess fuction to your template.php file or add a new template (.tpl.php) | |
| 33 | file to your sub-theme, you will need to rebuild the "theme registry." | |
| 34 | See http://drupal.org/node/173880#theme-registry | |
| 35 | ||
| 206f00d1 J |
36 | The base Zen theme is designed to be easily extended by its sub-themes. You |
| 37 | shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead | |
| 38 | you should create a sub-theme of zen which is located in a folder outside of | |
| 39 | the root zen/ folder. The examples below assume zen and your sub-theme will be | |
| 40 | installed in sites/all/themes/. | |
| 52521ba9 | 41 | |
| 206f00d1 J |
42 | Why? To learn why you shouldn't modify any of the files in the zen/ folder, |
| 43 | see http://drupal.org/node/245802 | |
| 52521ba9 | 44 | |
| 206f00d1 J |
45 | 1. Copy the STARTERKIT folder out of the zen/ folder and rename it to be your |
| 46 | new sub-theme. IMPORTANT: Only lowercase letters and underscores should be | |
| 47 | used for the name of your sub-theme. | |
| 52521ba9 | 48 | |
| 206f00d1 J |
49 | For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it |
| 50 | as sites/all/themes/foo. | |
| 52521ba9 | 51 | |
| 206f00d1 J |
52 | Why? Each theme should reside in its own folder. Unlike in Drupal 5, |
| 53 | sub-themes can (and should) reside in a folder separate from their base | |
| 54 | theme. | |
| 52521ba9 | 55 | |
| 206f00d1 J |
56 | 2. In your new sub-theme folder, rename the STARTERKIT.info file to the name |
| 57 | of your new sub-theme. Then edit the .info file by changing any occurrence | |
| 58 | of STARTERKIT with the name of your sub-theme and editing the name and | |
| 59 | description field. | |
| 52521ba9 | 60 | |
| 206f00d1 J |
61 | For example, rename the foo/STARTERKIT.info file to foo/foo.info. Edit the |
| 62 | foo.info file and change "STARTERKIT.css" to "foo.css", change "name = Zen | |
| 63 | Themer's Starter Kit" to "name = Foo", and change "description = Read..." | |
| 64 | to "description = A Zen sub-theme". | |
| e0a8f494 | 65 | |
| 206f00d1 J |
66 | Why? The .info file describes the basic things about your theme: its |
| 67 | name, description, features, template regions, CSS files, and javascript | |
| 68 | files. See the Drupal 6 Theme Guide for more info: | |
| 69 | http://drupal.org/node/171205 | |
| e0a8f494 J |
70 | |
| 71 | 3. If you want a liquid layout for your theme, copy the layout-liquid.css from | |
| 206f00d1 J |
72 | the zen/zen folder and place it in your sub-theme's folder. If you want a |
| 73 | fixed-width layout for your theme, copy the layout-fixed.css from the | |
| 74 | zen/zen folder and place it in your sub-theme's folder. Rename the layout | |
| 47d4fcdc J |
75 | stylesheet to "layout.css". |
| 76 | ||
| 206f00d1 J |
77 | For example, copy zen/zen/layout-fixed.css and rename it as foo/layout.css. |
| 78 | Note that the .info file already has an entry for your layout.css file. | |
| 79 | ||
| 80 | Why? In Drupal 6 theming, if you want to modify a stylesheet included | |
| 81 | by the base theme or by a module, you should copy the stylsheet from the | |
| 82 | base theme or module's directory to your sub-theme's directory and then | |
| 83 | add the stylesheet to your .info file. See the Drupal 6 Theme Guide for | |
| 84 | more info: http://drupal.org/node/171209 | |
| 47d4fcdc | 85 | |
| 184bd515 J |
86 | 4. Copy the zen stylesheet from the zen folder and place it in your |
| 87 | sub-theme's folder. Rename it to be the name of your sub-theme. | |
| 88 | ||
| 89 | For example, copy zen/zen/zen.css and rename it as foo/foo.css. Note that | |
| 90 | the .info file already has an entry for your foo.css file and that your | |
| 91 | .info file removes the base theme's zen.css file. | |
| 92 | ||
| 93 | 5. Copy the print stylesheet from the zen folder and place it in your | |
| 47d4fcdc J |
94 | sub-theme's folder. |
| 95 | ||
| 206f00d1 J |
96 | For example, copy zen/zen/print.css to foo/print.css. Note that the .info |
| 97 | file already has an entry for your print.css file. | |
| 47d4fcdc | 98 | |
| 184bd515 J |
99 | 6. Copy the html-elements stylesheet from the zen folder and place it in your |
| 100 | sub-theme's folder. | |
| 47d4fcdc | 101 | |
| 184bd515 J |
102 | For example, copy zen/zen/html-elements.css to foo/html-elements.css. Note |
| 103 | that the .info file already has an entry for your html-elements.css file. | |
| 47d4fcdc | 104 | |
| 184bd515 | 105 | 7. Edit the template.php and theme-settings.php files in your sub-theme's |
| 28511ba8 J |
106 | folder; replace ALL occurances of "STARTERKIT" with the name of your |
| 107 | sub-theme. | |
| 47d4fcdc | 108 | |
| 206f00d1 J |
109 | For example, edit foo/template.php and foo/theme-settings.php and replace |
| 110 | "STARTERKIT" with "foo". | |
| 47d4fcdc | 111 | |
| 184bd515 | 112 | 8. Log in as an administrator on your Drupal site and go to Administer > Site |
| 47d4fcdc J |
113 | building > Themes (admin/build/themes) and enable your new sub-theme. |
| 114 | ||
| 115 | Optional: | |
| 116 | ||
| 184bd515 | 117 | 9. MODIFYING ZEN CORE STYLESHEETS: |
| 47d4fcdc J |
118 | If you decide you want to modify any of the other stylesheets in the zen |
| 119 | folder, copy them to your sub-theme's folder before making any changes. | |
| 184bd515 J |
120 | Also, be sure the new stylesheet is included in your .info file and that |
| 121 | you have rebuilt the theme registry. | |
| 47d4fcdc | 122 | |
| 184bd515 J |
123 | For example, copy zen/zen/wireframes.css to foo/wireframes.css. Then edit |
| 124 | foo/foo.info and uncomment this line to activate it: | |
| 125 | ;stylesheets[all][] = block-editing.css | |
| 47d4fcdc | 126 | to: |
| 184bd515 | 127 | stylesheets[all][] = block-editing.css |
| 47d4fcdc | 128 | |
| 184bd515 | 129 | 10. MODIFYING ZEN CORE TEMPLATE FILES: |
| 47d4fcdc J |
130 | If you decide you want to modify any of the .tpl.php template files in the |
| 131 | zen folder, copy them to your sub-theme's folder before making any changes. | |
| 184bd515 | 132 | And then rebuild the theme registry. |
| 47d4fcdc | 133 | |
| 7dadabdd | 134 | For example, copy zen/zen/page.tpl.php to foo/page.tpl.php. |
| 47d4fcdc | 135 | |
| 184bd515 | 136 | 11. THEMEING DRUPAL'S SEARCH FORM: |
| af06308f | 137 | Copy the search-theme-form.tpl.php template file from the modules/search/ |
| 184bd515 J |
138 | folder and place it in your sub-theme's folder. And then rebuild the theme |
| 139 | registry. | |
| 140 | ||
| 141 | You can find a full list of Drupal templates that you can override on: | |
| 142 | http://drupal.org/node/190815 | |
| af06308f J |
143 | |
| 144 | Why? In Drupal 6 theming, if you want to modify a template included | |
| 145 | by a module, you should copy the template file from the module's | |
| 146 | directory to your sub-theme's directory and then rebuild the theme | |
| 147 | registry. See the Drupal 6 Theme Guide for more info: | |
| 148 | http://drupal.org/node/173880 | |
| 47d4fcdc | 149 | |
| 184bd515 | 150 | 12. FURTHER EXTENSIONS OF YOUR SUB-THEME: |
| 47d4fcdc | 151 | Discover further ways to extend your sub-theme by reading Zen's |
| 28511ba8 J |
152 | documentation online at: |
| 153 | http://drupal.org/node/193318 | |
| 206f00d1 | 154 | and Drupal 6's Theme Guide online at: |
| 7dadabdd | 155 | http://drupal.org/theme-guide |