Melbourne Mini-Conf Feb 3 Drupal Semantic Theming Simon Hobbs emspace.com.au
Outline <ul><li>Features of semantic design </li></ul><ul><li>Example design </li></ul><ul><li>Converting a design to Drup...
Semantic (Meaningful) Design <ul><li>Important content at top </li></ul><ul><li>Elements are what they mean </li></ul><ul>...
 
 
 
 
 
 
 
Example <ul><li>Design used for Lonely Planet prototype project </li></ul><ul><li>Design by http://peptolab.com </li></ul>...
 
header left content right
<ul><li>Content </li></ul><ul><li>Sidebar </li></ul><ul><li>Subnavigation </li></ul><ul><li>Utilities – links </li></ul><u...
Respect the design <ul><li>Keep HTML structure </li></ul><ul><li>Minimal changes to style sheet </li></ul><ul><li>Keep mea...
Define regions <ul><li>function lp_regions() { </li></ul><ul><li>return array( </li></ul><ul><li>'content' => t('Content -...
CSS image preloading Move to  phptemplate_variables()
Alternative block classes/ids <ul><li>In order to minimize changes to the CSS, and to having meaningful divs, instead of: ...
Block renaming...
Navigation <ul> as <dl> <ul><li>Re-themed theme_menu_tree() for menu id 2 </li></ul><ul><li>Re-themed theme_definition_lis...
Summary <ul><li>The hard work is in the CSS/HTML </li></ul><ul><li>Don't modify an existing theme if you've been provided ...
Upcoming SlideShare
Loading in...5
×

Semantic Theming with Drupal 5

946

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
946
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantic Theming with Drupal 5

  1. 1. Melbourne Mini-Conf Feb 3 Drupal Semantic Theming Simon Hobbs emspace.com.au
  2. 2. Outline <ul><li>Features of semantic design </li></ul><ul><li>Example design </li></ul><ul><li>Converting a design to Drupal </li></ul>
  3. 3. Semantic (Meaningful) Design <ul><li>Important content at top </li></ul><ul><li>Elements are what they mean </li></ul><ul><ul><li><b> = bold (visual) </li></ul></ul><ul><ul><li><strong> = strongly spoken (meaning) </li></ul></ul><ul><ul><li>Tables are for data, not for presentation. </li></ul></ul><ul><li>Areas (eg. <div>) are named according to content (id=”subnavigation”), not presentation (id=”sidebar-left”) </li></ul>
  4. 11. Example <ul><li>Design used for Lonely Planet prototype project </li></ul><ul><li>Design by http://peptolab.com </li></ul><ul><li>Great semantic design </li></ul><ul><li>Important to prove that Drupal 5 can incorporate this design. </li></ul>
  5. 13. header left content right
  6. 14. <ul><li>Content </li></ul><ul><li>Sidebar </li></ul><ul><li>Subnavigation </li></ul><ul><li>Utilities – links </li></ul><ul><li>Utilities – related </li></ul><ul><li>Navigation </li></ul><ul><li>Logo </li></ul><ul><li>Footer </li></ul><ul><li>Advertisement-banner </li></ul>Header Content Sidebar – left Sidebar – right Footer 7 9 6 8 4 5 2 1 3
  7. 15. Respect the design <ul><li>Keep HTML structure </li></ul><ul><li>Minimal changes to style sheet </li></ul><ul><li>Keep meaningful (semantic) naming </li></ul>
  8. 16. Define regions <ul><li>function lp_regions() { </li></ul><ul><li>return array( </li></ul><ul><li>'content' => t('Content - center'), </li></ul><ul><li>'subnavigation' => t('Subnavigation - left sidebar'), </li></ul><ul><li>'navigation' => t('Navigation - top of page'), </li></ul><ul><li>'utilities' => t('Utilities - below navigation'), </li></ul><ul><li>'footer' => t('Footer'), </li></ul><ul><li>'sidebar' => t('Sidebar - right sidebar'), </li></ul><ul><li>'logo_area' => t('Logo - top left'), </li></ul><ul><li>); </li></ul><ul><li>} </li></ul>
  9. 17. CSS image preloading Move to phptemplate_variables()
  10. 18. Alternative block classes/ids <ul><li>In order to minimize changes to the CSS, and to having meaningful divs, instead of: </li></ul><ul><ul><li>id=”block-view-11” </li></ul></ul><ul><li>We need: </li></ul><ul><ul><li>id=”widget-related” </li></ul></ul>
  11. 19. Block renaming...
  12. 20. Navigation <ul> as <dl> <ul><li>Re-themed theme_menu_tree() for menu id 2 </li></ul><ul><li>Re-themed theme_definition_list() to show menu item ids </li></ul><ul><li>Modified style sheet with menu ids </li></ul>
  13. 21. Summary <ul><li>The hard work is in the CSS/HTML </li></ul><ul><li>Don't modify an existing theme if you've been provided HTML/CSS </li></ul><ul><li>Keep logic and fudge in template.php </li></ul><ul><li>Respect the design </li></ul><ul><li>Thanks! </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×