1. Drupal Theming 101

2. Drupal theming 101 About Exove and myself What is Drupal theming? Drupal theming in 5 steps What comes after the basics? Drupal themers – taking charge

3. About Exove Exove is a technology company that specialises in designing and implementing integrated web applications and services. We build and deploy web solutions that are based on our customer’s strategy and needs.

4. About Ben Goodyear Front-end web developer (html, css, js, all the usual) Used to working on projects of all types and sizes, equally happy being part of a front end team down to leading projects myself My Drupal background And yes, I’m from the UK!

5. Why Drupal? Why not!

6. Why not! What is Drupal Theming? Myth busting: common theming misconceptions What is/makes a Drupal themer? Easy peasy: creating a Drupal theme in 5 steps

7. What is Drupal theming Designing the appearance of a site (Photoshop/Illustrator) Using CSS to implement this layout Changing the HTML output from Drupal to better suit our needs.

8. Myth: it’s hard! Myth busting: common theming misconceptions Lack of standard basic themes Default install can seem overwhelming Successful themer skill set is different from the norm

9. What makes a Drupal themer? Web desinger / front end dev Drupal themer Web desinger / front end dev + Understanding of drupal Ability to ‘code’

10. Easy peasy: a theme in 5 steps Fresh Drupal installation Installed following modules: Devel - the developers toolbox Theme developer - the themers best friend Admin menus – workflow streamliner

11. In the real world... It’s quite often the case to be provided with a design already built in HTML/CSS. ( Of course it’s not the only situation, but will serve the purpose for this demo) So, for this example I’m going to take a prebuilt template and create a theme from that.

12. Give your theme a home Hey, there’s some themes here! Create a themes folder in drupal_root/sites/all Put your themes in there, allows for easy upgrade- all your templates and themes are easily locatable (along with modules) Put your html/css/images in this folder 1 1

13. Create an info file Lets Drupal know you’ve created your own theme name = Simple description = A demo theme based on a template from styleshout.com core = 6.x engine = phptemplate 2 1

14. Create your first template Your index.html file is a perfect candidate to be your page template Original page.tpl.php live under the system module 3 1

15. And another one Overriding individual nodes. 4 1

16. What about all the rest? We’ve taken care of our ‘main’ content area, now how to I deal with all these other areas? Look at the template and identify different regions. These regions can then be defined in Drupal and have blocks of content assigned to them. 5 1

17. All done! 1

18. More “advanced” theming This showed how we can take a standard Drupal install and quite quickly change how it looks. For a more complicated site we might have varying kinds of content type and the need to display that content in different ways. So, we turn to modules such as CCK and views. 1

19. Can Drupal themers build entire sites? Yes! Even using a limited set of modules, a themer can easily create mid sized websites without the need of a dedicated back-end team, after all that’s already been supplied by the Drupal community at large. 1

20. Recap Drupal theming is not as hard as it seems at first Creating a basic theme from a pre built html template is straight forward Drupal themers in fact have a large amount of control over how the site works It’s possible for themers to go past simply creating a Drupal theme, heading more towards building larger sites as the tools exist 1

21. Drupal Theming 101 Questions? Comments?