is.gd/3mGND
 
Where Drupal gets its markup
How to change the markup Where Drupal gets its markup
How to change the markup Working with subthemes Where Drupal gets its markup
How to change the markup Working with subthemes Theming forms Where Drupal gets its markup
Color module Theme settings Javascript
 
Theme hooks
Theme hooks Names or IDs that Drupal uses to call themeable output
Theme hooks Names or IDs that Drupal uses to call themeable output *The* theme function
Theme hooks Names or IDs that Drupal uses to call themeable output *The* theme function Calls themeable output using theme...
theme('hook', $arg1, $arg2)
Theme registry Stores the "sequence of events" that happens when a theme hook is called theme('hook', $arg1, $ar...
Defined by implementations of hook_theme()
<ul><li>function  node_theme () { </li></ul><ul><li>return array( </li></ul><ul><li>'node' => array( </li></ul><ul><li>'ar...
<ul><li>function node_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>' node ' => array( </li></ul><ul><li>'ar...
<ul><li>function node_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>' node ' => array( </li></ul><ul><li>'ar...
<ul><li>function node_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>'node' => array( </li></ul><ul><li>'argu...
 
<ul><li>theme(' node_list ', $items, $title) </li></ul>
<ul><li>theme(' node_list ', $items, $title) </li></ul>
<ul><li>theme(' node_list ', $items, $title) </li></ul>
<ul><li>theme(' node_list ', $items, $title) </li></ul>
<ul><li>theme(' node_list ', $items, $title) </li></ul>
<ul><li>theme(' node ', $node, $teaser, $page) </li></ul>
<ul><li>theme(' node ', $node, $teaser, $page) </li></ul><ul><li>' template ' => ' node ' </li></ul>
<ul><li>theme(' node ', $node, $teaser, $page) </li></ul><ul><li>node.tpl.php </li></ul>
theme(' node ', $node, $teaser, $page)
theme(' node ', $node, $teaser, $page)
theme(' node ', $node, $teaser, $page) node-story.tpl.php
theme(' node ', $node, $teaser, $page) node.tpl.php
drupal.org/node/173880
Let Drupal know you've added or overridden a new theme hook with drupal_rebuild_theme_registry()
<ul><li>Allows you to create theme stacks </li></ul><ul><li>or a theme hierarchy </li></ul>
<ul><li>Subthemes inherit from parent themes: </li></ul>
<ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul>
<ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul>
<ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li...
<ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li...
<ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li...
<ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li...
<ul><li>Benefits of subtheming </li></ul>
<ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul>
<ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop theme...
<ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop theme...
<ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop theme...
<ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop theme...
<ul><li>In the .info file: </li></ul><ul><li>Daisy chain your themes and let the inheritance begin </li></ul>base theme = ...
<ul><li>.info file </li></ul>
<ul><li>global $theme_info </li></ul>
<ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul>
<ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </l...
<ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </l...
<ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </l...
<ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </l...
<ul><li>global $theme_key </li></ul>
<ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul>
<ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul><ul><li>(i.e. key in the  list_themes()  a...
<ul><li>global $theme_path </li></ul><ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul><ul><...
<ul><li>global $theme_path </li></ul><ul><li>Path to the current theme </li></ul><ul><li>global $theme_key </li></ul><ul><...
<ul><li>Universally theming forms </li></ul>
<ul><li>Universally theming forms </li></ul><ul><li>All form-related theme functions are in </li></ul><ul><li>includes/for...
<ul><li>Theming specific forms </li></ul><ul><li>Universally theming forms </li></ul><ul><li>All form-related theme functi...
<ul><li>Theming specific forms </li></ul><ul><li>Inject markup into forms using the </li></ul><ul><li>Form API </li></ul><...
<ul><li>function example_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>'user_login' => array( </li></ul><ul>...
<ul><li>function example_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>' user_login ' => array( </li></ul><u...
<ul><li><input type=&quot;hidden&quot; name=&quot;form_id&quot; id=&quot;edit-user-login&quot; value=&quot; user_login &qu...
<ul><li>function example_user_login($form) { </li></ul><ul><li>// Change the form array here </li></ul><ul><li>return drup...
<ul><li>Add markup around elements </li></ul><ul><li>#prefix </li></ul><ul><li>#suffix </li></ul>
<ul><li>Add markup around elements </li></ul><ul><li>#prefix </li></ul><ul><li>#suffix </li></ul><ul><li>Add or change ele...
<ul><li>api.drupal.org </li></ul><ul><li>Themer developer module (part of Devel) </li></ul><ul><li>Drupal 6 JavaScript and...
Upcoming SlideShare
Loading in...5
×

Power Theming

632

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
632
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Power Theming

  1. 2. is.gd/3mGND
  2. 4. Where Drupal gets its markup
  3. 5. How to change the markup Where Drupal gets its markup
  4. 6. How to change the markup Working with subthemes Where Drupal gets its markup
  5. 7. How to change the markup Working with subthemes Theming forms Where Drupal gets its markup
  6. 8. Color module Theme settings Javascript
  7. 10. Theme hooks
  8. 11. Theme hooks Names or IDs that Drupal uses to call themeable output
  9. 12. Theme hooks Names or IDs that Drupal uses to call themeable output *The* theme function
  10. 13. Theme hooks Names or IDs that Drupal uses to call themeable output *The* theme function Calls themeable output using theme hooks
  11. 14. theme('hook', $arg1, $arg2)
  12. 15. Theme registry Stores the &quot;sequence of events&quot; that happens when a theme hook is called theme('hook', $arg1, $arg2)
  13. 16. Defined by implementations of hook_theme()
  14. 17. <ul><li>function node_theme () { </li></ul><ul><li>return array( </li></ul><ul><li>'node' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'node' => NULL, </li></ul><ul><li>'teaser' => FALSE, </li></ul><ul><li>'page' => FALSE), </li></ul><ul><li>'template' => 'node'), </li></ul><ul><li>'node_list' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'items' => NULL, </li></ul><ul><li>'title' => NULL))); </li></ul><ul><li>} </li></ul>
  15. 18. <ul><li>function node_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>' node ' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'node' => NULL, </li></ul><ul><li>'teaser' => FALSE, </li></ul><ul><li>'page' => FALSE), </li></ul><ul><li>'template' => 'node'), </li></ul><ul><li>' node_list ' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'items' => NULL, </li></ul><ul><li>'title' => NULL))); </li></ul><ul><li>} </li></ul>theme hooks
  16. 19. <ul><li>function node_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>' node ' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'node' => NULL, </li></ul><ul><li>'teaser' => FALSE, </li></ul><ul><li>'page' => FALSE), </li></ul><ul><li>' template ' => ' node '), </li></ul><ul><li>'node_list' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'items' => NULL, </li></ul><ul><li>'title' => NULL))); </li></ul><ul><li>} </li></ul>this one uses a template file called node .tpl.php
  17. 20. <ul><li>function node_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>'node' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'node' => NULL, </li></ul><ul><li>'teaser' => FALSE, </li></ul><ul><li>'page' => FALSE), </li></ul><ul><li>'template' => 'node'), </li></ul><ul><li>' node_list ' => array( </li></ul><ul><li>'arguments' => array( </li></ul><ul><li>'items' => NULL, </li></ul><ul><li>'title' => NULL))); </li></ul><ul><li>} </li></ul>this one is a function
  18. 22. <ul><li>theme(' node_list ', $items, $title) </li></ul>
  19. 23. <ul><li>theme(' node_list ', $items, $title) </li></ul>
  20. 24. <ul><li>theme(' node_list ', $items, $title) </li></ul>
  21. 25. <ul><li>theme(' node_list ', $items, $title) </li></ul>
  22. 26. <ul><li>theme(' node_list ', $items, $title) </li></ul>
  23. 27. <ul><li>theme(' node ', $node, $teaser, $page) </li></ul>
  24. 28. <ul><li>theme(' node ', $node, $teaser, $page) </li></ul><ul><li>' template ' => ' node ' </li></ul>
  25. 29. <ul><li>theme(' node ', $node, $teaser, $page) </li></ul><ul><li>node.tpl.php </li></ul>
  26. 30. theme(' node ', $node, $teaser, $page)
  27. 31. theme(' node ', $node, $teaser, $page)
  28. 32. theme(' node ', $node, $teaser, $page) node-story.tpl.php
  29. 33. theme(' node ', $node, $teaser, $page) node.tpl.php
  30. 34. drupal.org/node/173880
  31. 35. Let Drupal know you've added or overridden a new theme hook with drupal_rebuild_theme_registry()
  32. 36. <ul><li>Allows you to create theme stacks </li></ul><ul><li>or a theme hierarchy </li></ul>
  33. 37. <ul><li>Subthemes inherit from parent themes: </li></ul>
  34. 38. <ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul>
  35. 39. <ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul>
  36. 40. <ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li>Theme functions/overrides </li></ul>
  37. 41. <ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li>Theme functions/overrides </li></ul><ul><li>Theme templates </li></ul>
  38. 42. <ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li>Theme functions/overrides </li></ul><ul><li>Theme templates </li></ul><ul><li>Preprocessors </li></ul>
  39. 43. <ul><li>Subthemes inherit from parent themes: </li></ul><ul><li>Stylesheets </li></ul><ul><li>Javascript </li></ul><ul><li>Theme functions/overrides </li></ul><ul><li>Theme templates </li></ul><ul><li>Preprocessors </li></ul><ul><li>Subthemes do *not* inherit regions </li></ul>
  40. 44. <ul><li>Benefits of subtheming </li></ul>
  41. 45. <ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul>
  42. 46. <ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop themes quicker </li></ul>
  43. 47. <ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop themes quicker </li></ul><ul><li>Content separate from &quot;skin&quot; </li></ul>
  44. 48. <ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop themes quicker </li></ul><ul><li>Content separate from &quot;skin&quot; </li></ul><ul><li>Multisite themes can share a base theme </li></ul>
  45. 49. <ul><li>Benefits of subtheming </li></ul><ul><li>Eliminate redundant coding for every site </li></ul><ul><li>Develop themes quicker </li></ul><ul><li>Content separate from &quot;skin&quot; </li></ul><ul><li>Multisite themes can share a base theme </li></ul><ul><li>Can make modular theme &quot;pieces&quot; </li></ul>
  46. 50. <ul><li>In the .info file: </li></ul><ul><li>Daisy chain your themes and let the inheritance begin </li></ul>base theme = name
  47. 51. <ul><li>.info file </li></ul>
  48. 52. <ul><li>global $theme_info </li></ul>
  49. 53. <ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul>
  50. 54. <ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </li></ul>
  51. 55. <ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </li></ul><ul><li>Properties of the base theme </li></ul>
  52. 56. <ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </li></ul><ul><li>Properties of the base theme </li></ul><ul><li>list_themes() </li></ul>
  53. 57. <ul><li>global $theme_info </li></ul><ul><li>Properties of the current theme </li></ul><ul><li>global $base_theme_info </li></ul><ul><li>Properties of the base theme </li></ul><ul><li>list_themes() </li></ul><ul><li>Properties of all themes </li></ul>
  54. 58. <ul><li>global $theme_key </li></ul>
  55. 59. <ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul>
  56. 60. <ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul><ul><li>(i.e. key in the list_themes() array) </li></ul>
  57. 61. <ul><li>global $theme_path </li></ul><ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul><ul><li>(i.e. key in the list_themes() array) </li></ul>
  58. 62. <ul><li>global $theme_path </li></ul><ul><li>Path to the current theme </li></ul><ul><li>global $theme_key </li></ul><ul><li>Name of the current theme </li></ul><ul><li>(i.e. key in the list_themes() array) </li></ul>
  59. 63. <ul><li>Universally theming forms </li></ul>
  60. 64. <ul><li>Universally theming forms </li></ul><ul><li>All form-related theme functions are in </li></ul><ul><li>includes/form.inc </li></ul>
  61. 65. <ul><li>Theming specific forms </li></ul><ul><li>Universally theming forms </li></ul><ul><li>All form-related theme functions are in </li></ul><ul><li>includes/form.inc </li></ul>
  62. 66. <ul><li>Theming specific forms </li></ul><ul><li>Inject markup into forms using the </li></ul><ul><li>Form API </li></ul><ul><li>Universally theming forms </li></ul><ul><li>All form-related theme functions are in </li></ul><ul><li>includes/form.inc </li></ul>
  63. 67. <ul><li>function example_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>'user_login' => array( </li></ul><ul><li>'arguments' => array('form' => NULL), </li></ul><ul><li>), </li></ul><ul><li>); </li></ul><ul><li>} </li></ul><ul><li>Implement hook_theme() </li></ul>
  64. 68. <ul><li>function example_theme() { </li></ul><ul><li>return array( </li></ul><ul><li>' user_login ' => array( </li></ul><ul><li>'arguments' => array('form' => NULL), </li></ul><ul><li>), </li></ul><ul><li>); </li></ul><ul><li>} </li></ul><ul><li>Implement hook_theme() </li></ul>
  65. 69. <ul><li><input type=&quot;hidden&quot; name=&quot;form_id&quot; id=&quot;edit-user-login&quot; value=&quot; user_login &quot; /> </li></ul><ul><li>Get the form_id </li></ul>
  66. 70. <ul><li>function example_user_login($form) { </li></ul><ul><li>// Change the form array here </li></ul><ul><li>return drupal_render($form); </li></ul><ul><li>} </li></ul><ul><li>Create theme function </li></ul>
  67. 71. <ul><li>Add markup around elements </li></ul><ul><li>#prefix </li></ul><ul><li>#suffix </li></ul>
  68. 72. <ul><li>Add markup around elements </li></ul><ul><li>#prefix </li></ul><ul><li>#suffix </li></ul><ul><li>Add or change element's attributes </li></ul><ul><li>#attributes </li></ul>
  69. 73. <ul><li>api.drupal.org </li></ul><ul><li>Themer developer module (part of Devel) </li></ul><ul><li>Drupal 6 JavaScript and jQuery </li></ul><ul><li>by Matt Butcher </li></ul><ul><li>The Internet </li></ul>
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×