Joomla Templates by Youjoomla.com

Is your Joomla Template missing functionality? Do you want to collapse modules but you do not know how?You Joomla will unlock the secrets to you.One word"IF"! Let see.If I go to the market today I will buy tomatoes,or if I stay home I will watch movie! Now you say this guy is crazy.Well not quite but this is Joomla 1on1 .You dont belive me?Keep on reading...

In Joomla World,

<?php  " If module right and module left are published,set the content width to certain size,now ,If only module left is published set the content width to desired size,
also.If the right module is  published ,stretch the content to its desired size,or if none of the modules are published ,strecth the content to its full width"  ?>

Do you believe me now:)?!.Keep on reading and in few seconds you will
learn how to collapse this modules ,and you do not have to go trough all
the books and tutorials that tell you Syntax mintax bintax :).Keep it simple
right!

Ok let us take a look at the actual PHP switch command.Please read the text
in ORANGE and just follow line by line.
   
    <?php  {                                      //START  COLAPSING MODULES   
$left = mosCountModules( 'left' );       // LEFT SIDE MODULES
$right = mosCountModules( 'right' ) ; // RIGHT SIDE MODULES
if ( $left && $right ) {                       // Little IF statement that says IF module left and module right are published        <--------next line please-------------->

    $maincontent = 'main-body';        // please use  div main-body! Next line please
    $content = 'content';                   // and use div content!
    } elseif ( $left ) {                         // Now second IF says, if only left module is published
    $maincontent = 'main-body-left';  // please use  div main-body-left!
    $content = 'content-left';              // and use div content-left!
    } elseif ( $right ) {                        //And  third IF says if only right module is published
    $maincontent = 'main-body-right'; // please use  div main-body-right!
    $content = 'content-right';             // and use div content-right!
    } else {                                        // Last statement says ,Otherwise if left and right module are not published
    $maincontent = 'main-body-full';   // please use  div main-body-full!
    $content = 'content-full';              // and use div content-full!
}                                                    //END COLAPSING MODULES

?>
<?php } ?>


Ok so far so good I hope you are still with me . Let explain some div calls

$maincontent php call will be used to call the div for main-body
$content php call will be used to call the div for content.

Now you say but where do this calls go.Ok ok go on ...

Second code part.This time please read text in GRAY!


<!--START MAIN BODY-->
<div id="<? echo $maincontent; ?>"> <!--Ok here we go this line calls the div that we need depending if the module is published or not-->
<div id="<? echo $content; ?>"> <!--And same thing here. -->
<?php mosMainBody(); ?> <!--Most of you know this but for those who dont ,this Joomla command loads the component -->
</div> <!--Close That Div-->
<?php if (mosCountModules('left')) {?><!--This is one of the main commands for collapsing that says,ONLY If Joomla/Mambo
counts or sees module being published in left position CONTINUE 2 LINES DOWN-->
<div id="modleft">
<div class="inside">
<?php mosLoadModules('left',-2);?> <!--Joomla/Mambo please show that module in left position.Which means that the div will not be loaded either if there is no module because we placed the if statement BEFORE the div id=modlef" -->
</div> <!--Close That Div-->
</div> <!--Close That Div-->
<?php } ?> <!--This closes the if statement.Please watch for this one!!! If you place it before the closing div your command will still work but than your site might NOT Validate because it will leave div in there-->
</div> <!--END MAIN BODY-->

<?php if (mosCountModules('right')) { ?><!--Same goes here as left module-->
<div id="modright">
<div class="inside">
<?php mosLoadModules('right',-2);?> <!--Same goes here as left module-->
</div> <!--Close That Div-->
</div> <!--Close That Div-->
<?php } ?>
</div> <!--END CONTAINER-->



Ok and now the last part.Let see that template_css.css

/*------------------------------------------------------------------------

# COLLAPSE MODULES TUTORIAL BY YOUJOOMLA.COM

# ------------------------------------------------------------------------

# Copyright (C) 2006-2007 Youjoomla.com, All Rights Reserved.

-------------------------------------------------------------------------*/

body {
text-align:center;
background:#999;
}
#topmenu{
margin:0 auto;
width:80%;
text-align: left;
}
#wrap{
text-align: left;
background:#CCCCCC;/*like already said,just to add some color*/
float:left;
padding: 20px 5px 20px 5px;
}
#container {
width:100%; /*center hack*//*THIS IS THE MAIN CONTAINER FOR ALL DIVS*/
margin:0 auto; /*center hack*/
text-align:left;
background: #cccccc;
}
#modright { /*THIS IS MODULE RIGHT*/
background:#800040;
color:#fff;
float:right;
width:17%;
overflow:hidden;
margin-left:-3px;
}
#modleft {  /*THIS IS MODULE LEFT*/
background:#0099FF;
color:#fff;
float:left;
width:19%;
overflow:hidden;
margin-right:-3px;
}
.inside {  /*THIS IS CLASS TO PUSH THE MODULE TABLE OF THE EDGES A BIT*/
padding:7px;
}
/*COLAPSE MODULES FUNCTIONS */

/*LEFT AND RIGHT MODULES VISIBLE */
#main-body { /*THIS IS MAIN DIV HOLDS THE CONTENT DIV*/
float:left;
width:83%;
}
#content { /*THIS IS CONTENT DIV AND YOUR MAINBODY IS INSIDE OF IT*/
text-align:left;
float:right;
width:80%;
}
/*COLAPSE  LEFT MODULE ONLY*/
#main-body-right {
float:left;
width:80%;
}
#content-right {
text-align:left;
float:left;
width:100%;
}
/*COLAPSE RIGHT MODULE ONLY*/
#main-body-left {
float:left;
width:100%;
padding-right:10px;
}
#content-left {
text-align:left;
float:right;
width:80%;
overflow:hidden;
}
/*COLAPSE RIGHT AND LEFT MODULE */
#main-body-full {
float:left;
width:100%;
}
#content-full {
margin:0 auto;
text-align:left;
width:90%;
}
/*END COLAPSE MODULES FUNCTIONS */