Creating a new module style (chrome) in Joomla!

Module styles, known as chrome in Joomla!, provide a way to change what Joomla! outputs into your page, on a module-by-module basis. Chrome in Joomla! templates effectively restyles the structure of the module(s) that is/are output into the page.

Getting ready

Module chrome is defined in Joomla! within the modules.php file in the \templates\system\html\ directory. As usual, we want to avoid editing core Joomla! files (such as this one), so we will copy the modules.php file into our template's own \html directory in \templates\rhuk_milkyway\html\modules.php, assuming that we're using the rhuk_milkyway template.

How to do it...

1. 1. To create a new module style for your Joomla! template, you need to add it to the bottom of the modules.php file that you just copied into your own template's directory:

   /*
   * Module style (chrome) that wraps the module in an unordered list
   */
   function modChrome_ullist($module, &$params, &$attribs)
   {
   ?>
   <ul class="<?php echo $params->get('moduleclass_sfx'); ?>">
   <?php if ($module->showtitle != 0) : ?>
   <li class="title">
   <?php echo $module->title; ?>
   </li>
   <?php endif; ?>
   <li>
   <?php echo $module->content; ?>
   </li>
   </ul>
   <?php
   }
   ?>
   

   Note that you gave the function a relevant name (modChrome_ullist). This is good practice, as it makes it more obvious to anyone else working on your Joomla! template what you're trying to do!

2. 2. If you now upload the modules.php file, your new module chrome will appear.

How it works...

By defining a new module chrome for our Joomla! template, we provide another option for the way the information in the page is structured with HTML. To define a new module chrome, we need three pieces of information (parameters) from Joomla!:

• The name of the module itself

• Any parameters associated with the module, such as the suffix value that is used to assign a CSS class to the<ul> element ($params->get('moduleclass_sfx'))

• Attributes of the module, in the previous case, this is the title ($module->title) and content ($module->content)

There's more...

1. 1. To see your new module chrome in the frontend of your Joomla! website, you need to open your template's index.php file (as you're using the rhuk_milkyway template, this is found in the \templates\rhuk_milkyway\ directory). Locate an instance of a jdoc statement in your template that makes use of the style attribute—a snippet of code that looks like this:

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

2. 2. You can change this to read:

   <jdoc:include
   type="modules"
   name="user1"
   style="ullist"
   />
   

3. 3. Alternatively, you could add the following line, code style="ullist" into a jdoc statement if one doesn't already exist. If you now view the frontend of your website, you'll see a visual change to the user1 module:

1. 4. There's also change behind the scenes in the HTML that is given. Previously, the HTML for this module looked like this:

   <h3>Latest News</h3>
   <ul class="latestnews">
   <li class="latestnews">
   <a href="(link omitted)" class="latestnews">Welcome to Joomla! </a>
   </li>
   <!-- other links omitted -->
   </ul>
   

2. 5. The new output HTML has changed structure:

   <ul class="">
   <li class="title">
   Latest News
   </li>
   <li><ul class="latestnews">
   <li class="latestnews">
   <a href="(link omitted)" class="latestnews">Welcome to Joomla! </a>
   </li>
   <!-- other links omitted -->
   </ul>
   </li>
   </ul>
   

See also

• Customizing Joomla!'s home page with module output override