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

Semantic (Meaningful) Design

Important content at top

Elements are what they mean

= bold (visual) = strongly spoken (meaning)Tables are for data, not for presentation.Areas (eg. ) are named according to content (id=subnavigation), not presentation (id=sidebar-left)ExampleDesign used for Lonely Planet prototype projectDesign by http://peptolab.comGreat semantic designImportant to prove that Drupal 5 can incorporate this design. headerleftcontentright79 684 5213 Content Sidebar Subnavigation Utilities links Utilities related Navigation Logo Footer Advertisement-bannerHeaderContentSidebar leftSidebar rightFooterRespect the designKeep HTML structureMinimal changes to style sheetKeep meaningful (semantic) namingDefine regionsfunction 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 preloadingMove to phptemplate_variables()Alternative block classes/idsIn order to minimize changes to the CSS, and to having meaningful divs, instead of: id=block-view-11We need: id=widget-relatedBlock renaming...Navigation as Re-themed theme_menu_tree() for menu id 2Re-themed theme_definition_list() to show menu item idsModified style sheet with menu idsSummaryThe hard work is in the CSS/HTMLDon't modify an existing theme if you've been provided HTML/CSSKeep logic and fudge in template.phpRespect the designThanks!