Joomla! Template Tutorial – Collapsible Columns

This tutorial was developed by Jennifer of nodwell.net with Artisteer users in mind.
The original tutorial is located on nodwell.net here: Joomla! Template Tutorial – Collapsible Columns

You’ve got a great template with a left and right column, but you’ve noticed that when you have no modules in left and/or right, the article area (component) doesn’t stretch to fill the width of the page.
You want your modules to collapse when they are not used, so the page naturally fills more elegantly.

Let’s take a look at a template generated by Artisteer, for example.
The index.php looks like this:

In the yellow highlight area, you can see where the contentLayout div is created. This is the div that holds everything on the Sheet under the navbar/header and above the footer area.
If you were to look in your style.css, you would find a definition for .contentLayout .content. Depending on whether you generated both left and right or just left or right, you will find that .contentLayout .content width definition is equal to the width of the sheet – width of sidebar1 (if included) – width of sidebar2 (if included).
You’ll want to add just a little bit of CSS now to define a .content1side and a .content0side. Just copy .contentLayout .content and paste it twice and chang its name to .contentLayout .content1side (the first one) and .contentLayout .content0side (the second one). Make the width of .content1side = to the width from .content + the width of .sidebar1. Make the width of content0side = the width from .content + the width of .sidebar1 and .sidebar2.

Ok – back to our index.php now.

We are going to add a few conditional statements here to tell the index.php which content we are using based on what (if any) of the left and right modules are used. If we use left and right, we want our page to go in .content. If we use left or right but not both left and right, we want our page to go in .content1side. If there is no left or right in use, we want our page to go in .content0side.
Here’s how we do that. Just add a little bit to the index.php to replace from

with this:

Code: Select all

div class=”contentLayout”>

/* Only build sidebar1 if left is assigned any modules */

< ?php if ($this->countModule(‘left’) { ?>

< ?php /* now build the content based on whether we have 0, 1, or 2 columns in use on this page */ //see if we have both left and right – if so, use content if ($this->countModules(‘left’)&& $this-> countModules(‘right’)) { ?>

< ? php } // see if we have left or right but not both - if so use content1side else if ($this->countModules(‘left’) || $this->countModules(‘right’) { ?>

< ?php { //see if we have either left nor right - if so use content0side else { ?>

< ?php }?>

Now, we will want to do the same thing down at the bottom of index.php to only include sidebar2 if right is in use – just like we did for sidebar1.

Code: Select all

< ?php if ($this->countModules(‘rigth’) { ?>