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:

artisteerindex

 

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.

index

 

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 <div class=”sidebar1″> to <div class=”content”> with this:

artisteerfix

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.

index

 

Now, your left and right columns will collapse when not in use.

 

Your css will look something like this:

/* begin LayoutCell */
.contentLayout .content {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 534px;
}
/* end LayoutCell */
/* begin LayoutCell */
.contentLayout .content1side {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 714px;
}
.contentLayout .content0side {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 894px;
}
/* end LayoutCell */
/* begin LayoutCell */
.contentLayout .sidebar1 {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 176px;
}
.contentLayout .sidebar2 {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 176px;
}
/* end LayoutCell */

 

Leave a Reply

Your email address will not be published. Required fields are marked *