|
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 */
That is it my friends.Now lets head to the DEMO site to see does it actually
works!Before you go just to let you know the whole code above is fully functional.You can copy and paste it in your index.php and template_css.css file or just DOWNLOAD the tutorial template here.
Please feel free to comment in FORUMS
|
Joomla resources 
