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