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.
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.
1. To create a new module style for your Joomla! template, you need to add it to the bottom of the
modules.phpfile 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. If you now upload the
modules.phpfile, your new module chrome will appear.
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)
1. To see your new module chrome in the frontend of your Joomla! website, you need to open your template's
index.phpfile (as you're using the rhuk_milkyway template, this is found in the\templates\rhuk_milkyway\directory). Locate an instance of ajdocstatement in your template that makes use of thestyleattribute—a snippet of code that looks like this:<jdoc:include type="modules" name="user1" style="xhtml" />
2. You can change this to read:
<jdoc:include type="modules" name="user1" style="ullist" />
3. Alternatively, you could add the following line,
code style="ullist"into ajdocstatement 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:
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>
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>