Book Image

Joomla! 1.5 Templates Cookbook

Book Image

Joomla! 1.5 Templates Cookbook

Overview of this book

Templates in Joomla! provide a powerful way to make your site look exactly the way you want either using a single template for the entire site or a separate template for each site section. Although it sounds like an easy task to build and maintain templates, it can be challenging to get beyond the basics and customize templates to meet your needs perfectly.Joomla! 1.5 Templates Cookbook consists of a series of self-contained step-by-step recipes that cover everything from common tasks such as changing your site's logo or favicon and altering color schemes, to custom error pages and template overrides. It starts off with the basics of template design and then digs deep into more complex concepts. It will help you make your site more attractive and user-friendly. You will integrate your site with various social media such as Twitter and YouTube; make your site mobile-friendly with the help of recipes for creating and customizing mobile spreadsheets; and use miscellaneous tricks and tips to get the most out of your website. You get all of this in a simple recipe format that guides you quickly through the steps and explains how it all happened.
Table of Contents (16 chapters)
Joomla! 1.5 Templates Cookbook
Credits
About the Author
About the Reviewers
Preface

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!