Joomla Chrome and Template Overrides

When you developing a template for a new site you often get stacked, and hit your head against the wall: the code outputted by Joomla sometime severely limits your ability to format the output as you wish. This is true not only for Joomla 1.0.*, but partially for the Joomla 1.5.*. Yes, partially, because you can do things here - and you can do a lot. Searching for a solution for a problem I had run into developing a template for one of my clients I found this great tip of Jonathan on his blog on http://www.beckettwebdesign.com:

While working on a client project recently, I had to delve further than ever before into the templating engine within Joomla, and thought recording some tips may be beneficial both for the community and for myself - because I will most likely forget everything I learned.

The Problem - Overriding Joomla Module Styling

If you have looked at building your own Joomla templates, you may have tripped over this already. Overriding the HTML template for a module (such as mod_newsflash) only replaces the list part of the module. It doesn't replace the "container" - the heading, and surrounding HTML elements.

It turns out the containing HTML, or "wrapper" is called Chrome in Joomla terms, and can be overridden too - although in a different way than normal template overrides.

A Working Example

First, we will imagine we have our own Joomla template, and that it has a position within it called "latest-news" - the code within the template may look like this:

<jdoc:include type="modules" name="latest-news" style="xhtml" />

Normally, we would just make a folder within our template, and make a modified version of the existing component view file. The core file would come from here...

/components/mod_newsflash/tmpl/_item.php

... and put the file (with your changes) in ...

/templates/[template_name]/html/mod_newsflash/_item.php

As discussed earlier though, this only changes the internal contents of the component - not it's title, or surrounding HTML elements.

To do that, we have to make or modify the "modules.php" file in the template html subdirectory. The "modules" file sets out the Chrome used by Joomla to wrap components with. All will become obvious once you see the new function we will write within the modules file.

We make the following text file (if it doesn't already exist)...

/templates/[template_name]/html/modules.php

... and within it, we write the following...

<?php
function modChrome_foo($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>

<div>
<?php if ($module->showtitle) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>

<?php endif;
}
?>

The trick here is the name of the function. Notice the "foo" bit? If you change the position in your original template file to have the style "foo" instead of "xhtml" as follows:

<jdoc:include type="modules" name="latest-news" style="foo" />

... and you suddenly have complete control over the wrapping of modules (through the modules.php file), as well as their content (through the template overrides).


All kudos are going to Jonathan who published the tip on his blog at http://www.beckettwebdesign.com