1 |
6c38d829
|
Assos Assos
|
Current state of Tao for Drupal 7
|
2 |
|
|
---------------------------------
|
3 |
|
|
Many of the concepts in Tao for Drupal 6.x have been addressed by the theme
|
4 |
|
|
layer of Drupal 7 in one way or another. As a result, various parts of Tao have
|
5 |
|
|
been refactored and other parts are up in the air conceptually.
|
6 |
|
|
|
7 |
|
|
### Key changes
|
8 |
|
|
|
9 |
|
|
- $vars['attr'] is deprecated in templating and preprocessors. Use the D7 core
|
10 |
|
|
handling through $attributes_array and $classes_array instead.
|
11 |
|
|
- Custom js for fieldset collapsibility is deprecated. Tao now uses the default
|
12 |
|
|
D7 js for fieldset collapsing.
|
13 |
|
|
- theme_form_element() in D7 properly marks form elements with their types.
|
14 |
|
|
|
15 |
|
|
### @TODO / still concepting
|
16 |
|
|
|
17 |
|
|
- Future of tao-based print-friendly stack.
|
18 |
|
|
- Fully update README once all major changes are stabilized.
|
19 |
|
|
|
20 |
|
|
|
21 |
|
|
Tao
|
22 |
|
|
---
|
23 |
|
|
Tao is a base theme for Drupal that is all about going with the flow. It is not
|
24 |
|
|
meant for general-purpose use, but instead takes care of several tasks so that
|
25 |
|
|
sub-themes can get on with their job:
|
26 |
|
|
|
27 |
|
|
- Aggressive resets of not only browser default styles but Drupal core defaults
|
28 |
|
|
- Unification of several template families into a single consistent format (e.g.
|
29 |
|
|
node.tpl.php, block.tpl.php, etc.)
|
30 |
|
|
- Theme overrides of several core annoyances (fieldsets, pagers)
|
31 |
|
|
- On-screen print stylesheet display and framework for further customized print
|
32 |
|
|
styling
|
33 |
|
|
|
34 |
|
|
Tao makes several assumptions about how you, the themer, would like to work with
|
35 |
|
|
Drupal and the theme system:
|
36 |
|
|
|
37 |
|
|
- Minimize template overrides and leverage preprocessors as much as possible
|
38 |
|
|
- Preference for generalized styling over exceptions and particular design of
|
39 |
|
|
one-off elements
|
40 |
|
|
- High degree of control over CSS, particularly selector specificity
|
41 |
|
|
|
42 |
|
|
|
43 |
|
|
Overview for subthemers
|
44 |
|
|
-----------------------
|
45 |
|
|
The following is a comprehensive list of things to know about Tao as a
|
46 |
|
|
subthemer.
|
47 |
|
|
|
48 |
|
|
|
49 |
|
|
### Alterations to core markup
|
50 |
|
|
|
51 |
|
|
Tao leaves most core element markup alone. When things don't make sense,
|
52 |
|
|
however, it makes changes and aggressive ones at that. Here's a list of things
|
53 |
|
|
to expect:
|
54 |
|
|
|
55 |
|
|
- `theme('fieldset')`
|
56 |
|
|
|
57 |
|
|
The `fieldset` element in core has been retained but with additional markup
|
58 |
|
|
for simpler theming. The `legend` element contains a sub-element `span` that
|
59 |
|
|
can be positioned properly across browsers and the main contents of the
|
60 |
|
|
fieldset follow other object templates with a `.fieldset-content` div.
|
61 |
|
|
|
62 |
|
|
- `theme('form_element')`
|
63 |
|
|
|
64 |
|
|
To distinguish between different instances of the `.form-item` wrapper, Tao
|
65 |
|
|
adds a `.form-item-labeled` class to labeled items and `.form-item-option` to
|
66 |
|
|
checkboxes and radios.
|
67 |
|
|
|
68 |
|
|
- `theme('pager')`
|
69 |
|
|
|
70 |
|
|
All numeric page links are grouped together into a `ul.pager-list` set.
|
71 |
|
|
Next/previous links are grouped together under `ul.pager-links`.
|
72 |
|
|
|
73 |
|
|
- `theme('username')`
|
74 |
|
|
|
75 |
|
|
All username instances are wrapped in an `a.username` or `span.username`.
|
76 |
|
|
|
77 |
|
|
|
78 |
|
|
### Attributes and the `$attr` variable
|
79 |
|
|
|
80 |
|
|
The `$vars['attr']` variable is the standard way for adding any HTML attribute
|
81 |
|
|
to the major containing element of the corresponding template. The
|
82 |
|
|
`drupal_attributes($attr)` is used in each template to render attributes. For
|
83 |
|
|
example, to add a class to a node, you would add the following to your
|
84 |
|
|
subtheme's node preprocessor:
|
85 |
|
|
|
86 |
|
|
$vars['attr']['class'] .= ' myclass';
|
87 |
|
|
|
88 |
|
|
|
89 |
|
|
### CSS resets & removal
|
90 |
|
|
|
91 |
|
|
Tao implements an aggressive `reset.css` but also strips out the inclusion of
|
92 |
|
|
many of the CSS files included in core with the exception of `colors.css` and
|
93 |
|
|
`locale.css` (see `tao.info` for the specifics). Tao reimplements and
|
94 |
|
|
consolidates Drupal core CSS styles in a way that will not affect a
|
95 |
|
|
typographical or other strict grid in `drupal.css` that can be overridden by
|
96 |
|
|
sub themes for even greater control.
|
97 |
|
|
|
98 |
|
|
Tao does not remove any contrib CSS added from other module directories, e.g.
|
99 |
|
|
`sites/all/modules` or `profiles/myprofile/modules`.
|
100 |
|
|
|
101 |
|
|
**Note:** The main reason for the stripping of core CSS is to achieve consistent
|
102 |
|
|
typography and grid layout. Many styles in Drupal core add inconsistent
|
103 |
|
|
`padding`, `line-height`, and `font-size` adjustments to elements, making it
|
104 |
|
|
extremely costly to hunt down individual instances and correct them.
|
105 |
|
|
|
106 |
|
|
|
107 |
|
|
### Print preview
|
108 |
|
|
|
109 |
|
|
Tao allows a site's print stylesheets to be previewed by checking whether
|
110 |
|
|
`$_GET['print']` is set. For example, to preview a node's print stylesheets, you
|
111 |
|
|
would go to `http://example.com/node/5?print`. Other niceties related to print,
|
112 |
|
|
like support for full expansion of a book tree on print, has been added.
|
113 |
|
|
|
114 |
|
|
|
115 |
|
|
### Say no to `media='all'`
|
116 |
|
|
|
117 |
|
|
Tao does not use the `all` key for any of its stylesheets and expects that you
|
118 |
|
|
will not either. Be specific - if the stylesheet is for the screen, or for
|
119 |
|
|
print, say so. Any stylesheet overrides your subtheme provides should use the
|
120 |
|
|
same media key as the one in `tao.info` for the stylesheet that is being
|
121 |
|
|
overridden.
|
122 |
|
|
|
123 |
|
|
|
124 |
|
|
### Stylesheets
|
125 |
|
|
|
126 |
|
|
- `reset.css` provides browser CSS style resets and core styling resets.
|
127 |
|
|
Override this in your subtheme only if you need to add or omit certain reset
|
128 |
|
|
styles.
|
129 |
|
|
- drupal.css` reimplements core CSS styles that are functionally important
|
130 |
|
|
without allowing any modifications to a typographical or layout grid.
|
131 |
|
|
- `base.css` provides very basic structural, non-aesthetic styling for many
|
132 |
|
|
elements. See inline comments for more information.
|
133 |
|
|
- `print.css` is a default print stylesheet. Override this in your subtheme to
|
134 |
|
|
alter print styling entirely.
|
135 |
|
|
|
136 |
|
|
|
137 |
|
|
### Template unification
|
138 |
|
|
|
139 |
|
|
All of the following theme functions go through the exact same template in Tao
|
140 |
|
|
(with the exception of `node` and `fieldset` which go through slightly modified
|
141 |
|
|
versions for better usability and compatibility with contrib modules):
|
142 |
|
|
|
143 |
|
|
- `theme('block')`
|
144 |
|
|
- `theme('box')`
|
145 |
|
|
- `theme('comment')`
|
146 |
|
|
- `theme('fieldset')`
|
147 |
|
|
- `theme('node')`
|
148 |
|
|
|
149 |
|
|
The template is designed to follow a strict pattern. Each element is classed as
|
150 |
|
|
such:
|
151 |
|
|
|
152 |
|
|
[theme_hook]-[element_type]
|
153 |
|
|
|
154 |
|
|
with the name of its hook and then the type of wrapping element within the
|
155 |
|
|
template. For example, for a node, the following elements are provided:
|
156 |
|
|
`.node-title`, `.node-content`, `.node-links` etc. For comments, the
|
157 |
|
|
corresponding classes would be `.comment-title`, `.comment-content`,
|
158 |
|
|
`.comment-links` and so on.
|
159 |
|
|
|
160 |
|
|
|
161 |
|
|
Maintainer
|
162 |
|
|
----------
|
163 |
|
|
- yhahn (Young Hahn) |