The document outlines how to convert an existing semantic design into a Drupal theme while maintaining the original design structure and semantics. It discusses defining meaningful regions and block classes, preloading CSS images, renaming blocks, and re-theming the menu and definition list functions to display the navigation as intended in the original design. The goal is to respect the original design and minimize changes to the HTML, CSS, and naming structures.

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

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

3. 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”)

11. 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.

13. header left content right

14. 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

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

16. 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'), ); }

17. CSS image preloading Move to phptemplate_variables()

18. 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”

19. Block renaming...

20. 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

21. 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!