Responsive Templates in Joomla!

876
-1

Published on

Responsive web templates in Joomla 3.x using Bootstrap

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

  • Be the first to like this

No Downloads
Views
Total Views
876
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Templates in Joomla!

  1. 1. Responsive Templates Created for Joomla! JoomlaDay Guatemala 2013
  2. 2. Necessary Files index.php templateDetails.xml
  3. 3. Extra Files & Folders LESS/CSS Images HTML Javascript
  4. 4. Getting Started: Template Details templateDetails.xml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 3.1//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install. dtd"> <install version="3.0" type="template" method="upgrade">
  5. 5. templateDetails.xml - Basic Details <name>Sample Template</name> <creationDate>2013-04-24</creationDate> <author>David Hurley</author> <authorEmail>david@mydomain.com</authorEmail> <authorUrl>http://mydomain.com</authorUrl> <copyright>Copyright (C) 2012 My Site</copyright> <version>1.0</version> <description><![CDATA[ <p>Creating a sample template for JD13GT<p> ]]></description>
  6. 6. templateDetails.xml - Files <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> <folder>images</folder> <folder>html</folder> </files>
  7. 7. templateDetails.xml - Positions <positions> <position>top</position> <position>breadcrumbs</position> <position>footer</position> <position>left</position> <position>right</position> <position>footer</position> </positions>
  8. 8. Index.php - Basic Structure - Head <?php defined('_JEXEC') or die; ?> <!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" /> </head>
  9. 9. Index.php - Basic Structure - Body <body> <jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="modules" name="breadcrumbs" style=" xhtml" /> <jdoc:include type="modules" name="left" style="xhtml" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="right" style="xhtml" /> <jdoc:include type="modules" name="footer" style="none" /> </body> </html>
  10. 10. JHtmlBootstrap::loadCss($includeMaincss = true); That's all Add Bootstrap Style from JUI
  11. 11. Resources Template Example http://github.com/davidhurley/jdaygt Twitter Bootstrap http://twitter.github.io/bootstrap
  12. 12. Contact David Hurley twitter: @dbhurley facebook: /dbhurley skype: davidbhurley email: david.hurley@joomla.org
  13. 13. Live Preview Let's get started...

×