Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Joomla! 1.5 Templates Cookbook
  • Table Of Contents Toc
Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook

3.7 (3)
close
close
Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook

3.7 (3)

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)
close
close
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

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Joomla! 1.5 Templates Cookbook
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon