Semantic Theming with Drupal 5
-
Upload
ryan-cross -
Category
Business
-
view
1.144 -
download
1
Transcript of Semantic Theming with Drupal 5
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!