在index.php中调用模块的语法如下:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

style是可选的,可选值定义在modules/templates/html/modules.php中。style的可取值有 table,horz,xhtml,rounded,none,outline等,具体的表现形式请参考joomla官方文档。
你可以看到style取值为xhtml或者rounded时候,源代码更加简洁,更适合CSS,我们也推荐这两种,而且不是必要的时候不要使用table和horz。
打开modules.php文件,你可以看到所有的风格,你设置可以自由的添加自己的风格,以下的代码是xhtml的实现:

function modChrome_xhtml($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="moduletable">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?> »</h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif; ?>}

你可以自由的改变这个风格。(不过如果你想添加自己的风格,应该参考http://docs.joomla.org/Applying_custom_module_chrome,直接修改核心代码总是不爽的,译者)对于我们的模板制作,我们选择xhtml风格。全部代码如下:

<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="content">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>

注意,我们不能在<jdoc:include type="component"> 中设置style,因为模块并不支持。将模块设置为xhtml风格,可以把table的数量减少为14个,接下来我们添加一个foemat控制的CSS.同样还将添加 <H1> 标签,对于SEO的非常有帮助的。现在我们的CSS代码看起来如下:

/*typography*/* {
margin:0;
padding:0;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size: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*/ }