• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Templates in Joomla!
 

Responsive Templates in Joomla!

on

  • 239 views

Responsive web templates in Joomla 3.x using Bootstrap

Responsive web templates in Joomla 3.x using Bootstrap

Statistics

Views

Total Views
239
Views on SlideShare
230
Embed Views
9

Actions

Likes
0
Downloads
3
Comments
0

4 Embeds 9

http://www.tumblr.com 3
http://dbhurley.com 2
http://bestaroundtheweb.com 2
http://www.slideee.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Templates in Joomla! Responsive Templates in Joomla! Presentation Transcript

    • Responsive Templates Created for Joomla! JoomlaDay Guatemala 2013
    • Necessary Files index.php templateDetails.xml
    • Extra Files & Folders LESS/CSS Images HTML Javascript
    • 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">
    • 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>
    • templateDetails.xml - Files <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> <folder>images</folder> <folder>html</folder> </files>
    • templateDetails.xml - Positions <positions> <position>top</position> <position>breadcrumbs</position> <position>footer</position> <position>left</position> <position>right</position> <position>footer</position> </positions>
    • 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>
    • 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>
    • JHtmlBootstrap::loadCss($includeMaincss = true); That's all Add Bootstrap Style from JUI
    • Resources Template Example http://github.com/davidhurley/jdaygt Twitter Bootstrap http://twitter.github.io/bootstrap
    • Contact David Hurley twitter: @dbhurley facebook: /dbhurley skype: davidbhurley email: david.hurley@joomla.org
    • Live Preview Let's get started...