responsive templates in joomla!

Post on 27-Jan-2015

115 Views

Category:

Technology

3 Downloads

Preview:

Click to see full reader

DESCRIPTION

Responsive web templates in Joomla 3.x using Bootstrap

TRANSCRIPT

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>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 Examplehttp://github.com/davidhurley/jdaygt

Twitter Bootstraphttp://twitter.github.io/bootstrap

Contact

David Hurley

twitter: @dbhurleyfacebook: /dbhurleyskype: davidbhurley

email: david.hurley@joomla.org

Live Preview

Let's get started...

top related