Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 236 lines (132 sloc) 11.861 kb
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

<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" 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 &hellip;">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="canonical" href="http://nimbupani.github.com/creating-html-5-theme-for-drupal-6.html">
  <link href="/stylesheets/screen.css" rel="stylesheet">
  <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
  <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
  
</head>


<body >
  <div class="container">
    <div class="content">
      <header role="banner"> <h1><a href="/">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> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
  
</header>
      <nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
      
  



  


<article>
  <nav class="article">
    
      <a class="previous" href="/css-references-for-mainstream-browsers.html" title="CSS References for Mainstream Browsers">&#x276C;</a>
    
    
      <a class="next" href="/presenting-your-self-online.html" title="Presenting Your Self Online">&#x276D;</a>
     
    
               
  </nav>
    <header>
    




  

<time datetime="2009-12-16T00:00:00+05:30" pubdate><span class='month'>Dec</span> <span class='day'>16</span> <span class='year'>2009</span></time>
    
      <h1 class="entry-title"><a href="/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="/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 &#8211; Detecting a user&#8217;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>&lt;time pubdate=&quot;pubdate&quot; datetime =&quot;&lt;?php echo format_date($created,&#x27;custom&#x27;, &#x27;Y-m-d&#x27;); ?&gt;&quot;&gt;
    &lt;?php echo format_date($created,&#x27;small&#x27;) ?&gt;
&lt;/time&gt; </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>&lt;time pubdate=&quot;pubdate&quot; datetime =&quot;&lt;?php
 echo format_date($comment-&gt;timestamp, &#x27;custom&#x27;, &#x27;Y-m-d\TH:i:s&#x27;);
 $tzone = variable_get(&#x27;date_default_timezone&#x27;);
 printf(&#x27;%s%02d:%02d&#x27;, ($tzone &lt; 0 ? &#x27;-&#x27; : &#x27;+&#x27;), abs($tzone / 3600), abs($tzone % 3600) / 60);
?&gt;&quot;&gt;
&lt;?php echo format_date($comment-&gt;timestamp, &#x27;small&#x27;)?&gt;
&lt;/time&gt;</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(&amp;$form, $form_state, $form_id) {
  if($form_id == &#x27;search_form&#x27;) {
    $form[&#x27;advanced&#x27;][&#x27;#prefix&#x27;]=&quot;&lt;article&gt;&quot;;
    $form[&#x27;advanced&#x27;][&#x27;#suffix&#x27;]=&quot;&lt;/article&gt;&quot;;
  }
}</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="/about.html">Divya Manian</a>
 on




  

<time datetime="2009-12-16T00:00:00+05:30" 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='/categories/web-development/'>Web Development</a>
  
</span>

. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2009-12-16-creating-html-5-theme-for-drupal-6.md">please send a pull request</a>.
    </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">
    <p><img class="avatar" src="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
    <h2>Posts on Web Development</h2>
    <ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
  </aside>
  <footer role="contentinfo"><p>
  Copy to your heart’s content 2013 - 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 src="/javascripts/octopress.js"></script>

  <script>
    var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>




</body>
</html>
Something went wrong with that request. Please try again.