Melbourne Mini-Conf Feb 3 Drupal Semantic Theming Simon Hobbs emspace.com.au

Outline Features of semantic design Example design Converting a design to Drupal

Features of semantic design

Example design

Converting a design to Drupal

Semantic (Meaningful) Design Important content at top Elements are what they mean <b> = bold (visual) <strong> = strongly spoken (meaning) Tables are for data, not for presentation. Areas (eg. <div>) are named according to content (id=”subnavigation”), not presentation (id=”sidebar-left”)

Important content at top

Elements are what they mean

<b> = bold (visual)

<strong> = strongly spoken (meaning)

Tables are for data, not for presentation.

Areas (eg. <div>) are named according to content (id=”subnavigation”), not presentation (id=”sidebar-left”)

Example Design used for Lonely Planet prototype project Design by http://peptolab.com Great semantic design Important to prove that Drupal 5 can incorporate this design.

Design used for Lonely Planet prototype project

Design by http://peptolab.com

Great semantic design

Important to prove that Drupal 5 can incorporate this design.

header left content right

Content Sidebar Subnavigation Utilities – links Utilities – related Navigation Logo Footer Advertisement-banner Header Content Sidebar – left Sidebar – right Footer 7 9 6 8 4 5 2 1 3

Content

Sidebar

Subnavigation

Utilities – links

Utilities – related

Navigation

Logo

Footer

Advertisement-banner

Respect the design Keep HTML structure Minimal changes to style sheet Keep meaningful (semantic) naming

Keep HTML structure

Minimal changes to style sheet

Keep meaningful (semantic) naming

Define regions function lp_regions() { return array( 'content' => t('Content - center'), 'subnavigation' => t('Subnavigation - left sidebar'), 'navigation' => t('Navigation - top of page'), 'utilities' => t('Utilities - below navigation'), 'footer' => t('Footer'), 'sidebar' => t('Sidebar - right sidebar'), 'logo_area' => t('Logo - top left'), ); }

function lp_regions() {

return array(

'content' => t('Content - center'),

'subnavigation' => t('Subnavigation - left sidebar'),

'navigation' => t('Navigation - top of page'),

'utilities' => t('Utilities - below navigation'),

'footer' => t('Footer'),

'sidebar' => t('Sidebar - right sidebar'),

'logo_area' => t('Logo - top left'),

);

}

CSS image preloading Move to phptemplate_variables()

Alternative block classes/ids In order to minimize changes to the CSS, and to having meaningful divs, instead of: id=”block-view-11” We need: id=”widget-related”

In order to minimize changes to the CSS, and to having meaningful divs, instead of:

id=”block-view-11”

We need:

id=”widget-related”

Block renaming...

Navigation <ul> as <dl> Re-themed theme_menu_tree() for menu id 2 Re-themed theme_definition_list() to show menu item ids Modified style sheet with menu ids

Re-themed theme_menu_tree() for menu id 2

Re-themed theme_definition_list() to show menu item ids

Modified style sheet with menu ids

Summary The hard work is in the CSS/HTML Don't modify an existing theme if you've been provided HTML/CSS Keep logic and fudge in template.php Respect the design Thanks!

The hard work is in the CSS/HTML

Don't modify an existing theme if you've been provided HTML/CSS

Keep logic and fudge in template.php

Respect the design

Thanks!