Download - Nanocon Taiwan
![Page 1: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/1.jpg)
Drupal 6 ThemingJohn Albin Wilkins
Drupal.org : JohnAlbin Twitter.com : @johnalbin
![Page 2: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/2.jpg)
Designing for Drupal
! Overview of theDrupal Theming Layer
! Implementation Details
! Templates
! Preprocessors
! Base Themes
! Where to go for help
![Page 3: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/3.jpg)
Theming Example
![Page 4: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/4.jpg)
Theming Example
![Page 5: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/5.jpg)
More Zen Examples
![Page 6: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/6.jpg)
More Zen Examples
![Page 7: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/7.jpg)
More Zen Examples
![Page 8: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/8.jpg)
Drupal Design
![Page 9: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/9.jpg)
Drupal Design<?php print "with some PHP" ?>
![Page 10: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/10.jpg)
Drupal’s Theme Layer(the big picture)
![Page 11: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/11.jpg)
Example Theme
![Page 12: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/12.jpg)
Structure of page.tpl.php
![Page 13: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/13.jpg)
Structure of page.tpl.php
content
Search box .
CSS style sheets
TitleConditional Info
![Page 14: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/14.jpg)
Where do page.tpl.php variables come from?
![Page 15: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/15.jpg)
What do you need to know?
• Your theme doesn’t needall the templates
• You don’t need to learnall the variables
• Let Drupal’s architecture build parts of your theme
![Page 16: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/16.jpg)
Copy, Override, Modify
Templates and CSS are pulled from lower layers.
Unless they are overridden in your theme.
![Page 17: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/17.jpg)
modify variables using a function:[theme name]_preprocess_[hook]
e.g. example_preprocess_page
Preprocess Functions
![Page 18: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/18.jpg)
modify variables using a function:[theme name]_preprocess_[hook]
e.g. example_preprocess_page
Preprocess Functions
Put preprocess functions in your theme’s template.php
Page Variablemodifications
Node VariableAdditions
![Page 19: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/19.jpg)
What was the part in the middle?
http://drupal.org/theme-guide
![Page 20: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/20.jpg)
Base ThemesPowerful Frameworks for
Beginners and Power Users
![Page 21: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/21.jpg)
Benefits of Base Themes
• You don’t have to build everything yourself. Copy, override, and modify only what you need to.
• Bug fixes.Others can fix any bugs in the base theme.
• New features.For contrib Themes, there will occasionally be new features.
• Support.If you have modified an existing theme, sometimes the only answer you will get to your support question is “Well, it works fine in the original theme.”
• Rapid Theme Development.Many things are built for you.
![Page 23: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/23.jpg)
• Designed for beginners and Theming ninjas.
• Extensive on-line documentation.
• Step-by-step instructions on building your own sub-theme.
• Extensive in-line comments in its PHP and CSS files.
Why use Zen?
![Page 24: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/24.jpg)
• Designed for beginners and Theming ninjas.
• Extensive on-line documentation.
• Step-by-step instructions on building your own sub-theme.
• Extensive in-line comments in its PHP and CSS files.
Why use Zen?
![Page 25: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/25.jpg)
• Designed for beginners and Theming ninjas.
• Extensive on-line documentation.
• Step-by-step instructions on building your own sub-theme.
• Extensive in-line comments in its PHP and CSS files.
Why use Zen?
• It’s also got a laundry list of features. (which are exciting to use, but boring to list.)
• A fantastically flexible CSS Layout method(that even works with IE5.5.)
• The developer lives in Taiwan.
![Page 26: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/26.jpg)
Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without mind-bending contortions.
• Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout method: YUI, YAML, Jello Mold, Holy Grail, etc.
![Page 27: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/27.jpg)
Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without mind-bending contortions.
• Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout method: YUI, YAML, Jello Mold, Holy Grail, etc.
![Page 28: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/28.jpg)
Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without mind-bending contortions.
• Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout method: YUI, YAML, Jello Mold, Holy Grail, etc.
![Page 29: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/29.jpg)
( These blocks have float: left; )
Negative Margins(and positive results)
![Page 30: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/30.jpg)
( These blocks have float: left; )
Negative Margins(and positive results)
![Page 31: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/31.jpg)
( These blocks have float: left; )
Negative Margins(and positive results)
![Page 32: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/32.jpg)
( These blocks have float: left; )
Negative Margins(and positive results)
![Page 33: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/33.jpg)
( These blocks have float: left; )
Negative Margins(and positive results)
![Page 34: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/34.jpg)
( These blocks have float: left; )
Negative Margins(and positive results)
![Page 35: Nanocon Taiwan](https://reader033.vdocument.in/reader033/viewer/2022052322/557e9f1cd8b42ac5658b46a1/html5/thumbnails/35.jpg)
Getting Helphttp://drupal.org/theme-guidehttp://drupal.org/project/zenhttp://drupal.org/irc
#drupal-themes#drupal-support#drupal
Ask Questions!