Recommended
More Related Content
What's hot
What's hot (20)
Similar to Joomla! Template for Beginners
Similar to Joomla! Template for Beginners (20)
Recently uploaded
Recently uploaded (20)
Joomla! Template for Beginners
- 1. Joomla! Template Development for Beginners 2 Oct 2010
- 2. This training will be conducted in a non-linear fashion.
- 5. The human brain is interested in making connections, and not so good in following orders.
- 6. No pens, papers or notebooks needed.
- 7. Sit back, relax, and let the human brain make connections!
- 10. joomla templates beez ja_purity rhuk_milkyway system
- 11. beez
- 12. ja_purity beez
- 13. rhuk_milkyway
- 14. joomla templates beez ja_purity rhuk_milkyway system
- 15. What does the “system” folder do?
- 16. What does the “system” folder do? Common html layout & css styling that is used throughout the entire Joomla! site.
- 18. Extensions > Template Manager
- 19. joomla templates rhuk_milkyway index.php
- 20. Things that I saw but I did not understand
- 21. <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"/>
- 22. Removed this.
- 23. And inserted a ducky...
- 25. Can you spot the difference?
- 27. Then I replaced this with a ducky… <jdoc:include type="modules" name="left" style="rounded" />
- 28. and we have 2 duckies.
- 29. <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="component" />
- 30. module module module module module module component module module
- 31. Joomla! templates are built with Component & Modules. <jdoc:include type="component" /> <jdoc:include type="modules" name="left" style="rounded" />
- 32. 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>
- 33. joomla templates rhuk_milkyway templateDetails.xml
- 34. template metadata templateDetails.xml contains the metadata of your template, e.g. template name, template description, template license.
- 35. 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.
- 36. 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>
- 37. 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" />
- 38. 2 most important file that makes any Joomla! template work. index.php templateDetails.xml
- 39. The bare essentials of index.php 1. Doctype 2. Head 3. Joomla! system stylesheets 4. Component 5. Modules
- 40. 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; ?>" >
- 41. 2. Head <head> <jdoc:include type="head" /> </head>
- 42. 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" />
- 44. 5. Modules <jdoc:include type="modules" name="left" style="rounded" />
- 45. 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>
- 47. some things here… Let’s talk about… Modules. some things here also… some things everywhere… some things there…
- 48. Extensions > Module Manager
- 51. Configure module & you’re done!
- 52. I’m green with white border! What I really want to talk about is… Module Chrome. I’m purple with rounded corner!
- 53. What does this style attribute does? <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="right" style="xhtml"/>
- 54. 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"
- 55. How do they look like? rounded xhtml outline
- 57. Now that’s a neat trick! http://yoursite/index.php?tp=1
- 58. Where do module chromes come from?
- 59. joomla templates system html modules.php
- 60. Can I make my own module chrome?
- 61. joomla templates yourtemplatename html modules.php
- 62. The bare essentials of a module chrome <?php echo $module->title; ?> <?php echo $module->content; ?>
- 63. A sample module chrome <?php function modChrome_rounded($module, &$params, &$attribs) { ?> <h3><?php echo $module->title; ?></h3> <div><?php echo $module->content; ?></div> <?php } ?>
- 65. Demo A quick Joomla! template.
- 66. We are hiring Web Designers. Become a Joomla! Web Designer @ Slashes and Dots! Talk to us or contact Meriza - meriza@azrul.com.
- 67. 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.