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
 

Joomlashack University!

If you want online classes delivered to the comfort of your own home, then you need to join Joomlashack University - an affordable online Joomla training course taught by the world's leading experts in Joomla education.

If you are struggling with Joomla and want expert help, then fill out the form below. We'll send you some more information and you'll be first in line join the easiest and fastest way to learn Joomla.



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

Simplweb News

Joomla Book News

Joomla 1.5 Templates from CompassDesigns.net