Joomla Template Tutorial - Hiding Columns

Article Index

Hiding Columns

So far we have our layout such that we always have three columns, regardless of whether there is any content in there. We want to be able to "turn off" a column automatically, or "collapse" it if there is no content there.

The simplest way to do this is to have a small piece of PHP in the <head> of the page.

<?php if ( mosCountModules( 'right' ) <= 0) { ?>
<style type="text/css" media="screen">
#main-body {width:100%;}
#content{width:75%;}
#sidebar{width:25%;
#sidebar-2:display:none;}
</style>
<?php } ?>

mosCountModules will return the number of modules in that location. If it is equal or less than zero, i.e., there is nothing there, then the style rules will be adjusted. This php must appear AFTER the line that links to the template_css.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 simliar fashion by having the if statement import a sub CSS file.

Hiding Module Code

When creating collapsible columns, it is good practice to set up the modules to also not be outputted if there is no content there. If this is not done the pages will have empty <div>'s in them which can lead to cross browser issues.

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

<?php if (mosCountModules('left')) { ?><?php mosLoadModules( 'left', -2 );?> <?php } ?>

Anything can be placed inside the if statement, so we can put our <div> there:

<?php if (mosCountModules('left')) { ?>
<div id="sidebar">
<div class="inside">
<?php mosLoadModules( 'left', -2 );?>
</div></div>
<?php } ?>

Using the above code, if there is nothing published in left, then #sidebar will not be outputted.

Conditional statements can also be used. Our sidebar column also had user1 in it as well as left, so we can have an OR statement:

<?php if (mosCountModules('left') || mosCountModules('user1')) { ?>
<div id="sidebar">
<div class="inside">
<div id="navcontainer">
<?php mosLoadModules('user1',-2);?>
</div>
<?php mosLoadModules('left',-2);?>
</div></div>
<?php } ?>

So if anything is published in either "left" or "user1" then this piece of code will be output.

Using this technique for our left and right columns, our index.php file now looks like this:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head> <meta http-equiv="Content-Type" content="text/html; " /> <?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<!--https://www.bluerobot.com/web/css/fouc.asp-->
<link href="/templates//css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
<?php if ( mosCountModules( 'right' ) <= 0) { ?>
<style type="text/css" media="screen">
#main-body {width:100%;}
#content{width:75%;}
#sidebar{width:25%;
#wrap{background:none;} </style>
<?php } ?>
</head>

<body>

<div id="wrap">

<div id="header">
<h1><?php echo $mosConfig_sitename; ?></h1> <?php mospathway() ?>
</div>

<div id="main-body">

<div id="content">
<div class="inside">
<?php mosLoadModules('top',-2);?>
<?php mosMainBody(); ?>
</div></div>

<?php if (mosCountModules('left') || mosCountModules('user1')) { ?>
<div id="sidebar">
<div class="inside">
<div id="navcontainer">
<?php mosLoadModules('user1',-2);?>
</div> <?php mosLoadModules('left',-2);?>
</div></div>
<?php } ?>

</div> <!--end of main-body-->

<?php if (mosCountModules('right')) { ?>
<div id="sidebar-2">
<div class="inside">
<?php mosLoadModules('right',-2);?>
</div></div> <?php } ?>

<div id="footer">
<?php mosLoadModules(footer,-2);?>
</div>

</div> <!--end of wrap-->
</body>
</html>

I have also suggested a change to the footer at this point. The footer.php include makes it very difficult to change what this text is. I much prefer to have this placed as a module. There is even a module location called footer! Note in the template file that is associated with this guide, I have not changed this footer code in the downloadable template, but I show here giving the option should you wish to do so.

Designer's Tip

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