Joomla Creative Inside Joomla Templates And Design

14,924 views

Published on

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

No Downloads
Views
Total views
14,924
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
718
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Joomla Creative Inside Joomla Templates And Design

  1. 1. CREATIVE JOOMLA! Dinah Randall / Melbourne Joomla!Day 2008
  2. 2. Inside Joomla Templates and Design <ul><li>How can I design a site in Joomla! 1.5? </li></ul>
  3. 3. Inside Joomla Templates and Design <ul><li>How can I design a site in Joomla! 1.5? </li></ul><ul><li>Words from a template designer and coder </li></ul>
  4. 4. Creative Joomla! <ul><li>Design constraints </li></ul>
  5. 5. Creative Joomla! <ul><li>Design constraints </li></ul><ul><li>Find and customise a template </li></ul>
  6. 6. Creative Joomla! <ul><li>Design constraints </li></ul><ul><li>Find and customise a template </li></ul><ul><li>What’s new in Joomla! 1.5 templates </li></ul>
  7. 7. Creative Joomla! <ul><li>Design constraints </li></ul><ul><li>Find and customise a template </li></ul><ul><li>What’s new in Joomla! 1.5 templates </li></ul><ul><li>That’s a good look! </li></ul>
  8. 8. Design Constraints <ul><li>What your designer needs to know </li></ul>
  9. 9. Site Design
  10. 10. Anatomy of a template
  11. 11. Module Positions
  12. 12. Module Positions Detail
  13. 13. Design Constraints <ul><li>Standards and accessibility </li></ul><ul><ul><li>W3C standards </li></ul></ul><ul><ul><li>Usability </li></ul></ul><ul><ul><li>Tableless HTML </li></ul></ul><ul><ul><li>Accessibility </li></ul></ul><ul><ul><li>Source Ordering </li></ul></ul><ul><ul><li>SEO tagging </li></ul></ul>
  14. 14. Find a template <ul><li>Free templates </li></ul><ul><li>http://www.bestofjoomla.com/component/option,com_bestoftemplate/Itemid,46 http://www.joomla.org/content/blogcategory/19/51 http://joomlashack.com http://www.siteground.com/joomla-hosting/joomla-templates.htm http://www.joomla24.com/ http://forum.joomla.org/index.php/board,479.0.html </li></ul><ul><li>Blank (unstyled) 1.5 template </li></ul><ul><li>http://s.imp.ly/joomla/index.php?option=com_content&view=article&id=45&Itemid=54&6414148bfaaea5bf75a0d701b35febbb=0322fd5f0fdf9596191344b8f91a1464 </li></ul>
  15. 15. Customise a template <ul><li>Using your own logo, styles & menus </li></ul><ul><li>Template Tutorials http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial.html http://forum.joomla.org/index.php?topic=248595.msg1144729#msg1144729 </li></ul><ul><li>Customising a Joomla! 1.5 template is not an entry-level job! </li></ul>
  16. 16. What’s new in 1.5 <ul><li>Parameters </li></ul><ul><li>Used in 1.5 to select colour, font-size, width, layout and menu options. Defined in the XML and params.ini files </li></ul><ul><li>Chrome </li></ul><ul><li>Over-rides </li></ul><ul><li>Content calls </li></ul><ul><li>Migration from 1.0 to 1.5 </li></ul>
  17. 17. What’s new in 1.5 <ul><li>Parameters </li></ul><ul><li>Chrome </li></ul><ul><li>No more -1, -2, -3 Use raw, xhmtl, table, horz, rounded, none, outline Module positions defined in XML </li></ul><ul><li>Over-rides </li></ul><ul><li>Content calls </li></ul><ul><li>Migration from 1.0 to 1.5 </li></ul>
  18. 18. What’s new in 1.5 <ul><li>Parameters </li></ul><ul><li>Chrome </li></ul><ul><li>Over-rides </li></ul><ul><li>Over-ride HTML output for any component or module – model/view/controller. See ‘Beez’ </li></ul><ul><li>Content calls </li></ul><ul><li>Migration from 1.0 to 1.5 </li></ul>
  19. 19. What’s new in 1.5 <ul><li>Parameters </li></ul><ul><li>Chrome </li></ul><ul><li>Over-rides </li></ul><ul><li>Content calls New calls to Joomla methods and parameters from index.php - jdoc </li></ul><ul><li>Migration from 1.0 to 1.5 </li></ul>
  20. 20. Content Calls <ul><li>1.0 old style </li></ul><ul><li>$mainframe->getTemplate() $mosConfig_live_site <?php mosLoadModules ( 'right',-2 ); ?> </li></ul><ul><li><?php mosMainBody(); ?> </li></ul><ul><li>1.5 new style </li></ul><ul><li>$this->template $this->url <jdoc:include type=&quot;modules&quot; name=&quot;right&quot; style=&quot;xhtml&quot; /> </li></ul><ul><li><jdoc:include type=&quot;component&quot; /> </li></ul>
  21. 21. What’s new in 1.5 <ul><li>Parameters </li></ul><ul><li>Chrome </li></ul><ul><li>Over-rides </li></ul><ul><li>Content calls </li></ul><ul><li>Migration from 1.0 to 1.5 </li></ul>http://www.developer.joomla.org/wiki/Tutorial:Upgrading_a_Joomla%21_1.0.x_template http://forum.joomla.org/index.php/topic,248595.0.html
  22. 22. That’s a good look! <ul><li>Joomla! designs… </li></ul>
  23. 23. Joomla! Design http://www.habitsbaranddining.com.au Melbourne Joomla!Day 2008
  24. 24. Joomla! Design http://www.malarmarden.se Melbourne Joomla!Day 2008
  25. 25. Joomla! Design http://www.palgor-publicidade.com Melbourne Joomla!Day 2008
  26. 26. Joomla! Design http://www.spacemakerwardrobes.com.au Melbourne Joomla!Day 2008
  27. 27. Joomla! Design http://www.lonestar.com.au Melbourne Joomla!Day 2008
  28. 28. Joomla! Design http://www.childrenoftherevolution.com.au Melbourne Joomla!Day 2008
  29. 29. Joomla! Design http://www.cinemalecep.com Melbourne Joomla!Day 2008
  30. 30. Joomla! Design http://www.vallartaencountours.com Melbourne Joomla!Day 2008
  31. 31. Joomla! Design http://www.cultureelcafe.nl Melbourne Joomla!Day 2008
  32. 32. Joomla! Design http://www.detainee002.com Melbourne Joomla!Day 2008
  33. 33. Joomla! Design http://btl.bialystok.pl Melbourne Joomla!Day 2008
  34. 34. Joomla! Design http://www.firststepsforkids.com Melbourne Joomla!Day 2008
  35. 35. Joomla! Design http://www.waterandstone.com Melbourne Joomla!Day 2008
  36. 36. Joomla! Design http://www.55thinking.com Melbourne Joomla!Day 2008
  37. 37. CREATIVE JOOMLA! Dinah Randall / Melbourne Joomla!Day 2008 Slides online at www.slideshare.net - search for ‘MJD08’

×