YouJoomla | Professional Joomla Templates - Horizontal Modules Shelf Joomla Tutorial

You are here:Templates Club

Joomla resources

Joomla Tutorials

Horizontal Modules Shelf Joomla Tutorial

(6 votes)

Thursday, 13 September 2007

Most of you have already seen many Joomla Templates with 2, 3 or more fluid with and fully collapsible horizontal modules.
The process is simple and easy to use. Lets get started.

First we will create a simple empty shelf

CSS:

#myshelf{
width:100%;
margin:0 auto;
text-align:center;
color:#fff;
}

HTML:

Place the html inside your index.php and css inside your template_css.css

Now decide how many modules you want. For demo purposess we will use 4.

CSS:

#mod1,#mod2,
#mod3,#mod4{
text-align:left;

float:left; /*this does the trick*/

}

HTML:

<div id="myshelf">

</div>

Place the additional html inside the "myshelf" div in index.php or replace previous code, and css inside your template_css.css

So now we have module divs , but we need modules wright ?

Here we go.

HTML:

<?php if (mosCountModules('user1')|| (mosCountModules('user2') ||(mosCountModules('user3') ||(mosCountModules('user4')) { ?>

<div id="myshelf">

<?php if (mosCountModules('user1')) {?>

<div id="mod1"><?php mosLoadModules('user1',-2);?></div><?php } ?>

<?php if (mosCountModules('user2')) {?>
<div id="mod2"><?php mosLoadModules('user2',-2);?></div><?php } ?>
<?php if (mosCountModules('user3')) {?>
<div id="mod3"><?php mosLoadModules('user3',-2);?></div><?php } ?>
<?php if (mosCountModules('user4')) {?>
<div id="mod4"><?php mosLoadModules('user4',-2);?></div><?php } ?>

</div><?php } ?>

So far so god . Now the funny part . We need if command to change the width of modules

if one or more are unpublished.

PHP:

<?php
$shelf = 0;
if (mosCountModules('user1')) $shelf++;
if (mosCountModules('user2')) $shelf++;
if (mosCountModules('user3')) $shelf++;
if (mosCountModules('user4')) $shelf++;

if ( $shelf == 4 ) { // If 4 modules are published

$shelfmodwidth = '24%'; // Each module width will be 24%

}if ( $shelf == 3 ) { // If 3 modules are published

$shelfmodwidth = '33.3%'; // Each module width will be 33.3%

}if ( $shelf == 2 ) { // If 2 modules are published

$shelfmodwidth = '49%'; // Each module width will be 49%

} else if ($shelf == 1) { // If 1 module is published

$shelfmodwidth = '100%'; // This module width will be 100%

}
?>

HTML:

<?php if (mosCountModules('user1')|| (mosCountModules('user2') ||(mosCountModules('user3') ||(mosCountModules('user4')) { ?>

<div id="myshelf">

<?php if (mosCountModules('user1')) {?>
<div id="mod1" style="width:<?php echo $shelfmodwidth ?>;" ><?php mosLoadModules('user1',-2);?></div><?php } ?>
<?php if (mosCountModules('user2')) {?>
<div id="mod2" style="width:<?php echo $shelfmodwidth ?>;" ><?php mosLoadModules('user2',-2);?></div><?php } ?>
<?php if (mosCountModules('user3')) {?>
<div id="mod3" style="width:<?php echo $shelfmodwidth ?>;" ><?php mosLoadModules('user3',-2);?></div><?php } ?>
<?php if (mosCountModules('user4')) {?>
<div id="mod4" style="width:<?php echo $shelfmodwidth ?>;" ><?php mosLoadModules('user4',-2);?></div><?php } ?>

</div>

Place PHP code between your <head></head> tags. Place additional HTML inside your index.php or replace with previous code.

If you look at the PHP statemant, we used simple math to set the width of modules. So if we use 4
modules we want their size to be 25% each. We set it to 24% because of the IE6. Now if you want 5 modules your width, if all 5 are published, would be 20%. Only 4 modules 25% and so on . Also note that you can set fixed width like 200px but we recommend fluid layout.You can use this for Joomla 1.5 also . Just replace all instances of

mosCountModules with $this->countModules

and replace

<?php mosLoadModules('user4',-2);?> with <jdoc:include type="modules" name="user4" style="xtml" />

To do some additional modules styling you will need this css :

#mod1 .moduletable,#mod2 .moduletable,
#mod3 .moduletable,#mod4 .moduletable{
text-align:left;
padding:5px;
color:#fff;
font-size:1.1em;
}

#mod1 .moduletable h3,#mod2 .moduletable h3,
#mod3 .moduletable h3,#mod4 .moduletable h3{
text-align:left;
padding-left:5px;
color:#ff6600;
font-size:1.3em;
}

We used this method in all our templates and you can see them in action here.

Please contact us if you would like to place this article on your site.