| Joomla Template Tutorial - Modules |
|
Page 7 of 12
ModulesWhen 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
<!-- 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
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
<div class="module"
<div <h3 Module output </div </div
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.
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 |
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.