Resources

Creating Basic Modules

Mast Head Modules

This document is a guideline for anyone creating a Joomla 1.0.x module without external files. It will cover the basics for maintaining and publishing a custom module used in your Joomla Templates. Although its aimed at header modules (modules positioned top) the processes covered will be universal to all Joomla modules. Although written using examples in Joomla 1.0.x its content will be cross Joomla version compatible.

 
 

Document Index

   1.      Introduction

   2.     Module Details/Parameters/Custom output/Pages

   3.     Creating and editing Modules

   4.     Creating basic content

   5.     Creating advanced content

   6.     Uploading Images for Modules

   7.     Uploading Media for Modules

Introduction

Editing the content for page headers (modules) is fairly straight forward once the process has been done once. Modules can be installable external plug ins to Joomla which bring additional functionality. Or build upon existing functionality of default or 3rd party extensions. Like the 'Latest News' module or 'Who's on line', both of these rely on .hp and .ml files to function. These modules are fairly advanced as you'll need to know PHP and XML (probably XHTML and CSS also for layout). We'll be creating the simplest of all modules to start with, then mix things up a bit by throwing some media into it. Why would you want to publish such a simple module? It's very handy if you ever need to post a head line on every page of your site. Or display media associated with specific content. The next section on details/parameters/custom output/pages is a guide and a good starting point for any first timers. If you're familiar with Joomla modules you may wish to skip this section, other wise read on.

Module Details/Parameters/Custom Output/Pages

If you're new to modules here is a quick guide to the options available. Some of which are self explanatory and some are a little less obvious. This is a non technical guide and is intended for practical use only. The 'Parameters' in the kind of module we'll be creating are specifically for RSS feeds and will not be covered here, leave them as default. On the more advanced (externally installed) modules Parameters will vary depending on what the developer has specified in the XML file. The options we're interested in are the details, pages, and mainly the custom output area.

Details

   1.      Title

This is a good example of a self explanatory option. It is the title of our module. If

the below option is set to 'yes' it'll be published on the front end of our site. It's

always handy to give it a relevant title for future reference. This option will be

displayed in the admin area of our site when viewing the list modules.


   2.      Show title

This only influences the front end display of our module title. The title is still used as a reference in the admin area of the site. If your Joomla template has CSS styles for module titles then you may chose to publish the title. I usually select 'no' and apply my own title (if required) in the custom output area.

   3.      Position

This is a little obscure if you're unfamiliar with Joomla speak. You'll need to check your Joomla template for what positions are available. How to check this is explained later. This option controls where on the site the module will be published. In the example of this document we're looking for 'top' or equivalent position.

Note: You may experience frustration if your module is not published in the correct position (or if it's published in a module position that doesn't exist which can happen in Joomla 1.0.x).  

4.      Module Order

Very important if you're publishing a module in the left or right column. Another course of frustration can be that you have multiple module positions in one column eg. You may have position 'user1' above position 'left'. This will be hard coded into the Joomla template, which is unchangeable unless you feel confident and wish to get your hands dirty (edit some code). So no matter if it's ordered very very top if its position 'left' it'll always appear under the modules of 'user1' (hope that makes sense...). In the case of a header module it can become a skillful CSS juggling act if more than one module is published in a header position. The reason being without specific settings applied to the XHTML the content of the modules, it can (thats a maybe) appear off centered on the page or to the extreme left or right of the page. In this document we're going for a Header module so lets pick the very very top most option.

Note: This option is available from the module list and can be changed using the little blue arrows. So don't fret too much about selecting the correct order off the bat as its easy to change.

   5.      Access level

A more advanced option here. This is only reliant if you have multiple 'user types' active on your site eg. You have content that is only relevant to certain groups or if you chose only to display certain content to your registered users, then select 'Registered'. The option 'Public' in non Joomla speak means “everyone that comes to your site”. This is up to you to decide on which option is best. While learning I'd pick 'Public'.  

6.      Published

This is hopefully self explanatory. This option controls if a module is displayed on the front end of your site. Will default to 'No' if a module is 'Copied' as we'll talk about later. If you're happy with your module and want to see how it looks on the front end select 'Yes'.

Note: This option is also available from the module list and can be changed without having to go into the module settings. 

  7.      ID

This is a reference to anyone attempting more advanced module functionality. It references the database's unique id thats been assigned to the module created.

   8.      Description

In the module we're creating it'll display as 'Custom Module'. With more advanced modules this description will be set by the developer.

