atomicant drupal 6 theming
Post on 27-Jan-2015
116 Views
Preview:
DESCRIPTION
TRANSCRIPT
Drupal front-end
Marek Sotak
Hello
Marek SotakDeveloper, designer
co-founder of atomic ant ltd web design company based in London, Prague and Denmark, operates internationaly.
Creator of RootCandy admin theme
http://drupal.org/project/rootcandy
http://twitter.com/sotak
http://facebook.com/sotak
http://atomicant.co.uk
Theming – Drupal 6
● Theme = presentation layer – separated from logic– No need to touch the modules if we want to change
the output (markup)● PHPTemplate engine (Smarty, xtemplate, etc...)● Saving to sites/*/themes/my-theme
Theme anatomy
Page rendering – suggestions + preprocess
theme('hook', $arguments)
● theme_breadcrumb, schoolinafrica_links,...● Defined in hook_theme()
function search_theme() {
return array(
'search_theme_form' => array(
'arguments' => array('form' => NULL),
'template' => 'search-theme-form',
),
);
}
hook = function – suggestions
● themeName_hook($arguments)– schoolinafrica_breadcrumbs($arguments)
● engineName_hook($arguments)– phptemplate_hook($arguments)
● theme_hook($aguments)
hook = template – suggestions
● Convert $arguments $variables→● Search for render functions
(theme_render_template)● Search for the function that sets the template files
extension (.tpl.php)
● $variables are passed by reference
hook = template – suggestions
● template_preprocess● template_preprocess_hook● moduleName_preprocess● moduleName_preprocess_hook● engineName_engine_preprocess● engineName_engine_preprocess_hook
hook = template – suggestions
● engineName_preprocess● engineName_preprocess_hook● themeName_preprocess● themeName_preprocess_hook
● Collects suggestions● Find implemented suggestions
(drupal_discover_template)
hook = template – suggestions
● theme_render_template
● Put together .tpl.php
● suggestion.tpl.php
fallback to● hook.tpl.php
Sub-theming
● .info file with base theme defined is enough– base theme = ninesixty
● Sub-themes can share some of the files from base theme
– CSS, js, .tpl.php, overriden functions in template.php● They don't share
– theme-settings.php, logo, color, some of the settings specified in .info file
Sub-theming – how to
● Create new folder in the sites/*/themes folder, give it a name – eg. sites/all/themes/schoolinafrica
● Add .info file with basic valuesname, description,...
● Add “base theme = ninesixty” to .info file● DONE
Subtheming quick and dirty - http://drupal.org/node/441088
Useful tips
● DrupalContrib.org– http://drupalcontrib.org
● admin/settings/performance– CSS + js files optimization
● Base themes– Zen, Ninesixty, Genesis,...
http://drupal.org/project/Themes
Useful tips
● Themer module– http://drupal.org/project/devel_themer
● Firebug – firefox extension - http://getfirebug.com/
Links
● Theming handbook d.o - Drupal 6– http://drupal.org/theme-guide
● Drupal 6.x 7.x guide→– http://drupal.org/update/theme/6/7
● Mailing list– http://drupal.org/mailing-lists
● Theme garden - http://themegarden.org● IRC #drupal-themes
Q&A
Bye and thank you!
Marek SotakDeveloper, designer
co-founder of atomic ant ltd web design company based in London, Prague and Denmark, operates internationaly.
http://twitter.com/sotak
http://facebook.com/sotak
http://atomicant.co.uk
Credits
● Slide 4 by Medical Student on flickr● Slide 44 - http://web.mac.com/moistproduction/flash/index.html
● Slide 61 - http://www.flickr.com/photos/wolfy/2647354470/
● Website preview: http://letsbuildaschoolinafrica.org
top related