The HD-Framework: Collapsible Module Positions

Collapsible module positions allow you to have a bit of layout variation between your Joomla pages. This short guide will explain how the "side" module position can be made collapsible, allowing you to have a full width content page if there is no module allocated to the "side position".


Download for Joomla 2.5/3


wireframes | html5 | collapsible module positions | template parameters | template overrides | bootstrap


Collapsible Module Positions

In the below example if the “side” module position was not collapsible and there was no module allocated in that position then the content width would still be the same, leaving an empty space to the right.


To solve this we will set up two different ID selectors for the content div and call them “content” and “content_noside”. The CSS will specify that the widths are different.

#content {width: 75%;}
#content_noside {width: 100%;}

Then in the template’s index.php file we will set up a “count modules” statement.
This literally checks whether a module is placed in a particular position.
If a module is present in the “side” position then the div “content” will be declared and rendered.
Otherwise the div “content_noside” is rendered instead.

This is the code that’s used…

<?php if($this->countModules('side')) : ?>
<div id="content"><jdoc:include type="component" /></div>

<div id="side"><jdoc:include type="modules" name="side"/></div>

<?php else : ?>

<div id="content"><jdoc:include type="component" /></div>

<?php endif; ?>


The first line checks if the module position is being used and if so it enables line 2 & 3.


The fourth line states “otherwise” and enables line 5.


The last line ends the whole procedure.


You can also use the “count modules” statement to see if two or more module positions are being used. For example the following code displays three modules (at a third of the screen width each) in a row if they all contain modules, two modules (at half the screen width each) if only the first two contain modules and one module at the full screen width if only the first module is used.


<?php if($this->countModules('logo1 and logo2 and logo3')) : ?>

<div id="logo1_third"><jdoc:include type="modules" name="logo1"/></div>

<div id="logo2_third"><jdoc:include type="modules" name="logo2"/></div>

<div id="logo3_third"><jdoc:include type="modules" name="logo3"/></div>

<?php elseif($this->countModules('logo1 and logo2')) : ?>

<div id="logo1_half"><jdoc:include type="modules" name="logo1"/></div>

<div id="logo2_half"><jdoc:include type="modules" name="logo2"/></div>

<?php elseif($this->countModules('logo1')) : ?>

<div id="logo1_full"><jdoc:include type="modules" name="logo1"/></div>

<?php endif; ?>



Web Design & Development
07845 950063