Joomla Template Tutorial - Modules
Article Index
Joomla Template Tutorial
What is a Joomla Template?
Localhost Design Process
W3C and Tableless Design
The Template Components
Using CSS to create a layout
Modules
Menus
Hiding Columns
Conclusion
Appendix A:Tips and Tricks
Word and PDF Versions
All Pages
Page 7 of 12

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"
</tr
<tr
<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"
<tr
<th valign="top"
</tr
<tr
<td
</tr
</table
</td
<td align="top"
</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 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
<h3
Module output
</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 id="sidebar"
<div class="inside"
<?php mosLoadModules('left',-2);?
</div

</div

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

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

</div
</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:

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

<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*/ }
Last Updated on Thursday, 28 August 2008 09:17
 

Get Joomla Tips by RSS or Email

 

Joomla 1.5 BookGet the Joomla 1.5 Book

Get the #1 best-selling about Joomla 1.5 from Amazon and free access to the companion site, joomlabook.com.

 

 

2009 Classic Blog Posts

Popular Tutorials

Joomlashack News

Simplweb News

Joomla Book News