I remember an interview with Jeff Robins and Ted Serbinski discussing issue's and challenges converting the concept theme of TWiT.tv to a Drupal theme. I can't find the original podcast on the Twit site now but it had some really good coverage of various issues one could run into.
When fully porting a theme, you really need to consider the site it will be used for, layout, content markup that is appropriate for your site.
Dark Ritual is a 3 column fixed width theme that uses floats. This will be a quick and dirty theme concept port, not a clean port of a theme to a fully functional version but should get you most of the way there.
Download and extract the theme you wish to port. For this example we are using Dark Ritual. As with my previous article, we will need to open up the faithful blue marine to steal all the php code out of.
So, create a folder in /sites/all/default/themes/dark_ritual. Copy all the files from the theme into your directory. Rename the index.html file to page.tpl.php, rename default.css to style.css.
We're going to leave the doctype declarations alone but if you are serious about your site (and don't want to listen to everyone bitch and moan about your site, do your research and choose appropriately).
So look at the stuff between the <head> ... </head> tags and replace it with what ever is in blue marine. Ahh, the joys of copy and paste.
So fire up Firefox with web developer tool bar and poke around on a local copy of the index.html to figure out where things should go.
For the site name we have <div class="header">Dark Ritual</div> Well, looks like no logo or navbrs in the header. Some people seem to like that so for this theme, we ignore the if statement and assume your site will have a site name. <div class="header"><?php print $site_name ?></div>. If you want your site name as a link, then you will need to add some more stuff <div class="header"><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></div>
The next item appears to be right side bar. It goes div_right then padded. So we will try an optional right sidebar to see what get rid of all the text and move padding into the if statement and see what it looks like.
<div class="main_right">
<?php if ($sidebar_right) { ?><div class="padded">
<?php print $sidebar_right ?>
</div><?php } ?>
</div>Next in line is the subnav. Let's assume for using this theme, we'll always have a left sidebar content.<.p>
<div class="subnav">
<?php print $sidebar_left ?>
</div>We finally get to the main content area. Let's look at the original html again. No room for a breadcrumb, and let's leave the feed icon out for now. The theme's designer seems to have used padded for spacing so here we have;
<div class="main">
<div class="padded">
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
</div>Ya! Down to the footer.
<div class="footer">
<span class="left"><?php print $footer_message ?></span>
<span class="right">Template design by <a href="http://arcsin.se">Arcsin</a></span>
<div class="clearer"><span></span></div>
</div>If you notice, I've left the designers name in. Some OSWD themes have this request or requirement in them. I'm not using the theme myself so I didn't pay attention if this had it. If you want to use it, then pay attention to the designers wishes.
Right before the body tag stick <?php print $closure ?> in. I forget why but it's probably important for closing javascript and such.
Next, copy the node.tpl.php and the block.tpl.php into the Dark Ritual directory. Now, look at the HTML code again. The theme has the submitted by line so open up that node.tpl.php file and move all the blue marine to one line.
<p class="meta"><?php print $submitted?> | <?php print $terms?> | <?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?></p>And for some reason the author used H1 for all titles. I generally prefer to use H1 once, H2 and H3 for everything else but we're porting, not designing so change the H2 in node.tpl.php to H1 and don't forget to close them
<?php if ($page == 0) { ?><h1 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h1><?php }; ?>A quick look at the original theme code shows we have to do that same to the block.tpl.php we copied over as well. Plus clean out some of the other mark up.
Take a screen shot of the theme and shrink it down to around 150x90 pixels. Save it in the theme directory as screenshot.png and Drupal will pick it up and display it in the theme chooser.
Now end result, the theme still needs a lot of clean up to be a really usable and useful theme for someone. To wide in some areas will break it. But I hope that this will help you with starting to port your HTML mock ups to Drupal themes. This rough pass took me about 3 hours while I also chatted a little in IRC and played with my son.
This is not a theme I intend to finish. It was just one that I found that looked interesting and had three columns. I've included the files I used and edited for you to use, learn from and enjoy. At no point have I touched or tweaked the css at all.
| Attachment | Size |
|---|---|
| dark_ritual.png | 130.46 KB |
| dark_ritual.zip | 48.84 KB |
Lullabot podcast
Hi! You and I had the same idea about the ideas in the podcast about the TWiT port; you would have found it except that it is a Lullabot podcast, not a TWiT. :)
Here is the link: http://www.lullabot.com/audiocast/drupal_podcast_no_18_leo_laporte
Thank you for the quick and dirty. I will be giving it a try!
thanks
I saw your site the other day off the Drupal Talk feed. I look forward to how it goes for you. I sort of hack away at this stuff.
Keep in mind that there are several problems with the theme I picked. Lot's of css tweaking would need to happen for it to be really usable. The fixed content area breaks in a heart beat and it uses H!, H2 tags in a way I don't like myself. I like the over all idea of the design though, it just needs some re-implementation love.
Once you run though it a few times on the basic level, you then get to start seeing the possibilities which is both great and maddening. Great because you know it can be done. Madding because you don't yet know quite how to get there.:D
One guy to keep an eye on is nevets because he gives such great answers and bits of code to a wide variety of questions. I find it educational to check his tracker once in a while to see what different possibilities on how to do things there are.
It's really "Quick and
It's really "Quick and Dirty".
There are a lot of good templates at the OSWD, so it would be nice to see a lot of ported temes to Drupal templates (as result of this excellent tutorial).
--
Drupal Theme Garden
remaining challanges
Taking care of the remaining details of conversion is a good learning challenge as well. The outstanding issue is many of the OSWD themes are not licensed with GPL and many do not survive the transition from a static HTML mockup to a more dynamic content style.
Nice Article
Found your article from Drupal Forums. Really nice.
thanks
Your feedback is appreciated.
A very nice artical
A very nice artical but it would be more better if you know "How to convert theme from HTML to XHTML. For my new site i'm using HTML/CSS, so i want to convert it to drupal, any suggestions?
I have also the same
I have also the same problem..
if you have any odeas means kindly let me know.
I am also looking for the same..
Well, you would build your
Well, you would build your theme before porting it to a Drupal theme format. HTML to XHTML is more of a design thing before you even begin to implement in Drupal. I would suggest a mock up first.
Post new comment