HTML Template to Drupal Theme

Question

I have an HTML template. What are the steps to convert it into a Drupal 6 theme?

Answer 1

There is no automatic way to convert your HTML to drupal theme. Easiest way to create your own drupal theme is to start with Zen theme then customizing the CSS.

Here's a link to Zen theme http://drupal.org/project/zen

Answer 2

Create a copy of a theme you want to modify - usually a blank theme like zen works well. You'll need to rename the files and fix the .info file.

Then you can edit the .tpl.php files. node.tpl.php is the main skeleton one. Start copying content from your html template into that file, replacing dummy content with placeholders (which you can find here.

Make sure caching is off, and you can refresh to see the changes.

Answer 3

There's no quick easy solution. I would suggest reading the documentation for theming at Drupal.org. After getting familiar with that information, hit up the Tools, best practices and conventions section specific to theming.

When it comes time to do the conversion from HTML to Drupal, I think you will find Firebug or the development tools of Chrome to be indispensable, inspect element in either tool will be very helpful.

Answer 4

If you provide me image if your theme, I could tell you some common plan for that. Thanks for image.

my advices are I suggest not realy zen theme implementation, because it suggest just to change css. and you already have html and css that was done not in drupal way.

1. Install any theme to your sites/all/themes. I will use for example zen theme. So path will be sites/all/themes/zen
2. Copy files from sites/all/themes/zen/zen sub-theme to sites/all/themes/zen/mytheme
3. Rename sites/all/themes/zen/mytheme/zen.info to sites/all/themes/zen/mytheme/mytheme.info
4. Change theme name in mytheme.info
5. Copy all your css and js files to sites/all/themes/zen/mytheme (better to create subdirs for css and js)
6. Remove zen default zen css files

stylesheets[all][]   = html-elements.css
stylesheets[all][]   = tabs.css
stylesheets[all][]   = messages.css
stylesheets[all][]   = block-editing.css
stylesheets[all][]   = wireframes.css
stylesheets[all][]   = zen.css
stylesheets[print][] = print.css

1. Add your css files to mytheme.info. Using this construction

stylesheets[all][] = mycss.css

1. Add your js files to mytheme.info. Using this construction

   scripts[] = myjs.js

More info about theme.info file look here http://drupal.org/node/171205

1. Look at this image

This is how I think better to split page.

Menu under header looks like primary menu. To theme them add

function mytheme_menu_links    ($items, $type = 'free') {
    if (!empty($items)) {
      foreach ($items as $index => $link) {
      $output = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']); /* insert your html*/
}
    return $output;
}

Right block looks like block. So check block.tpl.php and block theming manual http://drupal.org/node/104319

Content area theming depends of what we are showing as content. Usually it is view or node. so views = http://drupal.org/node/352970 node = http://drupal.org/node/11816

All other html place into page.tpl.php. But you should do this befor theming blocks, menu or content areas. http://drupal.org/node/11812

Answer 5

I would recommend to avoid the zen theme (which is great, of course) if you already have your own HTML template. It's 10 minutes job:

Create your theme.info file as per drupal.org/node/171205

Now create you page.tpl.php file. Just rename your HTML template to this name. Put these in your header (replace actual link tags for css, js...):

<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>

Now use the variables $menu, $left, $right, $content, etc... where you want to put the appropriate page segments. Do not forget to put this

<?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>
<?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>
<?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>

above the content, so you will get the tabs, help and messages as well.

Style it. That's it. You can have a look at this article, however it is in slovak language. But from the code pieces it should be quite clear what is going on, if not, use the Google Translate to get more familiar.

Good luck!