The woof and the warp weblog about web stuff.

So what is module chrome?

Module chrome is really the html that is rendered around the actual module content when a module is loaded. If you had a look at a template index.php before you've probably seen tags like this:

<jdoc:include type="modules" name="right" style="xhtml" />

That tag means that all the published modules on position "right" should be rendered with style "xhtml". The style is the variable for "Module Chrome" or better the html that will wrap around the module content.

In Joomla! 1.0 there was no easy way to customize the html a module would generate but luckily in 1.5 this has changed. If you take a look inside the Joomla! default template (rhuk_milkyway) you'll see a folder called "html", in that folder you'll see a file called "modules.php". That file is where you can create your own custom module chrome.

/*
 * Module chrome for rendering the module in a slider
 */
function modChrome_slider($module, &$params, &$attribs)
{
	jimport('joomla.html.pane');
	// Initialize variables
	$sliders = & JPane::getInstance('sliders');
	$sliders->startPanel( JText::_( $module->title ), 'module' . $module->id );
	echo $module->content;
	$sliders->endPanel();
}

Above is the standard example function the core created, it renders html for sliding modules.

Let's create our own function with the html we will need for our crazy module headers.

/*
 * Module chrome for rendering the module as suffix block
 */
function modChrome_crazyheader($module, &$params, &$attribs)
{
?>
	<h3 class="mtitle-<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo JText::_( $module->title ); ?></h3>
	<div class="mbody-<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo $module->content; ?></div>
<?php
}

The html above plain and simple but it can be anything you want. To have a module or modules render with this html you'll have to go to your template index.php and change one of the module calls to this, the style attribute is what you want to change.

<jdoc:include type="modules" name="right" style="crazyheader" />

That's it, you are now able to create your own "Module Chrome" and with that manage the module html output your site will produce in the front-end. As with everything, don't be afraid to experiment and learn by falling and getting up again.

In the next post we'll have a look at what the module suffix is and what you can actually do with it.