As we continue creating our Joomla 3.0 template from scratch, we will now make the template responsive.

Much of this tutorial is going to be simply showing you the changes that we're making to the template, but we'll add a few descriptions of what we're doing and why when necessary. We recommend that you read the official bootstrap documentation here on how to make a template responsive using bootstrap.

Our template as it looks now

our-template-before-making-responsiveYou can see in the screenshot to the right how our Joomla 3.0 template looks at this time.

 

Removing any css that controls page structure

after-removing-cssAs Bootstrap and its responsive features basically control the structure of the page, we can remove any previous CSS that we've added that deals with the layout of the page (vs. styling the page, as in colors , font sizes, etc.)

All of the code in our css/style.css file controls the template's layout, so we are going to delete all of the code in that file. The screenshot to the right shows our template after all the code has been deleted from our css/style.css file.

 

Adding bootstrap-responsive.css and the viewport meta tag

As per the official documentation, we need to add the following two lines of code to our template to turn on the responsive features:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/support/assets/css/bootstrap-responsive.css" rel="stylesheet">

The following lines, highlighted in green below, show how we incorporated this code in our template's index.php file.

<?php
$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');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
?>
<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

We won't show you a screenshot of these changes, as at this point they have made no impact to how the template looks.

Adding the container class

The bootstrap documentation says to set the main div that holds all of your content to a class of container. In our starting template, the main div has a class of main_container, as seen in the code below:

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

After making the necessary change, changing the class from main_container to container, our code looks like this:

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

after-adding-container-classAs you can see in the screenshot to the right, our template is now taking a little more form to it.

 

Adding row and span* classes

Again, you'll want to read the official documentation to learn more about adding row and span classes to your template. In essense, the row class defines a container that will hold span* classes. A row is divided into 12 columns. If you wanted one column to be 3/4 of the page, and another to be 1/4 of the page, those fractions would equate to 9 and 3. The bellow is a basic example of how you could setup the 3/4 and 1/4 layout:

<div class="row">
  <div class="span9">Larger content area</div>
  <div class="span3">Smaller sidebar area</div>
</div>

responsive-template-completedIn the screenshot to the right, you'll see our template after being setup with the row and span classes. Below, you'll find the code that makes up our index.php file after making all the changes discussed on this page.

 

Our template's index.php file up to this point

<?php
$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');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
?>
<!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>
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?
2013-05-13 11:10 pm
so prettty, make template so easy
n/a Points
2014-03-19 10:14 am

Thank you. Really easy to understand. I looked for such a simple introduction to responsive templating for a while.

 

Best Regards

Dirk Schaber, Owner Schaber Onlinemarketing, www.schaber-om.de

n/a Points
2014-03-20 4:43 pm

Bootstrap comes with a very cool responsive menu. To use it you need to make some modifications to the mod_menu file. So I created an alternate layout to make that step pretty easy.

To use the Bootstrap responsive menu, you can add this file:

https://dl.dropboxusercontent.com/u/3578401/responsive.php

to your_current_template/html/mod_menu/

Then in your menu module, just select the "responsive" layout.

n/a Points
2014-07-09 2:25 pm

Can I use this for any custom template?  It seems way to easy (LOL).  I've got to be missing something.

 

Staff
15,484 Points
2014-07-09 4:27 pm
Hello Jkotecha,

If you're within the same version, then it should be no problem. If you require further information, let us know what version you've installed and specify a URL so that we can observe the website.

Regards,
Arnel C.
n/a Points
2014-07-11 6:40 pm

no entiendo como hago para personalizar mi plantilla si borro todo el estilo css hecho desde el principio

estoy haciendo una plantilla pero no entiendo el uso de Bootstrap

por favor ayudame

Staff
15,484 Points
2014-07-11 7:25 pm
Hola Uriel,

Apologies, but we do not typically provide support in Spanish. This response has been translated using Google's Translate.

Lo siento, pero no puedo dar instrucciones sobre el uso de Manos a la Obra. Usted puede encontrar más información sobre Bootstrap yendo a Introducción a boostrap .

Kindest regards,
Arnel C.
n/a Points
2014-07-14 1:13 pm

Bootstrap es una librería de javascript y css que provee estilos pre-diseñados para ahorrar trabajo a los desarrolladores.

Lo mejor es que no toques directamente los estilos que ya vienen con bootstrap, si no que modifiques solo lo estrictamente necesario. De la misma manera en la que agregas la hoja de estilos de bootstrap, agrega tu propia hoja de estilos y sobreescribe las cosas que quieres cambiar.

***Google translate****

Bootstrap is a library of javascript and css that provides pre-designed to save developers working styles.

It is best not directly touch the styles that come with bootstrap, but that you change only what is necessary. In the same way that you add the stylesheet bootstrap, add your own style sheet and overwrites the things you want to change.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

8 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!