Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Templates in Joomla!

1,144 views

Published on

Responsive web templates in Joomla 3.x using Bootstrap

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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...

×