Parameters

It is not necessary to go over all the parameters in this document. They do not influence the type of module we'll be creating.


   1.      Module Class Suffix

This can come into play if your template has classes that you can use eg Subtle Grey Bear In this template if you enter 'frame' in this option you'll get a background image of a frame. It is intended to have a graphic inside it so this particular 'frame' module will only look pretty if you've inserted a image into the custom output area.

You'll need to check your template instructions for details on any class suffixes available.

Custom Output

      1. There is only input field here. It is usually known as a WYSIWYG (what you see is what you get) editor. For a more controlled environment its often necessary to edit the HTML in its natural state. The WYSIWYG editor will try to display the text and any media without any of the HTML tags. This is great if you're just editing existing content allowing you to focus more on the content you're writing. But can be undesirable if wanting specific control, especially when embedding flash movies. There are a lot of bells and whistles to use with the WYSIWYG editor. And there are multiple options for you to install in your Joomla system. The Output area is where all the content and HTML goes that will be displayed on the front end of your Joomla template. It's important to understand if you don't know HTML that this editor is a means of inserting HTML into a page. And although very useful it's not always accurate, for complete control it's best to view the HTML. And if you plan on doing a lot of work on you site I highly recommend learning a little HTML it'll save you heaps of grief.

Creating and editing Modules

To start with we'll need a module to edit. Joomla offers many great features to the non technical web master. One of which is the 'New' module Button found at top left of the modules section. Navigate to 'Site Modules' to bring up the module control panel and click 'New'.

 



 

This will bring up a module editing screen. All settings and content will be saved once 'Save' or 'Apply' is clicked. The minimum amount of content to allow you to save the new module is the module title. Select 'no' for the show title option. In the case of this document we're interested in header modules which will probably hold a page introduction of some kind, weather it's content or media, page titles I find are a little redundant here.


We'll use the text editor to insert some content. Then we'll use the tools available to us to insert an image into our text. Then we move to some more advanced stuff for any one feeling confident and edit the raw HTML to control how our image is displayed. And finally for the really bold upload and embed flash. This last step becomes a little complicated because you'll need to know some flash to get your .swf file. I'm going to assume you have one already.

 


 


So nows a good time to save or apply your module with these settings selected.

Note: Position will be specific to your template in Subtle Grey Bear its position user9.

Creating Basic Content

This has to be the briefest section of this document. Basic content involves typing something into your custom output area. When creating Subtle Grey Bear I first typed my desired text 'Subtle Grey Bear'.

 


 

Now moving on....

Creating Advanced Content

This section uses the Subtle Grey Bear header as an example the we will discuss whats involved in customizing content.


Highlight all the text and in the drop down box where it says '-Format-' select Heading 1.
Module H1

 

All this does in the HTML is wrap the selected text with <h1>.....selected text.....</h1> thats all. So if I looked at the code I'd see '<h1>Subtle Grey Bear</h1>'. If you didn't know HTML before reading that you do now so stop telling yourself you don't. It's easy to pick up and you'll only need to know a couple of things like the above example and you'll know all you need to know (for editing Joomla Modules). That h1 stands for 'heading one' its not technical once you know what it stands for. I'll break it down even more for ya, 'heading' thats the heading for something and '1' which is how important is this heading? '1' is very important and it degrades right down to '6' (h1, h2, h3, h4, h5, h6).


So now you know some HTML now you'll learn some CSS wow! Because I didn't have user friendliness in mind when creating this template you have to do one extra step to get it to look like the demo. But if I didn't do this you wouldn't be learning CSS. I won't go into the details here but CSS is also quite simple. It becomes a lot easier when you know some HTML. To insert custom CSS styles you'll need access the HTML (just to let you know I'm using the default WYSIWYG editor, if yours looks different another one has been installed but will have a similar option). Click the HTML button
H1 Example

 

And you'll get a pop up window. Now you need to give your H1 (heading one tag) an ID.


Q: Is that complicated?

A: Only at first.


What we're looking for is called the 'opening tag' in HTML. Any thing within <...> is called a tag. And 90% of the time there is a pair, one opens and the other closes. The opening one is the one that comes first. Now type id=”siteHeader” indicated in the graphic, TYPE it don't copy and paste it if learning.

Before:


 

After:

 
H1 ID

 

Simple eh.

Ok you can update that now.
Joomla Module Update

 

If you've followed this far and you're using 'Subtle Grey Bear' you'll end up with.
Module Complete