Creating responsive module positions in Joomla

Powering millions of websites, Joomla is the second most used Content Management System available on the internet. The success of Joomla is attributed to many factors, such as the open source availability of Joomla CMS, the security of the Joomla framework, its flexible nature, and hundreds of inbuilt features. However, we can say that the most enticing feature of Joomla is the ability to change the functionality and appearance of the site through a simple change of template and modules. The flexibility offered by both of these extensions is a very attractive feature of Joomla and, thus, template creation and configuring are a major part of the web-development industry.

The most important aspect of creating a custom Joomla template is to assign module positions and create space for modules. However, not everyone knows that you can use the Twitter Bootstrap Framework to create responsive module positions and thus responsive modules. Therefore, here we will discuss ways to create responsive module positions in Joomla Templates using the Bootstrap framework.

Declaring Modules in Joomla templateDetail.xml

The first step in adding modules in a template is declaring it in index.php and templateDetail.xml. Both these files are the most important files of every Joomla template without which no template can be made. This is how you declare module positions in templateDetail.xml

<positions>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
<position>position-5</position>
<position>position-6</position>
<position>position-7</position>
<position>position-8</position>
<position>position-9</position>
<position>position-10</position>
<position>position-11</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
<position>position-15</position>
<position>position-16</position>
</positions>

Through this piece of code I have just told Joomla CMS that there are 18 modules (0-16 positions + debug) in the template.

Bootstrap Classes

The next step after declaring in templateDetail.xml is to declare module positions in index.php, but before that, we need to understand about Bootstrap and its classes. Bootstrap is a 12 column, 940px grid framework that can extend to 1170px or shrink to 724px depending upon screen size. It comes with many inbuilt classes that can be used to create attractive and dynamic websites. However, the most used classes are related to div size and layout manipulation. Here are a few examples.

<div Class = “span*” >

Span* is the class that defines the number of columns a div will span.

<div class="row">
  <div class="span3">...</div>
  <div class="span9">...</div>
</div>
 

This code will create a div that will span 4 columns and another that will span 9 columns. Also Class = row will make sure that they stay in a single row. Similarly using class = “row-fluid” instead of “row” will change the layout of div to Fluid instead of Fixed. There are some more classes such as

• Class = “container” :- Creates a container of content
• Class = “container-fluid”:- Creates a fluid container for content
• class = “visible-phone”:- Div will be visible only in phone sizes (screen size =< 762px)
• class = “visible-tablet”:- Div will be visible only in Tablet sizes (768px =< screen size =< 979px)
• Class = “visible-desktop”:- Div will be visible only in Desktop sizes (screen size => 979px). Default class.
• Class = “hidden-phone”:-Div will not be visible in phone sizes alone.
• Class = “hidden-tablet”:-Div will not be visible in tablet sizes alone.
• Class = “hidden-desktop”:- Div will not be visible in desktop sizes alone.

Declaring modules in index.php

Now the part comes where we declare bootstrap in index.php. Here is how we will do it.

<div class="row-fluid  box_container" >
  <?php if ($this->countModules('position-9')) : ?>
  <div class="span3">
   <jdoc:include type="modules" name="position-9" />
  </div>
  <?php endif; ?>
  <?php if ($this->countModules('position-10')) : ?>
  <div class="span3">
     <jdoc:include type="modules" name="position-10" />
  </div>
  <?php  endif;  ?>
   <?php if ($this->countModules('position-11')) : ?>
   <div class="span3">
  <jdoc:include type="modules" name="position-11" />
  </div>
  <?php  endif;  ?>
   <?php if ($this->countModules('position-12')) : ?>
   <div class="span3">
  <jdoc:include type="modules" name="position-12" />
  </div>
   <?php  endif;  ?>
 
  </div>

Here we have declared a div using fluid row and added a module position inside a nested div that spans 3 columns. We have cleverly declared both the size and layout type of the module. In a similar way, you can declare the other module positions as per your requirement.

Conclusion

Creating module positions using bootstrap classes can easily make your modules responsive. You can even decide which modules to show on what screen size and which to omit on lower screen sizes. In the same way, you can include banners, slideshows, footer elements, header elements, or main content elements. Bootstrap is one of the best CSS frameworks available on the net and a very good resource for making responsive websites.