Joomla! Template Tutorial - Collapsible Columns

March 22 2009 | Written by Administrator |

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 */

Set as favorite

Bookmark

Email this

Trackback(0)

TrackBack URI for this entry

Comments (14)

Subscribe to this comment's feed

i don't undertand

i'm only using a right side column when i ad your code i get Parse error: syntax error, unexpected '{' in /storage/mijndomein/users/020152/public/sites/www.hele-maal.nl/templates/nieuwzlink4/index.php on line 34

can u help me please

this is how my file looks now

div class="contentlayout">

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

nieuwzlink , March 30, 2009 | url

-2

...

It's a bit difficult to diagnose without seeing the index.php file where the error is indicated.

Parse error: syntax error, unexpected '{'

The error you see indicates that there is an error in your php syntax - an opening brace without a closing brace.

Probably, you opened an if statement and neglected to close it.

I've also just noticed bbcode's aren't working properly in these comments. Now, I've got something amusing to look into this afternoon smilies/wink.gif

jennifer , March 30, 2009

...

Hello,

was happy to found this code !!!!!

....but have same problem " unexpected '{' ".
Have copied original the modifications above 1to1 in my idex.php. smilies/cry.gif

But it don't work.

Could you please check ??? Or the best: Is it possible to make the modified index.php for dowload ?? That would be great !!!!

hopi , March 31, 2009

...

If you have unexpected {, then you have just neglected to close an if statement in your index.php.

Somewhere, you probably left out the line that closes the if statement with a }.

If you download this month's free template, you'll get an index.php file with this technique. smilies/wink.gif

jennifer , March 31, 2009

...

Hello,

thank's for the tip !

hopi , April 02, 2009

Parse error: syntax error, unexpected T_ENDIF

Hello. I tried the procedure above with my template created in Artisteer and im getting the message

"Parse error: syntax error, unexpected T_ENDIF in /home/uneedmyt/public_html/templates/uneedmytimemsauce/index.php on line 75

I'm also new to php so im clueless to whats happening. Could you help me out with this plzz.

OG , April 17, 2009 | url

...

I can't guess without seeing your whole file, really. The error indicates that you have an endif withough having opened an if.

One thing you might want to do is go to artisteer website and download the newest version. It includes collapsible columns in the latest version.

jennifer , April 17, 2009

Typos

Thanks a lot for your tutorial - it helped me a lot and I mention it in my blog: http://www.christianlapp.com/d...grate-them

But there are two nasty typos that make you crazy, so I tell you:
In the code that replaces from to make sure you close the if-question with a second ")" after ...left').
In the code taking care of sidebar2 you need to add ">" after /div

Christian Lapp , April 30, 2009 | url

Thanx Christian!!

....and thanx Jennifer :-)

But Christian is right those two typos almost drove me nuts! I would recommend that you update them for the sanity of Artisteer users ;-)

and

Thomas , June 03, 2009