How to creat joomla template 3.0 step by step: Boostrap and responsive Joomla 3.0 template

In previous tutorials we created Joomla 3.0 boostrap template: How to creat joomla template 3.0 step by step: Boostrap Joomla 3.0 template

This tutorial we will learn how to creat Responsive joomla 3.0 template

What is Responsive Web design ??

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).



How to creat Responsive Joomla 3.0 template?

Open your style.css file in your folder path: your_joomla_folder/templates/your_New_template_name/css/style.css file and Remove all css that controls page structure like: width, height….

Now your your_joomla_folder/templates/your_New_template_name/css/style.css file code will like that

body{ margin:0;  padding:0; font-size:12px; font-family:arial; }.main_container {
.mid_container {
margin:20px 0px;
.main_content_area {
.right_sidebar {
.header {
border:1px solid #bbb;

Affter that we will open index.php file in your template folder your_joomla_folder/templates/your_New_template_name/index.php

and edite with code bellow (NOTE: can read more here How to build a responsive Joomla! Template 3.0 with Twitter Bootstrap Framework)

* @package&nbsp;&nbsp;&nbsp;&nbsp; Joomla.Site
* @subpackage&nbsp; Template.Your_New_template_name
* @copyright&nbsp;&nbsp; Copyright (C) 2005 - 2013
* @license&nbsp;&nbsp;&nbsp;&nbsp; GNU General Public License version 2 or later; see LICENSE.txt

defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
<!DOCTYPE html>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- main container -->
<div class='container'>
<!-- header -->
<div class='row'>
<div class='span12'>Header</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" />
<!-- right sidebar -->
<div class='span3'>
<jdoc:include type="modules" name="position-7" style="well" />
<!-- footer -->
<div class='row'>
<div class='span12'>Footer</div>

Now you open your joomla site and check your result




Leave a comment