extension joomla, template joomla,banner extension joomla,jomla slider,slider joomla


So far, we have our layout such that we always have three columns, regardless of whether there is any content included. From the perspective of a CMS template, this is not very useful. In a static site the content would never change, but we want to give our site administrators the ability to put their content anywhere they want to without having to worry about editing CSS layouts. We want to be able to "turn off" a column automatically or "collapse" it if there is no content there.

During the development of the Joomla 1.5 templating engine, there were a number of changes and improvements. Quoting directly from the Joomla development blog:


The changes to the template system in Joomla 1.5 can be divided into two categories. First, there are changes to the way things where done in Joomla 1.0Â?for example the new way modules are loaded, and second there are also a bunch of extra features, like template parametersÂ?a quick overview:

Changes to the old ways


The mosCountModules function has been replaced by the $this->countModules function and support for conditions has been added. This allows designers to easily count the total number of modules in multiple template positions in just one line of code, for example $this->countModules('user1 + user2 ); which will return the total number of modules in position user1 and user2.


More information is also available in the Joomla forum.13

So the general use of mosCountModules would be

countModules('condition')) : ?> do something do something else

There are four possible conditions. As an example, let's count the number of modules in Figure 9.7. We could insert this code somewhere in the index.php:

1 left=<?php echo $this->countModules('left');?><br /> 
2 left and right=<?php echo $this->countModules('left and right');?><br /> 
3 left or right=<?php echo $this->countModules('left or right');?><br /> 
4 left + right=<?php echo $this->countModules('left + right');?> 
  view plain | print | ?
  • countModules('left'). Will return 4; there are 4 modules on the left.
  • countModules('left and right'). Will return 1; there is a module in the left and right-hand position.
  • countModules('left or right'). Will return 1; there is a module in the left or the right-hand position.
  • countModules('left + right'). Will return 7; counting the modules in the left and right-hand positions.

In this situation, we need to use the function that allows us to count the modules present in a specific location. So for example, if there is no content published in the right column, we can adjust the column sizes to fill that space.

There are several ways to do this. We could put the conditional statement in the body to not show the content and then have a different style for the content based on what columns were there. To make it as easy as possible, I have a series of conditional statements in the head tag that (re)define some CSS styles:

1 <?php 
2 if($this->countModules('left and right') == 0) $contentwidth = "100"
3 if($this->countModules('left or right') == 1) $contentwidth = "80"
4 if($this->countModules('left and right') == 1) $contentwidth = "60"
5 ?> 
  view plain | print | ?

So we count:

  • If there is nothing in left OR right, we are 100%.
  • If there is something in left OR right, we are 80%.
  • If there is something in left AND something in right, we are 60%.

We then need to change the index.php file in the content div to

<div id="content<?php echo $contentwidth; ?>"

Change the layout css to

1 #content60 {float:left;width:60%;overflow:hidden;} 
2 #content80 {float:left;width:80%;overflow:hidden;} 
3 #content100 {float:left;width:100%;overflow:hidden;} 
  view plain | print | ?

The PHP conditional statements in the head must appear after the line that links to the template.css file. This is because if there are two identical CSS style rules; the one that is last will overwrite all the others.

This can also be done in a similar fashion by having the if statement import a sub CSS file.


While you try to troubleshoot your conditional statements, you can add a line of code into your index.php, like this, to show what the value is:

This content column is % wide

So we are half-way there, but now we have empty div containers where the columns are.


When creating collapsible columns, it is good practice to set up the modules not to be generated if there is no content there. If this is not done, the pages will have empty

s in them, which can lead to cross browser issues.

To hide the empty <div>, the following if statement is used:

1 <?php if($this->countModules('left')) : ?> 
2 <div id="sidebar"
3   <div class="inside"
4     <jdoc:include type="modules" name="left" style="xhtml" /> 
5   </div> 
6 </div> 
7 <?php endif; ?> 
  view plain | print | ?

Using this code, if there is nothing published in the left, then <div id="sidebar"> will not be outputted.

Using these techniques for our left and right columns, our index.php file now looks like the following code. We will also add an "include for the breadcrumbs module," the module that shows the current page and pathway. Note that this now needs to be included in the index.php file and also published as a module.

1 <?php 
2 // no direct access 
3 defined( '_JEXEC' ) or die( 'Restricted access' ); 
4 ?> 
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
6 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
7 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; 
8 ?>lang="<?php echo $this->language; ?>" > 
9 <head> 
10 <jdoc:include type="head" /> 
11 <link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> 
12 <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> 
13 <link rel="stylesheet" href="templates/<?php echo $this->template?>/css/template.css" type="text/css" /> 
14 <?php 
15 if($this->countModules('left and right') == 0) $contentwidth = "100"
16 if($this->countModules('left or right') == 1) $contentwidth = "80"
17 if($this->countModules('left and right') == 1) $contentwidth = "60"
18 ?> 
19 </head> 
20 <body> 
21 <div id="wrap"
22   <div> 
23     <div class="inside"
24         <h1><?php echo $mainframe->getCfg('sitename');?></h1
25       <jdoc:include type="modules" name="top" style="xhtml" /> 
26     </div> 
27   </div> 
28 <?php if($this->countModules('left')) : ?> 
29 <div id="sidebar"
30   <div class="inside"
31     <jdoc:include type="modules" name="left" style="xhtml" /> 
32   </div> 
33 </div> 
34 <?php endif; ?> 
35 <div id="content<?php echo $contentwidth; ?>"
36   <div class="inside"
37     <jdoc:include type="module" name="breadcrumbs" style="none" /> 
38     <jdoc:include type="component" /> 
39   </div> 
40   </div> 
41 <?php if($this->countModules('right')) : ?> 
42   <div id="sidebar-2"
43     <div class="inside"
44       <jdoc:include type="modules" name="right" style="xhtml" /> 
45     </div> 
46   </div> 
47   <?php endif; ?> 
48   <?php if($this->countModules('footer')) : ?> 
49   <div id="footer"
50     <div class="inside"
51       <jdoc:include type="modules" name="footer" style="xhtml" /> 
52     </div> 
53   </div> 
54   <?php endif; ?> 
55 <!--end of wrap--> 
56 </body> 
57 </html> 
  view plain | print | ?

The Least You Need to Know

Elements such as columns or module locations can be hidden (or collapsed) when there is no content in them. This is done using conditional PHP statements that are linked to different CSS styles.

I would recommend a slightly different way of producing the footer. In the manner shown here, it is hard coded into the index.php file, which makes it hard to change. Right now, the "footer" module in the administrative backend shows the Joomla copyright and can't be easily edited. It makes much more sense to have a custom (X)HTML module placed in the footer location so the site administrator can change it more easily. If you wanted to create your own footer, you would simply unpublish that module and create a custom html module with whatever language you wanted.

In this case we would replace

<jdoc:include type="modules" name="footer" style="xhtml" /> 


<jdoc:include type="modules" name="bottom" style="xhtml" /> 

We must also remember to add this position to the templateDetails.xml file.


There are several names associated with modules in Joomla: banner, left, right, user1, footer, and so on. One important thing to realize is that the names do not correspond to any particular location. The location of a module is completely controlled by the template designer, as we have seen. It's customary to place them in a location that is connected to the name, but it is not required.

This basic template shows some of the fundamental principles of creating a Joomla template.


Creating a Pure CSS Template