Project

General

Profile

Download (5.38 KB) Statistics
| Branch: | Tag: | Revision:
1
BUILD A THEME WITH ZEN
2
----------------------
3

    
4
The base Zen theme is designed to be easily extended by its sub-themes. You
5
shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you
6
should create a sub-theme of zen which is located in a folder outside of the
7
root zen/ folder. The examples below assume zen and your sub-theme will be
8
installed in sites/all/themes/, but any valid theme directory is acceptable
9
(read the sites/default/default.settings.php for more info.)
10

    
11
  Why? To learn why you shouldn't modify any of the files in the zen/ folder,
12
  see https://drupal.org/node/245802
13

    
14

    
15
*** IMPORTANT NOTE ***
16
*
17
* In Drupal 7, the theme system caches which template files and which theme
18
* functions should be called. This means that if you add a new theme,
19
* preprocess or process function to your template.php file or add a new template
20
* (.tpl.php) file to your sub-theme, you will need to rebuild the "theme
21
* registry." See https://drupal.org/node/173880#theme-registry
22
*
23
* Drupal 7 also stores a cache of the data in .info files. If you modify any
24
* lines in your sub-theme's .info file, you MUST refresh Drupal 7's cache by
25
* simply visiting the Appearance page at admin/appearance.
26
*
27

    
28

    
29
 1. Setup the location for your new sub-theme.
30

    
31
    Copy the STARTERKIT folder out of the zen/ folder and rename it to be your
32
    new sub-theme. IMPORTANT: The name of your sub-theme must start with an
33
    alphabetic character and can only contain lowercase letters, numbers and
34
    underscores.
35

    
36
    For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it
37
    as sites/all/themes/foo.
38

    
39
      Why? Each theme should reside in its own folder. To make it easier to
40
      upgrade Zen, sub-themes should reside in a folder separate from the base
41
      theme.
42

    
43
 2. Setup the basic information for your sub-theme.
44

    
45
    In your new sub-theme folder, rename the STARTERKIT.info.txt file to include
46
    the name of your new sub-theme and remove the ".txt" extension. Then edit
47
    the .info file by editing the name and description field.
48

    
49
    For example, rename the foo/STARTERKIT.info file to foo/foo.info. Edit the
50
    foo.info file and change "name = Zen Sub-theme Starter Kit" to "name = Foo"
51
    and "description = Read..." to "description = A Zen sub-theme".
52

    
53
      Why? The .info file describes the basic things about your theme: its
54
      name, description, features, template regions, CSS files, and JavaScript
55
      files. See the Drupal 7 Theme Guide for more info:
56
      https://drupal.org/node/171205
57

    
58
    Then, visit your site's Appearance page at admin/appearance to refresh
59
    Drupal 7's cache of .info file data.
60

    
61
 3. Choose your preferred page layout method or grid system.
62

    
63
    By default your new sub-theme is using a responsive layout. If you want a
64
    fixed layout for your theme, delete the unneeded "responsive" and
65
    "responsive-rtl" css/sass files and edit your sub-theme's styles.css
66
    or styles.scss file and replace the reference to "responsive" with
67
    "fixed".
68

    
69
    For example, edit foo/sass/styles.scss and change this line:
70
      @import "layouts/responsive";
71
    to:
72
      @import "layouts/fixed";
73

    
74
    Alternatively, if you are more familiar with a different CSS layout method,
75
    such as GridSetApp or 960.gs, etc., you can replace the
76
    "layouts/responsive" line in your styles.scss file with a line
77
    pointing at your choice of layout CSS file.
78

    
79
    Then, visit your site's Appearance page at admin/appearance to refresh
80
    Drupal 7's theme cache.
81

    
82
 4. Edit your sub-theme to use the proper function names.
83

    
84
    Edit the template.php and theme-settings.php files in your sub-theme's
85
    folder; replace ALL occurrences of "STARTERKIT" with the name of your
86
    sub-theme.
87

    
88
    For example, edit foo/template.php and foo/theme-settings.php and replace
89
    every occurrence of "STARTERKIT" with "foo".
90

    
91
    It is recommended to use a text editing application with search and
92
    "replace all" functionality.
93

    
94
 5. Set your website's default theme.
95

    
96
    Log in as an administrator on your Drupal site, go to the Appearance page at
97
    admin/appearance and click the "Enable and set default" link next to your
98
    new sub-theme.
99

    
100

    
101
Optional steps:
102

    
103
 6. Modify the markup in Zen core's template files.
104

    
105
    If you decide you want to modify any of the .tpl.php template files in the
106
    zen folder, copy them to your sub-theme's folder before making any changes.
107
    And then rebuild the theme registry.
108

    
109
    For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.
110

    
111
 7. Modify the markup in Drupal's search form.
112

    
113
    Copy the search-block-form.tpl.php template file from the modules/search/
114
    folder and place it in your sub-theme's template folder. And then rebuild
115
    the theme registry.
116

    
117
    You can find a full list of Drupal templates that you can override in the
118
    templates/README.txt file or https://drupal.org/node/190815
119

    
120
      Why? In Drupal 7 theming, if you want to modify a template included by a
121
      module, you should copy the template file from the module's directory to
122
      your sub-theme's template directory and then rebuild the theme registry.
123
      See the Drupal 7 Theme Guide for more info: https://drupal.org/node/173880
124

    
125
 8. Further extend your sub-theme.
126

    
127
    Discover further ways to extend your sub-theme by reading Zen's
128
    documentation online at:
129
      https://drupal.org/documentation/theme/zen
130
    and Drupal 7's Theme Guide online at:
131
      https://drupal.org/theme-guide
(1-1/8)