Joomlashack

Joomla Template Tutorial - Modules

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

Visit PressShack, our WordPress site

Since 2005, Joomlashack has been a leading supplier of free and commercial Joomla templates, Joomla extensions, and Joomla Training.
Joomlashack.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

 

 

Joomlashack recommends Joomla Hosting by InMotion Hosting