Joomla Template Tutorial - Modules

Article Index

Modules

When a module is called in the index.php, it has several option on how it is displayed. The syntax is:

mosLoadModules('$position_name'[, $style] )

The $style is optional and can be 0, 1, -1, -2 or -3.

0 = (default display) Modules are displayed in a column. The following shows an example of the output:

<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>Module output</td>
</tr>
</table>


1 = Modules are displayed horizontally. Each module is output in the cell of a wrapper table. The following shows an example of the output:

<!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td align="top"> <table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td> Module output</td>
</tr>
</table>
</td>
<td align="top"> <!-- ...the next module... -->
</td>
</tr>
</table>


-1 = Modules are displayed as raw output and without titles. The following shows an example of the output:

Module Output

-2 = Modules are displayed in CSS format enclosed by a <div>. The following shows an example of the output:

<div class="moduletable">
<h3>Module Title</h3>
Module output
</div>


-3 = Modules are displayed in a format that allows, for example, stretchable rounded corners. If this $style is used the name of the <div> changes from moduletable to module. The following shows an example of the output:

<div class="module">
<div> <div> <div>
<h3>Module Title</h3>
Module output
</div> </div> </div>
</div>


As you can see the CSS options (-1, -2 and -3) are much leaner in code and make it easier to style the web pages. This author does not recommend using suffixes of 0 (default) or 1 unless absolutely needed.

To develop our template, we will put a module $style of "-2" on all of our modules:

<body>
<div id="wrap">

<div id="header">
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top',-2);?>
</div>

<div id="main-body">
<div id="content">
<div class="inside">
<?php mosMainBody(); ?>
</div></div>

<div id="sidebar">
<div class="inside">
<?php mosLoadModules('left',-2);?>
</div></div>

</div> <!--end of main-body-->

<div id="sidebar-2">
<div class="inside">
<?php mosLoadModules('right',-2);?>
</div></div>

<div id="footer">
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?>
</div>

</div> <!--end of wrap-->
</body>

Note that we cannot put these module styles on any of the following as they are not modules.

  • <?php echo $mosConfig_sitename; ?>
  • <?php mospathway() ?>
  • <?php mosMainBody(); ?>
  • <?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?>

Setting the modules to a CSS presentation has reduced the number of tables to 14. Let's now add some simple styling to the template to get the result shown below:

2nd Version after styles added

First we will place the site title inside an <H1> tag. Its more semantically correct and will also help in SEO.

<h1><?php echo $mosConfig_sitename; ?></h1>

We will also add some CSS to style the modules with a border and a background for the header.

Our customize.css now looks like this:

/*Compass Design Customize.css file */ * {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
margin:0.5em 0;
}
ul{
margin-left:2em;
}
fieldset{
padding:.5em;
}
body{
font-size:76.1%;
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.3em;
margin:1em 0;
}
#wrap{
border:1px solid #999;
background: url(../images/threecol-r.gif) repeat-y 75% 0;
height:100% !Important;
height:1%;
}
#wrap-inner {
background: url(/../images/threecol-l.gif) repeat-y 25.125% 0;
height:100% !Important;
height:1%;
}
#header{
border-bottom: 1px solid #999;
padding:10px;
}
#footer{
border-top: 1px solid #999;
padding:5px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
line-height:1.7em;
}
h2,.contentheading{
font-size:1.5em;
line-height:1.5em;
}
h3{
font-size:1.3em;
line-height:1.3em;
}
h4{
font-size:1.2em;
line-height:1.2em;
}
h5{
font-size:1.1em;
line-height:1.1em;
}
h6{
font-size:1em;
line-height:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px;
/*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }