Published on

How to theme a site for drupal easily and quickly

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 2. Greg Patarini Sasquatch by birth Started in Computers in 1979 @tnhomestead [email_address] http://www.odesk.com/contractors/tnhomestead
  2. 3. General Rules Always develop on a test site!!! Write secure code! Selectively Deploy your Theme! Make sure PHP error reporting is OFF! Can use a different theme for admin pages!
  3. 4. Drupal 6 Cheat Sheet http://www.minezone.org/blog/2009/02/04/drupal-6-theming-cheat-sheet/
  4. 5. Theming Options EZ Options Use a theme that is close to what you want Easy custom themes offered by: Drupal Gardens Buzzr Theme Generators
  5. 6. How to theme 1. Parts of a drupal theme. 2. Built in tools for changing the look of a theme 3. How to create a theme from an existing one 4. How to create your own theme
  6. 7. Parts of Drupal Theme themename.info — A required file that is new to Drupal 6 which provides information about the theme. page.tpl.php — The main template that defines the content on most of the page. style.css — The CSS file that sets the CSS rules for the template. logo.png — Your logo, if you are using one. screenshot.png — This is a screenshot of your theme that is used in the admin panel and in the user account settings if you have enabled more than one theme so that visitors can choose which theme they want to use.
  7. 8. The Rest of the story node.tpl.php — This file defines the content of the nodes. block.tpl.php — Defines the content of the blocks. comment.tpl.php — Defines the content of the comments. box.tpl.php — puts a box around things like comments. style-rtl.css — this file is new to Drupal 6's Bluemarine.
  8. 9. Template Files Not all template files are needed New theme should be in sites/all/themes/ Bluemarine is a good starter theme So is Zen
  9. 10. Themename.info Required file Provides information on the theme * name required * description recommended * screenshot * version discouraged * core required * engine required in most cases * base theme * regions * features * stylesheets
  10. 11. name = Garland description = Tableless, recolorable, multi-column, fluid width theme (default). version = VERSION core = 6.x engine = phptemplate stylesheets[all][] = style.css stylesheets[print][] = print.css ; Information added by drupal.org packaging script on 2008-02-13 version = "6.0" project = "drupal" datestamp = "1202913006"
  11. 12. Template pages * page.tpl.php (for the overall page layout) * node.tpl.php (for all the 'nodes' or main content sections of a page) * block.tpl.php (for the blocks, in whichever regions you place them) * comment.tpl.php (for all comments on you site)
  12. 13. Modules to help Theme Color Conditional Stylesheets Custom Node Template Sections Signwriter Panels
  13. 14. Color <ul><li>Theme must be designed to use it
  14. 15. Background must be white
  15. 16. Modifies a themes style.css </li></ul>
  16. 17. Conditional Stylesheets Used to solve rendering problems in IE Using CSS
  17. 18. Custom Node Module <ul><li>Meant to customize specific nodes
  18. 19. If you want all nodes changed, better off using node.tpl.php </li></ul>
  19. 20. Sections <ul><li>Allows you to create sections
  20. 21. Each section has its own theme
  21. 22. example </li></ul>name: Administration Section path: admin* and select a theme for that section.
  22. 23. Signwriter <ul><li>Allows you to use true type fonts to replace text
  23. 24. Must have the GD library included
  24. 25. Font file names must be lower case </li></ul>
  25. 26. Panels The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout. Integration with other systems allows you to create nodes that use this, landing pages that use this, and even override system pages such as taxonomy and the node page so that you can customize the layout of your site with very fine grained permissions.
  26. 27. Now for the fun We will Drupalize a static html site
  27. 28. Drupalize a HTML/CSS template Step 1 Remove all head content Step 2 Replace all head content Step 3 replace body content as needed
  28. 29. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
  29. 30. <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;<?php print $language->language; ?>&quot; lang=&quot;<?php print $language->language; ?>&quot; dir=&quot;<?php print $language->dir; ?>&quot;>
  30. 31. <head> <title><?php print $head_title; ?></title> <?php print $head; ?> <?php print $styles; ?> <?php print $scripts; ?> </head>
  31. 32. PHP Changes You can change whats displayed very easily Just cut and paste the code Anywhere you want it