Advanced theming

644 views

Published on

Slides from Advanced Theming session at DrupalCamp Atlanta, 2012

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

  • Be the first to like this

No Downloads
Views
Total views
644
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Advanced theming

    1. 1. Advanced Theming Digging deeper into Drupal’s presentation layerhttp://knowclassic.com
    2. 2. Who am I? • Thomas Lattimore, often know as @tlattimore • Front-End Developer for Classic Graphics • Drupal enthusiast! • See what I do: drupal.org/user/624754http://knowclassic.com
    3. 3. This Session• Assumes you have understanding of Drupal theming • The basic anatomy of a theme including .info, template.php, .tpls, & how sub-theming works.• ... and you can write own CSS/HTML with some understanding of PHP• You want to do more than Drupals default output • This can include markup, attributes, or data formatting
    4. 4. What is ‘advanced’ theming?
    5. 5. Overrides! What Drupal theming is made of• CSS• .tpl.php• Function(s) - in template.php
    6. 6. Which method do I use?
    7. 7. Which method do I use?
    8. 8. Which method do I use?
    9. 9. Which method do I use? Answer:
    10. 10. Which method do I use? It depends on your process Answer: and need
    11. 11. Use CSS
    12. 12. Use CSS• If the markup (elements, classes, ids, etc) are already in place.
    13. 13. Use CSS• If the markup (elements, classes, ids, etc) are already in place.
    14. 14. Use CSS• If the markup (elements, classes, ids, etc) are already in place.
    15. 15. Use CSS• If the markup (elements, classes, ids, etc) are already in place.
    16. 16. Use CSS• If the markup (elements, classes, ids, etc) are already in place.
    17. 17. Use CSS• If the markup (elements, classes, ids, etc) are already in place.
    18. 18. Use CSS• If the markup (elements, classes, ids, etc) are already in place.• For better or for worse,Drupal has LOTS of selectorsUse them!
    19. 19. Tpl Override• If the markup and or attribute you want to override is already in a .tpl file• Template suggestion doc page: http://drupal.org/node/1089656
    20. 20. Function Overrides
    21. 21. Function Overrides• You need to actually dig into the data (stuff inside the $vars) before it hits the .tpl file, these functions go in template.php
    22. 22. Function Overrides• You need to actually dig into the data (stuff inside the $vars) before it hits the .tpl file, these functions go in template.php• This includes (but is not exclusive to):
    23. 23. Function Overrides• You need to actually dig into the data (stuff inside the $vars) before it hits the .tpl file, these functions go in template.php• This includes (but is not exclusive to): • hook_*_alter()
    24. 24. Function Overrides• You need to actually dig into the data (stuff inside the $vars) before it hits the .tpl file, these functions go in template.php• This includes (but is not exclusive to): • hook_*_alter() • template_preprocess()
    25. 25. Function Overrides• You need to actually dig into the data (stuff inside the $vars) before it hits the .tpl file, these functions go in template.php• This includes (but is not exclusive to): • hook_*_alter() • template_preprocess() • theme_hook()
    26. 26. Function Overrides
    27. 27. Function OverridesThis is where things really get fun! (and largely what we’ll cover today)
    28. 28. Common alter hooks• hook_page_alter() • A HUGE array of all the regions on the page• hook_form_alter() • Alter all sorts of form goodies• hook_css_alter() • Move around the order in which css is printed
    29. 29. template_preprocess()
    30. 30. template_preprocess()• Includes: template_preprocess(), template_preprocess_page(), template_preprocess_node(), and more...• template_preprocess() • Add and modify variables before they hit there corresponding .tpl • Add tpl suggestions via ‘theme_hook_suggestions’ array
    31. 31. template_preprocess() • Includes: template_preprocess(), template_preprocess_page(), template_preprocess_node(), and more... • template_preprocess() • Add and modify variables before they hit there corresponding .tpl • Add tpl suggestions via ‘theme_hook_suggestions’ arrayBasically, generates the themable output
    32. 32. Today we are....• Sub-theming bartik (for simplicities sake)• Using devel + devel_themer
    33. 33. Enough talk! Lets code

    ×