Upload
chris-albrecht
View
441
Download
3
Tags:
Embed Size (px)
Citation preview
Theming DrupalBeyond the Look and Feel
Chris AlbrechtDrupal Developer
National Renewable Energy Lab Since Drupal 6.20 (2 years, 3 months)
Living DrupalSince Drupal 5.2 (5 years, 7 months)
Contributed modules, developed themes, managed projects, configured servers, …
Getting Started New to Drupal
Three basic templates
Flat HTML files
Strict enterprise standards
508 compliance
Need reusable themes
Built-in standards and structure
What Makes a Theme? Markup + CSS
Markup lives in template files and theme functions
Data is pushed in, final markup returned
In between are preprocessors and processors
MVC architecture Model = Modules Controller = (Pre)processors View = Themes/Templates
ModuleRetrieves datafrom database.
(Pre)processorApplies logic andmanipulates data.
TemplateRenders markupimplementing datawhere needed.
Building Out a Theme One theme to rule them all?
Build a flexible base theme
Start simple
Locate desired template file
Devel Themerhttp://drupal.org/project/devel_themer
Copy template to your theme and alter it
Use (pre)processors to manipulate the data
Template Patterns Look for double underscores
or double hyphens
Allows for fallback
Extends flexibility
Provides specific themable instances
Views uses these extensively
/** * Implementation of template_preprocess(). */function THEME_preprocess_page(&$vars) { // Add a printable template if (isset($_GET[‘print’])) { $vars[‘theme_hook_suggestions’][] = ‘page__printable’; }}
/** * Implementation of template_preprocess(). */function THEME_preprocess_page(&$vars) { // Alter the page data for node 100 if (in_array(‘page__node__100’, $vars[‘theme_hook_suggestions’])) { ... }}
/** * Implementation of template_preprocess(). */function THEME_preprocess(&$vars, $hook) {
}
function THEME_process(&$vars, $hook) {
}
/** * Implementation of template_preprocess(). */function THEME_preprocess_page(&$vars) { // Generate CSS classes relating to content if (!empty($vars[‘page’][‘topnav’])) { $vars[‘body_classes’][] = ‘topnav’; }}
template.php
Extend the processors
Add template suggestions
Adjust styles
Preprocessors vs Processors
Order of implementation
What gets processed?
(Pre)processing Data
/** * Implementation of template_preprocess(). */function THEME_preprocess_html(&$vars) { // Add the stylesheet for this color scheme. $color_scheme = theme_get_setting(‘color_scheme’); drupal_add_css(path_to_theme() . ‘/css/’ . $color_scheme . ‘.css’);}
name = My Themecore = 7.x
; Stylesheets
; Settingssettings[color_scheme] = greensettings[site_format] = program
$form[‘color_scheme’] = array( ‘#type’ => ‘radios’, ‘#title’ => t(‘Color Scheme’), ‘#options’ => array( ‘green’ => t(‘Green’), ‘blue’ => t(‘Blue’), ), ‘#default_value’ => theme_get_setting(‘color_scheme’),);
theme_settings.phphook_form_system_theme_settings_alter()
Defaults in .info file
Use theme settings in processors
Adding Theme Settings
Create Base Structure Use Features module
http://drupal.org/projects/features
Standard content types
Default views
Set regional templates Ex. Block titles in left sidebar are H3, in right are H4. block--left.tpl.php, block--right.tpl.php
Case Study – EERE Theme Theme settings
Color scheme Site format Include sitemap Base breadcrumbs
Menus Top navigation = Main Menu Left navigation = Secondary Menu Page-top links = Global Menu Page-bottom = Footer Menu
EERE News Feature News content type Default page and block views
EERE Events Feature Events content type Default page, block and calendar
views
Includes Panels layouts Printable template Standard 403 and 404 pages
Putting it All Together Download and enable the base theme
Download and enable the base module
Create sub-theme to extend/override base theme if necessary Add custom stylesheets for site specific areas Add (pre)processors Create custom templates to override existing ones
Sub-theme inherits all the base theme’s settings
Sub-theme functions always called after base themes
Summary Leverage preprocessors
Use well crafted template overrides
Keep logic out of templates
Give users control via theme settings
Use features to encapsulate stock functionality
Spin up a new site in less than a day
Questions?Chris Albrecht
NREL: [email protected]
Other: [email protected]
Twitter: @ChrisAlbrecht
D.o: http://drupal.org/user/176328
(KeyboardCowboy)