Atomicant Drupal 6 Theming

1,952 views
1,884 views

Published on

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,952
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Atomicant Drupal 6 Theming

  1. 1. Drupal front-end Marek Sotak
  2. 2. Hello Marek Sotak Developer, designer co-founder of atomic ant ltd web design company based in London, Prague and Denmark, operates internationaly. Creator of RootCandy admin theme http://drupal.org/project/rootcandy http://twitter.com/sotak http://facebook.com/sotak http://atomicant.co.uk
  3. 3. Theming – Drupal 6 ● Theme = presentation layer – separated from logic – No need to touch the modules if we want to change the output (markup) ● PHPTemplate engine (Smarty, xtemplate, etc...) ● Saving to sites/*/themes/my-theme
  4. 4. Theme anatomy
  5. 5. Page rendering – suggestions + preprocess
  6. 6. theme('hook', $arguments) ● theme_breadcrumb, schoolinafrica_links,... ● Defined in hook_theme() function search_theme() { return array( 'search_theme_form' => array( 'arguments' => array('form' => NULL), 'template' => 'search-theme-form', ), ); }
  7. 7. hook = function – suggestions ● themeName_hook($arguments) – schoolinafrica_breadcrumbs($arguments) ● engineName_hook($arguments) – phptemplate_hook($arguments) ● theme_hook($aguments)
  8. 8. hook = template – suggestions ● Convert $arguments → $variables ● Search for render functions (theme_render_template) ● Search for the function that sets the template files extension (.tpl.php) ● $variables are passed by reference
  9. 9. hook = template – suggestions ● template_preprocess ● template_preprocess_hook ● moduleName_preprocess ● moduleName_preprocess_hook ● engineName_engine_preprocess ● engineName_engine_preprocess_hook
  10. 10. hook = template – suggestions ● engineName_preprocess ● engineName_preprocess_hook ● themeName_preprocess ● themeName_preprocess_hook ● Collects suggestions ● Find implemented suggestions (drupal_discover_template)
  11. 11. hook = template – suggestions ● theme_render_template ● Put together .tpl.php ● suggestion.tpl.php fallback to ● hook.tpl.php
  12. 12. Sub-theming ● .info file with base theme defined is enough – base theme = ninesixty ● Sub-themes can share some of the files from base theme – CSS, js, .tpl.php, overriden functions in template.php ● They don't share – theme-settings.php, logo, color, some of the settings specified in .info file
  13. 13. Sub-theming – how to ● Create new folder in the sites/*/themes folder, give it a name – eg. sites/all/themes/schoolinafrica ● Add .info file with basic values name, description,... ● Add “base theme = ninesixty” to .info file ● DONE Subtheming quick and dirty - http://drupal.org/node/441088
  14. 14. Useful tips ● DrupalContrib.org – http://drupalcontrib.org ● admin/settings/performance – CSS + js files optimization ● Base themes – Zen, Ninesixty, Genesis,... http://drupal.org/project/Themes
  15. 15. Useful tips ● Themer module – http://drupal.org/project/devel_themer ● Firebug – firefox extension - http://getfirebug.com/
  16. 16. Links ● Theming handbook d.o - Drupal 6 – http://drupal.org/theme-guide ● Drupal 6.x → 7.x guide – http://drupal.org/update/theme/6/7 ● Mailing list – http://drupal.org/mailing-lists ● Theme garden - http://themegarden.org ● IRC #drupal-themes
  17. 17. Q&A
  18. 18. Bye and thank you! Marek Sotak Developer, designer co-founder of atomic ant ltd web design company based in London, Prague and Denmark, operates internationaly. http://twitter.com/sotak http://facebook.com/sotak http://atomicant.co.uk
  19. 19. Credits ● Slide 4 by Medical Student on flickr ● Slide 44 - http://web.mac.com/moistproduction/flash/index.html ● Slide 61 - http://www.flickr.com/photos/wolfy/2647354470/ ● Website preview: http://letsbuildaschoolinafrica.org

×