Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Joomla! Template for Beginners
Similar a Joomla! Template for Beginners (20)
Último
Último (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.