Overriding Themable Output in Drupal 7

1. Hong Kong Drupal User Group
(HKDUG)
Overriding Themable Output in Drupal 7
DrupalCamp Hong Kong
2014 June 14th

2. Edison Wong
● CEO, PantaRei Design
– hswong3i@pantarei-design.com
● Drupal developer & contributor
– https://drupal.org/user/33940
● HKDUG Co-founder
– https://groups.drupal.org/drupalhk
● Startup founder
– 2009 - PantaRei Design founded
– 2010 - YBHK applicant
– 2011 - ITF SERAP applicant
– 2011 - HKSTP Incu-Tech applicant

3. PantaRei Design
● Hong Kong based Free and Open Source Software (FOSS) service
provider
– Content Management System (CMS) with Drupal
– Cloud hosting with Amazon Web Services (AWS)
● Business Partnership
– 2012 - AWS Consulting Partner
– 2013 - Acquia Partner
– 2013 - Atlassian Experts
– 2014 - Rackspace Hosting Partner
● FOSS Contributor
– 2008 - Hong Kong Drupal User Group Co-founder
– 2012 - Drupal Services Provider

8. Outline
● What is Drupal Theme?
● Why Override Themable Output?
● How To Override Themable Output?

9. What is Drupal Theme?
● Can change the appearance of an entire site
● Change layouts, images or fonts
● Hide or display fields dependent on user role
● Dynamically respond to changes in the content
or to user input

14. Why Override Themable Output?
● Don't hack core!
● Modify HTML markup
– Change HTML the Drupal way
– Using PHP for theming
● Overriding CSS

15. How To Override Themable Output?
● Avoiding having to override at all
– Can you just change a setting?
– Can you accomplish your goal through CSS?
● Overriding theme functions
● Overriding a theme file
● Finding where the themable output is coming
from

16. Overriding theme functions
● Open your theme's template.php file in a plain
text editor
● Copy the theme or template function you found
into your template.php file
● Rename the function you copied in, e.g.
– From “function theme_xyz($a, $b, $c) {“
– To “function wonderful_xyz($a, $b, $c) {“

17. Overriding theme functions (cont.)
● https://api.drupal.org/api/drupal/includes!theme.inc/
● https://api.drupal.org/api/drupal/themes!garland!tem

18. Overriding a theme file
● Copy the theme file to your theme directory
● Modify the file so it does what you want it to do
● Upload the file to your web site, including the
new base theme file if necessary, into your
theme's directory
● Refresh the theme cache

19. Overriding a theme file (cont.)
● https://api.drupal.org/api/drupal/modules!node!node
● https://api.drupal.org/api/drupal/themes!garland!nod

20. Finding where the themable output
is coming from
● Finding the source
● Understand the system of overrides
● “Function” vs “Template”
● Using the “Theme developer” module

26. Q&A

27. References
● https://drupal.org/node/341628
● https://drupal.org/node/457740
● https://drupal.org/node/173880

28. I Need More Help!
● Read documents from Drupal Community
– https://drupal.org/documentation
● Join Hong Kong Drupal User Group
– Event organizing: http://www.meetup.com/drupalhk
– Technological discussion: https://groups.drupal.org/drupalhk
– Business connection:
http://www.linkedin.com/groups/?gid=6644792
– General sharing: https://www.facebook.com/groups/drupalhk
● Contact us for one (1) month free-trial support service
– http://pantarei-design.com/services/support/#support-service-plans

29. Thank You
● Please feel free to contact us:
– Unit 207, 2/F IC Development Centre, No.6 Science
Park West Avenue, Hong Kong Science Park,
Shatin, N.T.
– +852 3576 3812
– http://pantarei-design.com/
– sales@pantarei-design.com