Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk
Apr 13 2013
How to create responsive module positions in Joomla using Bootstrap
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 open source availability of Joomla CMS, security of Joomla framework, flexible nature, and hundreds of inbuilt features. However being a highly experienced PSD to Joomla Conversion Company, we can say that the most enticing feature of Joomla is the ability to change the functionality and looks of the site through a simple change of template and modules. Flexibility offered by both of these extensions is very attractive feature of Joomla and thus template creation and configuring is a major part of the web-development industry.
The most important aspect in creating a custom Joomla template is to assign module positions and create space for modules. However not everyone knows that you can use Twitter Bootstrap Framework to create responsive module positions and thus responsive modules. Therefore here we discuss ways to create responsive module positions in Joomla Templates using 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.xml1234567891011121314151617181920<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.
The next step after declaring in templateDetail.xml is to declare modules 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 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.1234<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 it1234567891011121314151617181920212223div 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 similar way you can declare the other module positions as per your requirement.
Creating module positions using bootstrap classes can easily make your modules responsive. You can even decide which modules to show in what screen size and which to omit in lower screen sizes. 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 net and a very good resource for making responsive websites.