Converting Static Html To Drupal Theme

41,139 views

Published on

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

Published in: Technology
10 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total views
41,139
On SlideShare
0
From Embeds
0
Number of Embeds
512
Actions
Shares
0
Downloads
1,182
Comments
10
Likes
24
Embeds 0
No embeds

No notes for slide

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 ?>

×