0
Drupal front-end

  Marek Sotak
Hello
Marek Sotak
Developer, designer
co-founder of atomic ant ltd web design company based in London, Prague and
Denmark,...
Theming – Drupal 6
●   Theme = presentation layer – separated from logic
        –   No need to touch the modules if we wa...
Theme anatomy
Page rendering – suggestions + preprocess
theme('hook', $arguments)
●   theme_breadcrumb, schoolinafrica_links,...
●   Defined in hook_theme()
          function se...
hook = function – suggestions
●   themeName_hook($arguments)
       –   schoolinafrica_breadcrumbs($arguments)
●   engineN...
hook = template – suggestions
●   Convert $arguments → $variables
●   Search for render functions
    (theme_render_templa...
hook = template – suggestions
●   template_preprocess
●   template_preprocess_hook
●   moduleName_preprocess
●   moduleNam...
hook = template – suggestions
●   engineName_preprocess
●   engineName_preprocess_hook
●   themeName_preprocess
●   themeN...
hook = template – suggestions
●   theme_render_template

●   Put together .tpl.php

●   suggestion.tpl.php
    fallback to...
Sub-theming
●   .info file with base theme defined is enough
        –   base theme = ninesixty
●   Sub-themes can share s...
Sub-theming – how to
●   Create new folder in the sites/*/themes folder, give
    it a name – eg. sites/all/themes/schooli...
Useful tips
●   DrupalContrib.org
        –   http://drupalcontrib.org
●   admin/settings/performance
        –   CSS + js...
Useful tips
●   Themer module
         –   http://drupal.org/project/devel_themer




●   Firebug – firefox extension - ht...
Links
●   Theming handbook d.o - Drupal 6
         –   http://drupal.org/theme-guide
●   Drupal 6.x → 7.x guide
         –...
Q&A
Bye and thank you!
Marek Sotak
Developer, designer
co-founder of atomic ant ltd web design company based in London, Prague...
Credits
●   Slide 4 by Medical Student on flickr
●   Slide 44 - http://web.mac.com/moistproduction/flash/index.html
●   Sl...
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Atomicant Drupal 6 Theming
Upcoming SlideShare
Loading in...5
×

Atomicant Drupal 6 Theming

1,815

Published on

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

No Downloads
Views
Total Views
1,815
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×