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