September 2008

Untapped Potential with Joomla! Module Chrome

Arno Zijlstra reveals Joomla! 1.5 Designer Secrets

Written by Arno Zijlstra

When you are building a custom template you want all the power you can get to be able to do all the trickery you want or need.

In Joomla! 1.5+ there are a couple of new features to help you with that and I'll try to explain how to use the "Module Chrome" with the "Module suffix" in a couple of posts and this is Part One.

At the end you will have an example to work with for creating modules with crazy headers in different colors or with background images based on the module suffix.

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.

Reprinted from Woof and Warp with permission of article author, Arno Zijlstra.

Add Comment