| Commit | Line | Data |
|---|---|---|
| 15fe5a55 | 1 | Full documentation on the Zen theme can be found in Drupal's Handbook: |
| 8c20f91b J |
2 | http://drupal.org/node/193318 |
| 3 | ||
| 4 | ||
| 5 | Installation: | |
| 6 | ||
| 7 | 1. Download Zen from http://drupal.org/project/zen | |
| 8 | ||
| 9 | 2. Unpack the downloaded file and place the zen folder in your Drupal | |
| 10 | installation under one of the following locations: | |
| 11 | sites/all/themes | |
| 03920855 | 12 | making it available to all Drupal sites in a mult-site configuration |
| 8c20f91b | 13 | sites/default/themes |
| 03920855 J |
14 | making it available to only the default Drupal site |
| 15 | sites/example.com/themes | |
| 16 | making it available to only the example.com site if there is a | |
| 17 | sites/example.com/settings.php configuration file | |
| 8c20f91b J |
18 | |
| 19 | 3. Log in as an administrator on your Drupal site and go to Administer > Site | |
| 20 | building > Themes (admin/build/themes) and make Zen or one of its | |
| 21 | sub-themes the default theme. | |
| 22 | ||
| 23 | Optional: | |
| 24 | ||
| 25 | 4. Install the Theme Settings API module. Available from: | |
| 26 | http://drupal.org/project/themesettingsapi | |
| 27 | ||
| 15fe5a55 J |
28 | This module is built-in to Drupal 6, so why not add it to your Drupal 5 |
| 29 | installation? | |
| 8c20f91b J |
30 | |
| 31 | 5. From the Theme settings page (admin/build/themes) configure the Zen theme | |
| b2a804ac J |
32 | or a sub-theme and note the additional settings that are now available |
| 33 | under the "Theme-specific settings" heading. | |
| 8c20f91b J |
34 | |
| 35 | Build your own sub-theme: | |
| 36 | ||
| 37 | The base Zen theme is designed to be easily extended by its sub-themes. You | |
| 38 | shouldn't modify any of the CSS or PHP files in the root zen/ folder; but | |
| 39 | instead you should create a sub-theme of zen which is located in a sub-folder | |
| 15fe5a55 | 40 | of the root zen/ folder. For example, the zen_classic sub-folder contains the |
| 8c20f91b J |
41 | files for the Zen Classic sub-theme. |
| 42 | ||
| ff58c3aa J |
43 | 1. Copy the STARTERKIT folder and rename it to be your new sub-theme. |
| 44 | IMPORTANT: Only lowercase letters and underscores should be used. | |
| 8c20f91b | 45 | |
| d9499c36 | 46 | For example, copy the zen/STARTERKIT folder and rename it as zen/foo. |
| 15fe5a55 J |
47 | |
| 48 | 2. If you want a liquid layout for your theme, copy the layout-liquid.css from | |
| 49 | the zen folder and place it in your sub-theme's folder. If you want a | |
| 50 | fixed-width layout for your theme, copy the layout-fixed.css from the zen | |
| 51 | folder and place it in your sub-theme's folder. Rename the layout | |
| 52 | stylesheet to "layout.css". | |
| 53 | ||
| 54 | For example, copy zen/layout-fixed.css and rename it as zen/foo/layout.css. | |
| 55 | ||
| 56 | 3. Copy the print stylesheet from the zen folder and place it in your | |
| 57 | sub-theme's folder. | |
| 58 | ||
| 59 | For example, copy zen/print.css to zen/foo/print.css. | |
| 60 | ||
| 61 | 4. Copy the zen stylesheet from the zen folder and place it in your | |
| 62 | sub-theme's folder. Rename it to be the name of your sub-theme. | |
| 63 | ||
| 64 | For example, copy zen/zen.css and rename it as zen/foo/foo.css. | |
| 65 | ||
| 66 | 5. Edit the template.php and theme-settings.php files in your sub-theme's | |
| d9499c36 | 67 | folder; replace ALL occurances of "STARTERKIT" with the name of your |
| 6b421c55 | 68 | sub-theme. |
| 15fe5a55 J |
69 | |
| 70 | For example, edit zen/foo/template.php and zen/foo/theme-settings.php and | |
| d9499c36 | 71 | replace "STARTERKIT" with "foo". |
| 15fe5a55 J |
72 | |
| 73 | 6. Log in as an administrator on your Drupal site and go to Administer > Site | |
| 74 | building > Themes (admin/build/themes) and enable your new sub-theme. | |
| 75 | ||
| 76 | Optional: | |
| 77 | ||
| 78 | 7. MODIFYING ZEN CORE STYLESHEETS: | |
| 79 | If you decide you want to modify any of the other stylesheets in the zen | |
| 80 | folder, copy them to your sub-theme's folder before making any changes. | |
| 81 | Also, be sure to edit the drupal_add_css() calls near the beginning of your | |
| 82 | sub-theme's template.php file. | |
| 83 | ||
| 84 | For example, copy zen/html-elements.css and rename it as | |
| 85 | zen/foo/html-elements.css. Then edit zen/foo/template.php and change: | |
| 86 | drupal_add_css(path_to_theme() .'/html-elements.css', 'theme', 'all'); | |
| 87 | to: | |
| 88 | drupal_add_css(path_to_subtheme() .'/html-elements.css', 'theme', 'all'); | |
| 89 | ||
| 90 | 8. MODIFYING ZEN CORE TEMPLATE FILES: | |
| 91 | If you decide you want to modify any of the .tpl.php template files in the | |
| 92 | zen folder, copy them to your sub-theme's folder before making any changes. | |
| 93 | ||
| 94 | For example, copy zen/page.tpl.php to zen/foo/page.tpl.php. | |
| 95 | ||
| 96 | 9. THEMEING DRUPAL'S SEARCH FORM: | |
| 97 | Copy the search-theme-form.tpl.php template file from the zen folder and | |
| 98 | place it in your sub-theme's folder. In your sub-theme's template.php file, | |
| d9499c36 | 99 | un-comment the STARTERKIT_search_theme_form() function. |
| 15fe5a55 J |
100 | |
| 101 | 10. FURTHER EXTENSIONS OF YOUR SUB-THEME: | |
| 102 | Discover further ways to extend your sub-theme by reading Zen's | |
| a474feab J |
103 | documentation online at: |
| 104 | http://drupal.org/node/193318 | |
| 105 | and Drupal's Theme Developer's Guide online at: | |
| 15fe5a55 | 106 | http://drupal.org/handbooks |