Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Converting Static Html To Drupal Theme

42,467 views

Published on

How to convert a static html design to a dynamic Drupal theme

Published in: Technology

Converting Static Html To Drupal Theme

  1. 1. Static HTML to Drupal Theme By Ivan Zugec
  2. 2. Static HTML to Drupal Theme. <ul><li>Setting up a theme. </li></ul><ul><li>Overriding tpl files. </li></ul><ul><li>Using the devel module. </li></ul><ul><li>Q and A </li></ul>
  3. 3. Static HTML page
  4. 4. Required theme files and folders <ul><li>Images folder </li></ul><ul><li>Page.tpl.php </li></ul><ul><li>.info file </li></ul><ul><li>Style.css </li></ul>
  5. 5. Where do we save themes? sites/all/themes
  6. 6. .info file for your theme ; $Id$ name = rgdesign core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[footer] = Footer
  7. 7. Regions
  8. 8. page.tpl.php file
  9. 9. Page.tpl.php Replace this:
  10. 10. Page.tpl.php With this: <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php print $scripts ?>
  11. 11. Page.tpl.php Replace this:
  12. 12. Page.tpl.php With this: if ($logo || $site_name) { if ($logo) { print '<a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_title .'&quot;>'; print '<img src=&quot;'. check_url($logo) .'&quot; alt=&quot;'. $site_title .'&quot; id=&quot;logo&quot; /></a>'; } print '<h1>'. $site_name .'</h1>'; }
  13. 13. Page.tpl.php if ($logo || $site_name) { if ($logo) { print '<a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_title .'&quot;>'; print '<img src=&quot;'. check_url($logo) .'&quot; alt=&quot;'. $site_title .'&quot; id=&quot;logo&quot; /></a>'; } print '<h1>'. $site_name .'</h1>'; } <?php if (isset($primary_links)) : ?> <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?> <?php endif; ?>
  14. 14. Next regions
  15. 15. Left Side Bars With this: Replace this: <?php if ($left): ?> <?php print $left ?> <?php endif; ?>
  16. 16. Right Side Bars With this: Replace this: <?php if ($search_box): ?> <div class=&quot;block_menu&quot;> <h3>Search</h3><?php print $search_box ?> </div> <?php endif; ?> <?php if ($right): ?> <?php print $right ?> <?php endif; ?>
  17. 17. Footer With this: Replace this: <div class=&quot;center&quot; id=&quot;f&quot;> <?php print $footer ?> </div> <?php print $closure ?> </body>
  18. 18. Content region
  19. 19. Important Variables <?php print $breadcrumb ?> <?php print $messages ?> <?php print $tabs ?>
  20. 20. Important Variables <?php print $title ?> <?php print $help ?> <?php print $content ?> <?php print $feed_icons ?>

×