responsive templates in joomla!
DESCRIPTION
Responsive web templates in Joomla 3.x using BootstrapTRANSCRIPT
Responsive TemplatesCreated for Joomla!
JoomlaDay Guatemala 2013
Necessary Files
index.phptemplateDetails.xml
Extra Files & Folders
LESS/CSSImagesHTMLJavascript
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>[email protected]</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 Examplehttp://github.com/davidhurley/jdaygt
Twitter Bootstraphttp://twitter.github.io/bootstrap
Contact
David Hurley
twitter: @dbhurleyfacebook: /dbhurleyskype: davidbhurley
email: [email protected]
Live Preview
Let's get started...