forked from fionnbharra/nimbupani.github.com
-
Notifications
You must be signed in to change notification settings - Fork 1
/
creating-html-5-theme-for-drupal-6.html
289 lines (166 loc) · 12.2 KB
/
creating-html-5-theme-for-drupal-6.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Creating HTML 5 theme for Drupal 6 | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Since I write and tweet about HTML5 Koolaid, it is only appropriate that my website also incorporates the new and improved semantic elements of HTML5 …">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/blog/creating-html-5-theme-for-drupal-6.html">
<link href="/blog/stylesheets/screen.css" rel="stylesheet">
<script src="/blog/javascripts/modernizr-2.0.js"></script>
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Divya Manian" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/blog/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a></h2>
</header>
<nav class="sitenav"><form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:nimbupani.github.com/blog" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<a href="/blog/">Home</a>
<a href="/blog/blog/archives">Archives</a>
<a href="/blog/about">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/blog/css-references-for-mainstream-browsers.html" title="CSS References for Mainstream Browsers">❬</a>
<a class="next" href="/blog/presenting-your-self-online.html" title="Presenting Your Self Online">❭</a>
</nav>
<header>
<time datetime="2009-12-16T00:00:00-08:00" pubdate><span class='month'>Dec</span> <span class='day'>16</span> <span class='year'>2009</span></time>
<h1 class="entry-title"><a href="/blog/creating-html-5-theme-for-drupal-6.html">Creating HTML 5 theme for Drupal 6</a></h1>
</header>
<div class="entry-content"><p>Since I <a href="/blog/web-design.html">write</a> and <a href="http://twitter.com/nimbuin">tweet</a> about HTML5 Koolaid, it is only appropriate that my website also incorporates the new and improved semantic elements of HTML5. I also figured it would be the right time to upgrade to Drupal 6. </p>
<p></p>
<p>Here is how you can create a theme which uses some of the new elements of HTML5. This is not the <em>only</em> way to do it, but simply my attempt at creating one. Please comment if you know of better ways to do it.</p>
<p></p>
<h3>Caveats</h3>
<ul><li>The new elements of HTML5 will not render correctly in Firefox 2 and below (you can see how this website renders in Firefox 2 to see the true extent of devastation). Your best bet is to output a class to body element — use that to style the page — if Firefox 2 makes a request, <a href="http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/" title="Browser.php – Detecting a user’s browser from PHP | Chris Schuld's Blog">using PHP Browser Detection</a> (this script will cause crazy results on all browsers, if you enable caching).</li>
<li>You need <a href="http://remysharp.com/2009/01/07/html5-enabling-script/" title="HTML5 enabling script">Remy Sharp’s HTML 5 enabling script</a> so that IE can recognize new HTML5 elements and apply the CSS correctly.</li></ul>
<p></p>
<p>Before you start creating a HTML5 Drupal theme, <a href="http://html5doctor.com/designing-a-blog-with-html5/" title="Designing a blog with html5 | HTML5 Doctor">read this post on creating a blog with HTML 5 markup</a>. That should give you all information you need on the markup. Then, start with an existing Drupal 6 theme that you want to convert to HTML5.</p>
<p></p>
<p>These are the template files I modifed: </p>
<ul>
<li><code>page.tpl.php</code> - I divided the content into <code>header</code>, <code>footer</code>, <code>section</code> elements. I also used <code>nav</code> to be the container for the <code>primary links</code></li>
<li><p><code>node.tpl.php</code> - Each node is an <code>article</code>. This is also where you can use the <code>time</code> element to mention the published date of a node: </p>
<pre>
<code><time pubdate="pubdate" datetime ="<?php echo format_date($created,'custom', 'Y-m-d'); ?>">
<?php echo format_date($created,'small') ?>
</time> </code>
</pre>
</li>
<li><code>search-result.tpl.php</code> - I am not sure if this is correct, but I have marked up each search result as an <code>article</code>. </li>
<li><code>search-results.tpl.php</code> - If you need a <a href="http://html5doctor.com/the-section-element/">sectioning element</a> around the search results, this is where you should add it.</li>
<li><code>comment.tpl.php</code> - I used <code>article</code> to markup each comment. I also used <code>time</code> to render the publication date of a comment:
<pre><code><time pubdate="pubdate" datetime ="<?php
echo format_date($comment->timestamp, 'custom', 'Y-m-d\TH:i:s');
$tzone = variable_get('date_default_timezone');
printf('%s%02d:%02d', ($tzone < 0 ? '-' : '+'), abs($tzone / 3600), abs($tzone % 3600) / 60);
?>">
<?php echo format_date($comment->timestamp, 'small')?>
</time></code></pre>
</li>
<li><code>comment-wrapper.tpl.php</code> - In my theme, all comments are contained within a <code>section</code> which can be specified in this file.</li>
<li><code>box.tpl.php</code> - I used <code>article</code> as a container for the comment form. This template renders the container for that form.</li>
<li>Own Module — I had to create a module to use <code>article</code> to wrap the Advanced Search Form. Here is the code I used in the module:
<pre><code>//nimbupani is the name of the module
function nimbupani_form_alter(&$form, $form_state, $form_id) {
if($form_id == 'search_form') {
$form['advanced']['#prefix']="<article>";
$form['advanced']['#suffix']="</article>";
}
}</code>
</pre>
</li>
</ul>
<p>The api.drupal.org has a <a href="http://api.drupal.org/api/search/6/.tpl.php" title="Search for .tpl.php | Drupal API">full list of all themable template files available to you in Drupal 6</a> if your theme requires more customization. </p>
<p>You can use <a href="http://html5.validator.nu/" title="Validator.nu (X)HTML5 Validator">validator.nu</a> to test your pages. But be warned, the validator is known to lag behind the specification. So, you might get false negatives, if so, ignore them if you know you are confirming to the latest specification.</p>
<h3>Further Work</h3>
<p>This is just scratching the surface, you can also make all form elements to use HTML5 attributes, and also add <a href="http://www.marcozehe.de/2009/10/31/easy-aria-tip-4-landmarks/">ARIA landmarks</a>. These are my focus areas for the next update to my theme.</p>
<p>Meanwhile, if there is any element that is incorrectly used on this site, or if you have any suggestions on how to make the site better, do comment!</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/blog/about.html">Divya Manian</a>
on
<time datetime="2009-12-16T00:00:00-08:00" pubdate><span class='month'>Dec</span> <span class='day'>16</span> <span class='year'>2009</span></time> in
<span class="categories">
<a class='category' href='/blog/categories/web-development/'>Web Development</a>
</span>
.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<h2>Posts on Web Development</h2>
<ul>
<li><a href="/blog/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li>
<li><a href="/blog/some-css-transition-hacks.html">Some CSS Transition hacks</a></li>
<li><a href="/blog/safe-css-defaults.html">Safe CSS Defaults</a></li>
<li><a href="/blog/unplugged-2011.html">Unplugged 2011</a></li>
<li><a href="/blog/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li>
<li><a href="/blog/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li>
<li><a href="/blog/web-opener-at-opera.html">Web Opener at Opera</a></li>
<li><a href="/blog/current-color-in-css.html">Current Color in CSS</a></li>
<li><a href="/blog/css-vocabulary.html">CSS Vocabulary</a></li>
<li><a href="/blog/active-web-development.html">Active Web Development</a></li>
<li><a href="/blog/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li>
<li><a href="/blog/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li>
<li><a href="/blog/svg-is-coming.html">SVG is coming!</a></li>
<li><a href="/blog/wee-marquee.html">Wee! Marquee</a></li>
<li><a href="/blog/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li>
<li><a href="/blog/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li>
<li><a href="/blog/diversity.html">Diversity</a></li>
<li><a href="/blog/notes-from-javascript-n00b.html">Notes from a JavaScript n00b</a></li>
<li><a href="/blog/spacing-out-on-css-namespaces.html">Spacing Out on CSS Namespaces</a></li>
<li><a href="/blog/notes-from-html5-readiness-hacking.html">Notes from HTML5 Readiness Hacking</a></li>
<li><a class="btn" href="/blog/categories/web-development/">More</a></li>
</ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2011 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/creating-html-5-theme-for-drupal-6.html';
var disqus_identifier = 'http://nimbupani.com/creating-html-5-theme-for-drupal-6.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.0.min.js"><\/script>')</script>
<script src="/blog/javascripts/octopress.js" type="text/javascript"></script>
</body>
</html>