Customizing Joomla!'s home page with module output override

Module overrides allow you to change what Joomla! outputs at a module level rather than a component level. This is what output is for the content surrounding a specific module, rather than around the component, which usually involves the entirety of a page.

In this recipe, you'll look at how you can use module overrides in Joomla! to change the Latest News module in the rhuk_milkyway Joomla! template. By default, this module appears on your home page towards the top-left of the main content block:

Getting ready

Copy the default.php file located in \modules\mod_latestnews\tmpl\ to the \templates\rhuk_milkyway\html\mod_latestnews\ directory. This file contains a mix of HTML and PHP that outputs the latest news on your website into the home page.

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<ul class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php foreach ($list as $item) : ?>
<li class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo $item->text; ?></a>
</li>
<?php endforeach; ?>
</ul>

How to do it...

1. 1. Your aim is to add a clearer indication that the content is new, so change this to read:

   <?php // no direct access
   defined('_JEXEC') or die('Restricted access'); ?>
   <ul class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
   <?php foreach ($list as $item) : ?>
   <li class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
   <a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>"> <span class="new-content">New!</span> <?php echo $item->text; ?></a>
   </li>
   <?php endforeach; ?>
   </ul>
   

2. 2. Lastly, you'll add some style to your template's template.css file in the \css directory of your Joomla! template:

   span.new-content {
   color: #C00;
   font-size: 90%;
   text-transform: uppercase
   }
   

3. 3. If you upload and refresh the page, you'll see your changes, as shown in the following screenshot:

How it works...

Joomla! checks in the currently enabled template's \html directory for the HTML to output for a specific module, before looking in the module's default \tmpl directory.

There's more...

Overriding the module template means that you are affecting the content output by the Joomla! module. If you want to change the title or structure of the HTML surrounding the module content itself, you would need to change the module chrome (also known as module style).

See also

• Customizing Joomla! articles with component template overrides

• Creating a new module style (chrome) in Joomla!