Joomla! Documentation™

Under Construction

module tutorial

Introduction

This is a multiple article series on how to develop a module for Joomla! version Joomla 3.x. We go step by step from basic functionality to some more advanced. At the end of the tutorial we'll use your custom module to show you, how you can use the powerful output override ( = change ) methods provided by Joomla!. The only prerequisite for overrides is that the module or component comply to the Joomla! best practices. Navigate the articles in this series by using the navigation box to the right (the Articles in this series). Start with the first and follow them one by one. The next article builds on the knowledge and the files from the previous.

A Tip!

In this step we'll use your custom module to show you how you can use the powerful Joomla! methods to override ( = change ) the output. The same possibilities are valid for all modules and components that follows the Joomla! best practice.

Your site template

As you probably know, your template is found under the templates/ folder in your Joomla! directory. The folders important for our overrides are:

• yourtemplate
  • css
    • mod_yourmodule
      • yourmodule.css

.....

• • html
    • com_mycomponent
      • view1
        • default.php
      • view2
        • default.php
    • layouts
      • joomla
        • content
          • info_block
    • mod_yourmodule
      • default.php
      • alternative.php
  • images
    • mod_yourmodule
      • yourmodule-logo.png
  • js
    • mod_yourmodule
      • yourmodule.js

If we add files in those directories they will be used instead of the extensions files. You can use the Template Manager to easily create overrides in the html path. J3.x:How to use the Template Manager

We can also override css, images and javascripts that are loaded with the JHtml functions and 'relative' to the media/ folder. We'll show this with the custom module you have created in this tutorial.

Use the Template Manager or your file manager to copy the default.php from the /tmpl folder in your module to yourtemplate/html/mod_yourmodule/. Open the copy with your editor and make some visual changes. If you now refresh the browser page you'll see the changes.

Copy the yourmodule.css file from media/mod_yourmodule/css to yourtemplate/css/mod_yourmodule/. Open this file and change css classes e.g. text to another color. Teloed the page in the browser. Be aware of the browser cache. It can be that you have to clear it to get the changed css loaded.