drupal theme development - acko.net wittens, brussels, february 26th drupal theme development steven...
TRANSCRIPT
![Page 1: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/1.jpg)
Steven Wittens, Brussels, February 26th
Drupal Theme Development
Steven Wittens
February 26th, 2005FOSDEM, Brussels
![Page 2: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/2.jpg)
Steven Wittens, Brussels, February 26th
What I'll be talking about
● Overview of Drupal's theme system● Making the FriendsElectric theme● Clean, semantic XHTML/CSS with Drupal● Examples of sexy Drupal sites
![Page 3: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/3.jpg)
Steven Wittens, Brussels, February 26th
How Drupal outputs HTML
● The content is fetched and output through themable functions ('push' model).
● Each themable function outputs the HTML for one item on the page (node, block, comment, item list, menu, ...)
● Each themable function can be overridden by the theme.
![Page 4: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/4.jpg)
Steven Wittens, Brussels, February 26th
Example themable function: block
● Ranges from simple HTML + PHP placeholders to more complicated logic.
● Note: semantic HTML and useful CSS IDs and classes
![Page 5: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/5.jpg)
Steven Wittens, Brussels, February 26th
Middle layer: theme engines
● Coding a theme in PHP directly is impractical● A theme engine acts as a middle layer between
Drupal and a theme consisting of loose templates.● XTemplate: simple, single-template themes with
only begin/end markers in HTML comments.● PHPTemplate: several HTML/PHP files for
templates. Best of both worlds: easy to edit, but powerful in abilities.
● Others: PHPTal, Smarty, ...
![Page 6: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/6.jpg)
Steven Wittens, Brussels, February 26th
Styling with CSS
● Every theme normally has its own stylesheet● You can create new themes by building an
alternate stylesheet for an existing template/theme.
● Drupal combines the HTML of the original template with the new CSS.
● This is made available as a separate selectable theme (with its own settings, links, screenshot).
![Page 7: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/7.jpg)
Steven Wittens, Brussels, February 26th
In practice
![Page 8: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/8.jpg)
Steven Wittens, Brussels, February 26th
Directory structure
![Page 9: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/9.jpg)
Steven Wittens, Brussels, February 26th
Standard theme settings
● Toggle various page elements on/off
● Customize logo
● Set navigation links
![Page 10: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/10.jpg)
Steven Wittens, Brussels, February 26th
Making the FriendsElectric theme● PHPTemplate-based● Tableless XHTML/CSS● Supports 1-3 columns● Supports theme options (logo, slogan, search box,
navigation links, ...)
![Page 11: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/11.jpg)
Steven Wittens, Brussels, February 26th
Starting from a design/mockupA lot of design choices still to be made (columns, footer,comments, forms, ...)
![Page 12: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/12.jpg)
Steven Wittens, Brussels, February 26th
Build a skeleton page template● Make a page.tpl.php containing a skeleton
HTML document● Focus on layout first: CSS positioning
(google for a good layout template to start from)
![Page 13: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/13.jpg)
Steven Wittens, Brussels, February 26th
Add more templates for specific items● Theming a node: node.tpl.php
![Page 14: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/14.jpg)
Steven Wittens, Brussels, February 26th
FriendsElectric Layout
![Page 15: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/15.jpg)
Steven Wittens, Brussels, February 26th
Dynamic CSS classes
● Problem: A theme can have a sidebar on either side, or both at the same time.
● Requires 4 different positioning scenarios (so empty sidebars don't take up space)
● CSS class name changes depending on $layout: 'content-none', 'content-left', 'content-both', 'content-right'.
![Page 16: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/16.jpg)
Steven Wittens, Brussels, February 26th
Overriding specifics
● PHPTemplate offers a minimal set of base templates: page, node, comment, block.
● To override a themable function not in this list, you need to provide a template wrapper:
● This wrapper will run the template item_list.tpl.php
![Page 17: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/17.jpg)
Steven Wittens, Brussels, February 26th
Putting it all together
![Page 18: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/18.jpg)
Steven Wittens, Brussels, February 26th
Many things to theme
![Page 19: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/19.jpg)
Steven Wittens, Brussels, February 26th
![Page 20: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/20.jpg)
Steven Wittens, Brussels, February 26th
Clean XHTML/CSS
● Yes, but with some caveats:● Most CSS work today is being made for static /
blog-like sites. Drupal's content has fieldsets, tables, pre, ...
● Most theme functions output semantic XHTML: on-going work to clean up the themable functions.
● Rich styling: many CSS classes and IDs to style specific parts of the page.
![Page 21: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/21.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
● Pop-quiz:Are the following sites Drupal-based or not?
![Page 22: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/22.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
![Page 23: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/23.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
![Page 24: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/24.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
![Page 25: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/25.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
![Page 26: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/26.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
![Page 27: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/27.jpg)
Steven Wittens, Brussels, February 26th
Drupal or not?
![Page 28: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/28.jpg)
Steven Wittens, Brussels, February 26th
Conclusion
● Sexy Drupal sites are already here
● Drupal themes are flexible and powerful
● Caters to various skill sets with CSS-only or templated themes
● Accessible to designers
![Page 29: Drupal Theme Development - Acko.net Wittens, Brussels, February 26th Drupal Theme Development Steven Wittens February 26th, 2005 FOSDEM, Brussels](https://reader031.vdocuments.site/reader031/viewer/2022021822/5b1872ad7f8b9a32258bc3ee/html5/thumbnails/29.jpg)
Steven Wittens, Brussels, February 26th
More?
● Theme showcase: Drupal Theme Garden (Bèr Kessels)http://webschuur.drupaldevs.org/
● This presentation:http://www.acko.net/drupalcon
● Any questions?