Your SlideShare is downloading. ×
Atomicant Drupal 6 Theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Atomicant Drupal 6 Theming

1,794
views

Published on

Published in: Design, Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,794
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Drupal front-end Marek Sotak
  • 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. 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. Theme anatomy
  • 5. Page rendering – suggestions + preprocess
  • 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. hook = function – suggestions ● themeName_hook($arguments) – schoolinafrica_breadcrumbs($arguments) ● engineName_hook($arguments) – phptemplate_hook($arguments) ● theme_hook($aguments)
  • 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. hook = template – suggestions ● template_preprocess ● template_preprocess_hook ● moduleName_preprocess ● moduleName_preprocess_hook ● engineName_engine_preprocess ● engineName_engine_preprocess_hook
  • 10. hook = template – suggestions ● engineName_preprocess ● engineName_preprocess_hook ● themeName_preprocess ● themeName_preprocess_hook ● Collects suggestions ● Find implemented suggestions (drupal_discover_template)
  • 11. hook = template – suggestions ● theme_render_template ● Put together .tpl.php ● suggestion.tpl.php fallback to ● hook.tpl.php
  • 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. 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. 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. Useful tips ● Themer module – http://drupal.org/project/devel_themer ● Firebug – firefox extension - http://getfirebug.com/
  • 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. Q&A
  • 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. 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