Book Image

Joomla! 1.5 Templates Cookbook

By : Richard Carter, Chris Davenport
Book Image

Joomla! 1.5 Templates Cookbook

By: Richard Carter, Chris Davenport

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

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