HTML Template to Drupal Theme

2

votes

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

drupaldrupal-6drupal-themingdrupal-themes

hi, just am exploring theme,i saw in garland , there is a variable called #left. $right,when i echo the $left , it print the menu, i just searched entire drupal files, am not find any where , that is this $left variable declared as global, i want to debug this $left step by step, how to debug – Bharanikumar

am not sure, i thing there is file called theme.inc, there $left,$right variables are generating from that place only, but there are used the $variable['layout'], i am not understand what is this, can some one explain these – Bharanikumar

It sounds like you lack the fundamental understanding of how theming works in Drupal. You can read a guide: drupal.org/theme-guide . If you have a concrete question you can ask it here, but if you need a multi step guide, this is not the place to get it. There much good documentation written already on drupal.org for questions like, how do I make a theme, how do I make a module etc. – googletorp

4

votes

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.

4

votes

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.

Install any theme to your sites/all/themes. I will use for example zen theme. So path will be sites/all/themes/zen
Copy files from sites/all/themes/zen/zen sub-theme to sites/all/themes/zen/mytheme
Rename sites/all/themes/zen/mytheme/zen.info to sites/all/themes/zen/mytheme/mytheme.info
Change theme name in mytheme.info
Copy all your css and js files to sites/all/themes/zen/mytheme (better to create subdirs for css and js)
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

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

stylesheets[all][] = mycss.css

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

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

2

votes

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

0

votes

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.

0

votes

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!

HTML Template to Drupal Theme

5 Answers