Feb
20
2013

How to build a responsive Joomla! Template 3.0 with Twitter Bootstrap Framework

Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.

Joomla Bootstrap

Creat new joomla template

For any new joomla template we must creat new folder for example folder named vinaora, so directory will like that for example: http://joomquery.com/templates/vinaora/

use your editor software (Adobe Dreamweaver or Notepad++) to creat new one index.html blank file and then upload to vinaora folder /templates/vinaora/index.html
Creat new on Index php file is main joomla template file with php code below:

<?php

$doc = JFactory::getDocument();

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');

?>
<!DOCTYPE html>
<html>

<head>

 <jdoc:include type="head" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

 <!-- main container -->
 <div class='container'>

 <!-- header -->
 <div class='row'>
 <div class='span12'>Header</div>
 </div>

 <!-- mid container - includes main content area and right sidebar -->
 <div class='row'>

 <!-- main content area -->
 <div class='span9'>
 <jdoc:include type="modules" name="position-3" style="xhtml" />
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 <jdoc:include type="modules" name="position-2" style="none" />
 </div>

 <!-- right sidebar -->
 <div class='span3'>
 <jdoc:include type="modules" name="position-7" style="well" />
 </div>

 </div>

 <!-- footer -->
 <div class='row'>
 <div class='span12'>Footer</div>
 </div>

 </div>

</body>

</html>

Save as index.php and then upload to your template folder /templates/vinaora/index.phpNow we will creat install XML joomla template file with code like that

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">
<extension
 version="2.5"
 type="template"
 client="site">
 <name>vinaora</name>
 <creationDate>02-Feb 2013</creationDate>
 <author>Lamvt(Lamvt19792003@gmail.com)</author>
 <authorEmail>Lamvt19792003@gmail.com</authorEmail>
 <authorUrl>http://www.JoomQuery.com</authorUrl>
 <copyright>Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.</copyright>
 <license>GNU General Public License version 2 or later; see LICENSE.txt</license>
 <version>2.5.0</version>
 <description>
 <![CDATA[
 <h3>Vinaora responsive joomla template developed by Vinaora team for free<h3>
<ul>
 <li><a href="http://vinaora.com">Vinaora - Joomla tutorial</a></li>
<li><a href="http://joomquery.com">Joomquery - Joomla SEO</a></li>
</ul>
 ]]>
 </description>
 <files>

 <filename>index.php</filename>
 <filename>index.html</filename>
 <filename>templateDetails.xml</filename>
 </files>

 <positions>

 <position>position-2</position>
 <position>position-3</position>
 <position>position-7</position>

 </positions>

</extension>

Save as templateDetails.xml and then upload to your template folder /templates/vinaora/templateDetails.xml
This file most important for joomla template, Joomla cant defind your template if without this file, and joomla installer will creat and upload those files depending your files list.

Installation joomla template.

In this case we can Package folder vinaora as zip file (vinaora.zip) and installation via Joomla installer Extensions >>> Extensions manager >>>Intallation >>> upload and install . Or

We can discover and install your template

Go to Extensions >>> Extensions manager >>> Discover. Click the Discover button on top. You will see your freshly created template. Check the template and click on install button.

and than go to Extensions >>> Template Manager to make it the default template.

Now to see your Frontent for your Result.
Goodluck

Joomla Hosting

Leave a comment

You must be logged in to post a comment.

Vinaora Extensions