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