How do I fix this module style issue in Joomla 3.0 - templates

Question

I have a CSS class like this:
.divTourCategorySummaryBoxLeft, .divTourCategorySummaryBoxRight {
width: 98%;
min-height: 350px;
border: 1px dashed #9CAAC6;
padding: 2px;
margin-bottom:3px;
background: #DEE7EF;
color: #000063;
line-height: 1.4em;
display:block;
overflow:auto;
}
Then I include the module like this in index.php:
<div class="divTourCategorySummaryBoxRight">
<jdoc:include type="modules" name="modTourCategorySummaryRight" />
</div>
This appears perfectly. Howerver, I need to have multiple modules of this on the same page. So when I add nother module it appears in the same div. This is not the way I want it. For every module, there must be a separate div. And the number of modules is unknown.
So I tried this:
<jdoc:include type="modules" name="modTourCategorySummaryLeft" style="divTourCategorySummaryBoxLeft" />
But the styling fails here. How do I get this to show a new set of divs for each module?
Please advise.
This is my own template I built from scratch looking at the joomla docs. I'm pretty new to this.
Thanks!

Answer 1

You need to create a new module chrome. In your template html folder, create file called modules.php.
Inside, make a function like this
defined('_JEXEC') or die;
function modChrome_customstyle($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="divTourCategorySummaryBoxRight">
<div class="moduletable">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
<?php endif;
}
This way you can create custom module outputs.
Then, in your template file, include the module like this:
<jdoc:include type="modules" name="modTourCategorySummaryLeft" style="customstyle" />
After adding style="customstyle" your new function will be used to render the module. The default style is xhtml, and you can find it's code in the templates/system/html folder in modules.php file