Joomla! Template for Beginners

38,284 views

Published on

Are you new to Joomla! template designing and keen to learn how to go about creating one? This is beginner-level training for Joomla! template developers conducted on 2 Oct 2010 for free.

Slashes and Dots provide Joomla training on demand basis and free Joomla! related training from time to time

Published in: Business
6 Comments
30 Likes
Statistics
Notes
  • Why you disable the donwload?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • i like it
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Why download is disabled?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Why you disable the donwload?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Why you disable the donwload?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
38,284
On SlideShare
0
From Embeds
0
Number of Embeds
17,655
Actions
Shares
0
Downloads
0
Comments
6
Likes
30
Embeds 0
No embeds

No notes for slide

Joomla! Template for Beginners

  1. 1. Joomla! Template Development for Beginners 2 Oct 2010
  2. 2. This training will be conducted in a non-linear fashion.
  3. 3. Books are boring.
  4. 4. The human brain is interested in making connections, and not so good in following orders.
  5. 5. No pens, papers or notebooks needed.
  6. 6. Sit back, relax, and let the human brain make connections!
  7. 7. www.joomla.org
  8. 8. joomla templates beez ja_purity rhuk_milkyway system
  9. 9. beez
  10. 10. ja_purity beez
  11. 11. rhuk_milkyway
  12. 12. joomla templates beez ja_purity rhuk_milkyway system
  13. 13. What does the “system” folder do?
  14. 14. What does the “system” folder do? Common html layout & css styling that is used throughout the entire Joomla! site.
  15. 15. http://yoursite/administrator
  16. 16. Extensions > Template Manager
  17. 17. joomla templates rhuk_milkyway index.php
  18. 18. Things that I saw but I did not understand
  19. 19. <jdocs:include> stuff <jdoc:include type="component" /> <jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="right" style="xhtml"/> <jdoc:include type="modules" name="footer" style="xhtml"/>
  20. 20. Removed this.
  21. 21. And inserted a ducky...
  22. 22. Can you spot the difference?
  23. 23. <jdoc:include type="component" />
  24. 24. Then I replaced this with a ducky… <jdoc:include type="modules" name="left" style="rounded" />
  25. 25. and we have 2 duckies.
  26. 26. <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="component" />
  27. 27. module module module module module module component module module
  28. 28. Joomla! templates are built with Component & Modules. <jdoc:include type="component" /> <jdoc:include type="modules" name="left" style="rounded" />
  29. 29. So, build your html codes around Component & Modules. <div id="mainContent"> <jdoc:include type="component" /> </div> <div id="sidebar"> <jdoc:include type="modules" name="left" style="rounded" /> </div>
  30. 30. joomla templates rhuk_milkyway templateDetails.xml
  31. 31. template metadata templateDetails.xml contains the metadata of your template, e.g. template name, template description, template license.
  32. 32. template files It also contains the list of your template files, which Joomla! look up to when installing/uninstalling a Joomla! template on Joomla! site.
  33. 33. So, build your html codes around Component & Modules. <div id="mainContent"> <jdoc:include type="component" /> </div> <div id="sidebar"> <jdoc:include type="modules" name="left" style="rounded" /> </div>
  34. 34. module positions The available module positions of the template is listed right here. Do you still remember… <jdoc:include type="modules" name="left" style="rounded" />
  35. 35. 2 most important file that makes any Joomla! template work. index.php templateDetails.xml
  36. 36. The bare essentials of index.php 1. Doctype 2. Head 3. Joomla! system stylesheets 4. Component 5. Modules
  37. 37. 1. Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
  38. 38. 2. Head <head> <jdoc:include type="head" /> </head>
  39. 39. 3. Joomla! system stylesheets <link rel="stylesheet“ type="text/css" href="<?php echo $this->baseurl?> /templates/system/css/system.css" /> <link rel="stylesheet“ href="<?php echo $this->baseurl?> /templates/system/css/general.css" type="text/css" />
  40. 40. 4. Component <jdoc:include type="component" />
  41. 41. 5. Modules <jdoc:include type="modules" name="left" style="rounded" />
  42. 42. The bare essentials of index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet“ type="text/css" href="<?php echo $this->baseurl?> /templates/system/css/system.css" /> <link rel="stylesheet“ href="<?php echo $this->baseurl?> /templates/system/css/general.css" type="text/css" /> </head> <body> <jdoc:include type="component" /> <jdoc:include type="modules" name="left" style="rounded" /> </body> </html>
  43. 43. Demo The Bare Essentials
  44. 44. some things here… Let’s talk about… Modules. some things here also… some things everywhere… some things there…
  45. 45. Extensions > Module Manager
  46. 46. click! Creating a module.
  47. 47. Select module type.
  48. 48. Configure module & you’re done!
  49. 49. I’m green with white border! What I really want to talk about is… Module Chrome. I’m purple with rounded corner!
  50. 50. What does this style attribute does? <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="right" style="xhtml"/>
  51. 51. There are 6 types of Chrome that comes with Joomla!. <jdoc:include type="modules" name="left" style="none" /> style="table" style="horz" style="xhtml" style="rounded" style="outline"
  52. 52. How do they look like? rounded xhtml outline
  53. 53. Speaking of outline…
  54. 54. Now that’s a neat trick! http://yoursite/index.php?tp=1
  55. 55. Where do module chromes come from?
  56. 56. joomla templates system html modules.php
  57. 57. Can I make my own module chrome?
  58. 58. joomla templates yourtemplatename html modules.php
  59. 59. The bare essentials of a module chrome <?php echo $module->title; ?> <?php echo $module->content; ?>
  60. 60. A sample module chrome <?php function modChrome_rounded($module, &$params, &$attribs) { ?> <h3><?php echo $module->title; ?></h3> <div><?php echo $module->content; ?></div> <?php } ?>
  61. 61. Demo Module Chrome
  62. 62. Demo A quick Joomla! template.
  63. 63. We are hiring Web Designers. Become a Joomla! Web Designer @ Slashes and Dots! Talk to us or contact Meriza - meriza@azrul.com.
  64. 64. Recommend a friend and get RM1500 If you know any friends who is a web designer. Recommend them to us! If we hire them, you get RM1500.

×