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
 

Build a Successful Joomla Website Today

Want a Joomla website, but don't have an IT department?

Simplweb provides fully managed Joomla hosting on high performance cloud servers. Unlimited support on Joomla, managed backups, security and updates.

Find out more how Simplweb can make Joomla... "Simpl" and start building a successful Joomla webiste with our free month trial. 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 SaaS Hosting

Free Joomla Book

Sign up for Joomla Hosting at Simplweb and we'll send you a free signed copy of the best-selling Joomla - A User's Guide when your subscription starts!

Get Joomla Tips by RSS or Email

 

Joomla 1.6 Book

Get the NEW Joomla 1.6 Book

The new 3rd edition of the best selling Joomla 1.6 book is now available.

New and updated, its everything you need to know about Joomla 1.6!

Get it now from Amazon!

jenbookJoomla! Start to Finish Book

When you're ready to take your Joomla sites to the next level, try Joomla! Start to Finish: How to Plan, Maintain and Execute Your Website.

 

 

Teaching Sells

Classic Blog Posts

Popular Tutorials

Simplweb News

Joomla Book News

Joomla 1.5 Templates from CompassDesigns.net