Joomla Template Tutorial - Hiding Columns
Article Index
Joomla Template Tutorial
What is a Joomla Template?
Localhost Design Process
W3C and Tableless Design
The Template Components
Using CSS to create a layout
Modules
Menus
Hiding Columns
Conclusion
Appendix A:Tips and Tricks
Word and PDF Versions
All Pages
Page 9 of 12

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) { ?
#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 <divif statement is used:

<?php if (mosCountModules('left')) { ?

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
<?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
<?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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?
<head
<?php mosShowHead(); ?
<script type="text/javascript"
<!--http://www.bluerobot.com/web/css/fouc.asp--
<link href="/templates/<?php echo $cur_template; ?
<?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
</div

<div id="main-body"

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

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

</div

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

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

</div
</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.



Last Updated on Thursday, 28 August 2008 09:17
 

Build a Successful Joomla Website Today

Want a Joomla website, but don't have an IT department?

Simplweb provides fully managed Joomla hosting on high performance cloud servers. Unlimited support on Joomla, managed backups, security and updates.

Find out more how Simplweb can make Joomla... "Simpl" and start building a successful Joomla webiste with our free month trial. We'll send you some more information and you'll be first in line join the easiest and fastest way to learn Joomla.



Get Joomla SaaS Hosting

Free Joomla Book

Sign up for Joomla Hosting at Simplweb and we'll send you a free signed copy of the best-selling Joomla - A User's Guide when your subscription starts!

Get Joomla Tips by RSS or Email

 

Joomla 1.6 Book

Get the NEW Joomla 1.6 Book

The new 3rd edition of the best selling Joomla 1.6 book is now available.

New and updated, its everything you need to know about Joomla 1.6!

Get it now from Amazon!

jenbookJoomla! Start to Finish Book

When you're ready to take your Joomla sites to the next level, try Joomla! Start to Finish: How to Plan, Maintain and Execute Your Website.

 

 

Teaching Sells

Classic Blog Posts

Popular Tutorials

Simplweb News

Joomla Book News

Joomla Tutorial by Compass Designs