| 1 |
87dbc3bf
|
Benjamin Luce
|
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 |
|
|
|
| 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.
|
| 11 |
|
|
|
| 12 |
|
|
|
| 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 |
|
|
|
| 39 |
|
|
SUGGESTED READING
|
| 40 |
|
|
-----------------
|
| 41 |
|
|
|
| 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 |
|
|
|
| 46 |
|
|
Building a theme with Zen
|
| 47 |
|
|
See the STARTERKIT/README.txt file for full instructions.
|
| 48 |
|
|
|
| 49 |
|
|
Theme .info file
|
| 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.
|
| 53 |
|
|
|
| 54 |
|
|
CSS
|
| 55 |
|
|
Once you have created your sub-theme, look at the README.txt in your
|
| 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.
|
| 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 |
|
|
--------------
|
| 65 |
|
|
|
| 66 |
|
|
Full documentation on the Zen theme can be found in Drupal's Handbook:
|
| 67 |
|
|
https://drupal.org/documentation/theme/zen
|
| 68 |
|
|
|
| 69 |
|
|
Excellent documentation on Drupal theming can be found in the Theme Guide:
|
| 70 |
|
|
https://drupal.org/theme-guide
|
| 71 |
|
|
|
| 72 |
|
|
|
| 73 |
|
|
INSTALLATION
|
| 74 |
|
|
------------
|
| 75 |
|
|
|
| 76 |
|
|
1. Download Zen from https://drupal.org/project/zen
|
| 77 |
|
|
|
| 78 |
|
|
2. Unpack the downloaded file, take the entire zen folder and place it in your
|
| 79 |
|
|
Drupal installation under sites/all/themes. (Additional installation folders
|
| 80 |
|
|
can be used; see https://drupal.org/getting-started/install-contrib/themes
|
| 81 |
|
|
for more information.)
|
| 82 |
|
|
|
| 83 |
|
|
For more information about acceptable theme installation directories, read
|
| 84 |
|
|
the sites/default/default.settings.php file in your Drupal installation.
|
| 85 |
|
|
|
| 86 |
|
|
3. Log in as an administrator on your Drupal site and go to the Appearance page
|
| 87 |
|
|
at admin/appearance. You will see the Zen theme listed under the Disabled
|
| 88 |
|
|
Themes heading with links on how to create your own sub-theme. You can
|
| 89 |
|
|
optionally make Zen the default theme.
|
| 90 |
|
|
|
| 91 |
|
|
4. Now build your own sub-theme by reading the STARTERKIT/README.txt file. |
