| Commit | Line | Data |
|---|---|---|
| 007fb748 J |
1 | WHERE TO START |
| 2 | -------------- | |
| 3 | ||
| 4 | Yay! You opened the correct file first. The first thing that people notice when | |
| 5 | they download the Zen theme is that there are A LOT of files -- way more than | |
| 6 | other themes. | |
| 7 | ||
| 585f76c0 J |
8 | Don't worry! You don't need to learn everything all at once in order to make a |
| 9 | drupal theme. Zen will do the bits you haven't learned and patiently wait for | |
| 10 | you to discover the documentation and inline comments about them. | |
| 007fb748 J |
11 | |
| 12 | ||
| 47cd66f0 J |
13 | WHAT ARE BASE THEMES, SUB-THEMES AND STARTER THEMES? |
| 14 | ---------------------------------------------------- | |
| 15 | ||
| 16 | Often the best way to learn a system is to take an existing example and modify | |
| 17 | it to see how it works. One big disadvantage of this learning method is that if | |
| 18 | you break something and the original example worked before you hacked it, | |
| 19 | there's very little incentive for others to help you. | |
| 20 | ||
| 21 | Drupal's theming system has a solution to this problem: parent themes and | |
| 22 | sub-themes. A "sub-theme" will inherit all its HTML markup, CSS, and PHP code | |
| 23 | from its "parent theme" (also called a "base theme".) And with Drupal themes, | |
| 24 | it's easy for a sub-theme to override just the parts of the parent theme it | |
| 25 | wants to modify. | |
| 26 | ||
| 27 | A "starter theme" is a sub-theme designed specifically to be a good starting | |
| 28 | point for developing a custom theme for your website. It is usually paired with | |
| 29 | a base theme. | |
| 30 | ||
| 31 | So how do you create a theme with Zen? | |
| 32 | ||
| 33 | The Zen theme includes the Zen base theme as well as a starter theme called | |
| 34 | "STARTERKIT". You shouldn't modify any of the CSS or PHP files in the zen/ | |
| 35 | folder; but instead you should create a sub-theme of zen and put it in a folder | |
| 36 | outside of the root zen/ folder. | |
| 37 | ||
| 38 | ||
| 585f76c0 J |
39 | SUGGESTED READING |
| 40 | ----------------- | |
| 007fb748 | 41 | |
| 585f76c0 J |
42 | Installation |
| 43 | If you don't know how to install a Drupal theme, there is a quick primer later | |
| 44 | in this document. | |
| 45 | ||
| 47cd66f0 | 46 | Building a theme with Zen |
| 585f76c0 J |
47 | See the STARTERKIT/README.txt file for full instructions. |
| 48 | ||
| 49 | Theme .info file | |
| 7503097d J |
50 | Your sub-theme's .info file holds the basic information about your theme that |
| 51 | Drupal needs to know: its name, description, features, template regions, CSS | |
| 52 | files, and JavaScript. Don't worry about all these lines just yet. | |
| 585f76c0 J |
53 | |
| 54 | CSS | |
| 55 | Once you have created your sub-theme, look at the README.txt in your | |
| 9daac9d2 J |
56 | sub-theme's css folder. Don't freak out about all the files in this directory; |
| 57 | just read the README.txt file for an explanation. | |
| 585f76c0 J |
58 | |
| 59 | Templates | |
| 60 | Now take a look at the README.txt in your sub-theme's templates folder. | |
| 61 | ||
| 62 | ||
| 63 | ONLINE READING | |
| 64 | -------------- | |
| 007fb748 J |
65 | |
| 66 | Full documentation on the Zen theme can be found in Drupal's Handbook: | |
| 67 | http://drupal.org/node/193318 | |
| 68 | ||
| 69 | Excellent documentation on Drupal theming can be found in the Theme Guide: | |
| 70 | http://drupal.org/theme-guide | |
| 71 | ||
| 72 | ||
| 73 | INSTALLATION | |
| 74 | ------------ | |
| 75 | ||
| 76 | 1. Download Zen from http://drupal.org/project/zen | |
| 77 | ||
| 7503097d J |
78 | 2. Unpack the downloaded file, take the entire zen folder and place it in your |
| 79 | Drupal installation under one of the following locations: | |
| 007fb748 J |
80 | sites/all/themes |
| 81 | making it available to the default Drupal site and to all Drupal sites | |
| 82 | in a multi-site configuration | |
| 83 | sites/default/themes | |
| 84 | making it available to only the default Drupal site | |
| 85 | sites/example.com/themes | |
| 86 | making it available to only the example.com site if there is a | |
| 87 | sites/example.com/settings.php configuration file | |
| 88 | ||
| 2488597e J |
89 | Please note: you will need to create the "theme" folder under "sites/all/" |
| 90 | or "sites/default/". | |
| 91 | ||
| 007fb748 J |
92 | For more information about acceptable theme installation directories, read |
| 93 | the sites/default/default.settings.php file in your Drupal installation. | |
| 94 | ||
| 9daac9d2 J |
95 | 3. Log in as an administrator on your Drupal site and go to the Appearance page |
| 96 | at admin/appearance. You will see the Zen theme listed under the Disabled | |
| 97 | Themes heading with links on how to create your own sub-theme. You can | |
| 98 | optionally make Zen the default theme. | |
| 007fb748 | 99 | |
| 585f76c0 | 100 | 4. Now build your own sub-theme by reading the STARTERKIT/README.txt file. |