mosLoadModules - An Explanation

Written by Cory | September 13, 2006 | (0)

At the Joomla! help site, there is a great article explaining the various functions to be used in a Joomla! template. It gives an explanation of the parameters involved in the mosLoadModules function, which often cause confusion for new template developers. You can either read that article, or if you don't feel like leaving this page, you can continue reading this article, which will explain the same concepts.

Here is the basic syntax of a mosLoadModules function call:

mosLoadModules( $position_name [, $style] )

$position_name

This parameter is pretty self-explanatory. It tells Joomla! where to display your modules.

$style

This is the parameter that causes some confusion. While $position_name tells Joomla! where to position a set of modules, $style tells Joomla! how to render the modules at $position_name. This parameter is optional. If you do not put a value for $style, it will default to $style=0.

There are 5 possible values for $style: 0, 1, -1, -2, -3. Below is an explanation of each value.

$style = 0

As I mentioned, this is the default value for $style. I personally never use this value because it renders each module in a table, and I don't like tables.

Here is how the code is rendered using $style=0.

 
<!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
  <tr>
    <th valign="top">Module Title</th>
  </tr>
  <tr>
    <td>
      Module output
    </td>
  </tr>
</table>
<!-- Individual module end -->
 

$style = 1

This is another value that I personally never use for the same reason as mentioned for $style=0. This $style renders each individual module the same as $style=0, but it wraps the modules in another table and displays them horizontally for that position.

Here is how the code is rendered using $style=1.

<!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="top">
      <!-- Individual module -->
      <table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
        <tr>
          <th valign="top">Module Title</th>
        </tr>
        <tr>
          <td>
            Module output
          </td>
        </tr>
      </table>
      <!-- Individual module end -->
    </td>
    <td align="top">
      <!-- ...the next module... -->
    </td>
  </tr>
</table>

$style = -1

Now we're getting to the good stuff. This $style tells Joomla! to just display the raw ouput of the module without the module's title. This can be very useful for displaying things like horizontal menu bars, because you do not need a title, and you probably want to handle the HTML around your menu in your template.

Here is how the code is rendered using $style=-1.

 
Module 1 OutputModule 2 OutputModule 3 Output
 

Notice here that there are 3 modules in this module position: "Module 1 Output", "Module 2 Output", and "Module 3 Ouput". Notice also that there is no space between "Output" and "Module" where the modules touch each other. That is because Joomla! does not do anything but place the raw output from each module.

$style = -2

When designing a template, this is perhaps the module position $style that I use most often. It renders modules the way modules should be rendered, within a DIV block with the title set apart by the H3 tag. This is the best solution for creating a template with proper modern XHTML/CSS techniques.

Here is how the code is rendered using $style=-2.

<!-- Individual module -->
<div class="moduletable[suffix]">
  <h3>Module Title</h3>
  Module output
</div>
<!-- Individual module end -->

$style = -3

This $style is good for performing some CSS styling tricks with your template. For example, if you want to display your modules with rounded corners, you could use this $style along with some CSS. It is basically the same as $style=-2 but it adds 3 "padding" DIV's around the output to enable designers to perform their CSS magic.

Here is how the code is rendered using $style=-3.

<!-- Individual module -->
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h3>Module Title</h3>
        Module output
      </div>
    </div>
  </div>
</div>
<!-- Individual module end -->

What does it all mean?

Joomla! is a flexible system, and it provides several options for designers to render modules. With the addition of CSS, the options are virtually limitless.

Trackback(0)

TrackBack URI for this entry

Comments (29)

Subscribe to this comment's feed

...
written by Troy, November 02, 2006

When showing the "basic syntax" you have:

mosLoadModules( $position_name [, $style] )

However, I'm thinking you meant to have:

mosLoadModules( $position_name , [$style] )

instead?

• 
• -2
• 
• 

...
written by Cory, November 02, 2006

@Troy: I actually copied that directly from the Joomla! site. I believe the comma should be inside the brackets because $style is optional, and therefore the comma is only needed when $style is included.

• 
• +2
• 
• 

...
written by L, December 12, 2006

Where do we find out what position_names are available?

• 
• +0
• 
• 

...
written by Cory, December 12, 2006

L: Good question. In your administrator panel, click Site->Template Manager->Module Positions. That will give you all of the module position names that are available, and it gives you space to add your own custom position names.

• 
• -1
• 
• 

...
written by James, December 18, 2006

Thanks for this. How would I edit the modLoadModules function, so that when using $style=1* I can change the cell spacing to more than 1? i'm actally using mambo 4.5.1, not joomla...

* yeah I can see the problems with tables but I've only just learnt how to do that much and the idea of rewriting my site to use is quite scary right now - any good pointers to a good tutorial on how "div" works, I can't seem to grasp that concept, while a table is at least quite intuitive. i need that "ah" moment with "div" i just had with "td" et al!

cheers for the tutorial anyway.

• 
• +0
• 
• 

...
written by Cory, December 18, 2006

@James:

The only way to modify the cell spacing without changing the core (NOTE: I do not recommend changing the core.) is in your template's CSS file. Since you are probably using tables for your layout, you would need to wrap the module position in a "td" tag with a class or id to help your CSS identify that tag. Then, you would add the following to your template CSS file:

td.yourclass table.moduletable td { margin: some_valuepx; }

I'm glad you see the need to learn CSS-driven design, and I understand that it is difficult to get past the initial learning curve. Here are some links that you might find helpful:

CSS Basics - Making Cascading Style Sheets Easy to Understand
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
Dynamic Drive CSS Layouts- Tableless, CSS based templates
Floatutorial: Step by step CSS float tutorial

I hope this helps.

• 
• -1
• 
• 

...
written by James, December 24, 2006

Cory, thanks for these.
I'm thinking it's maybe not a good idea to mix CSS and tables? if you look at www.blueskieschina.com in safari & firefox it looks ok. But in IE, somehow the browser doesn't like my code (and to "debug" is a ten minute walk to my girlfriend's PC... the dog likes this stage of the development!). Maybe I should be braver than just using DIV the once...? But if I could understand WHY IE is doing this, I'd feel a lot more comfortable. I did put a nbsp in the table cell. Stumped for now.
Have a good Christmas!
Cheers
James

• 
• +0
• 
• 

...
written by Cory, December 24, 2006

Hi James,

You've touched on a pretty common problem for designers. IE6 is terrible in terms of standards compliance. I could design a template for Firefox pretty quickly, but the extra time comes in when I need to make it work with Firefox, IE6, IE7, etc. The world would be a much better place for designers if all browsers rendered HTML/CSS the same. Unfortunately, they don't. I wish I could offer you a quick solution, but there is no quick solution. It's just a matter of trial and error and making it work the best you can.

Mixing CSS and tables is not a problem. I believe that the HTML code (including tables) should be used to identify the various sections of a page. As little style information as possible should be included in the HTML markup. Ideally, all of the style (layout, graphics, fonts, etc) should be handled in the CSS file.

Thanks for the comment, and Merry Christmas to you, too!

Cory

• 
• +0
• 
• 

...
written by mark, January 18, 2007

Hi,

In my template no style is specified, so I guess there is a 'default' style. Looks like:

mosLoadModules ( "right" );

So which is the default style?

Thanks,
Mark

• 
• +0
• 
• 

...
written by Cory, January 18, 2007

Hi Mark,

Great question! If you do not put a value for $style, it will default to $style=0.

Cory

• 
• +0
• 
• 

...
written by Brock McGee, May 20, 2007

Hi, the css part of making round corner modules seems easy enough, but this part about the $style suffix doesn't make sense to me.

Where does one set the suffix to -3 and what is that other gibberish mean here:

Module Title
Module output

??? That looks like it defines rounded corners for only one module at a time. Will this work for all of my modules or only ones in a particular position or with a particular name. Where would I put this code? At what point is the -3 parameter even defined within this?

Sorry, I think one must be well versed in code to understand this. I'm afraid I'm not.

• 
• +0
• 
• 

...
written by Cory, May 21, 2007

Hi Brock,

It does indeed help if you understand the code behind what is going on. In the template's index.php file, you would use the mosLoadModules php command to load a module position. You pass a couple of parameters to that command to tell it a) the name of the position, and b) the style of the position. The name is the straight forward part. The style is a little tricky. Based on the number you give for the style (-3, -2, -1, 0, 1), Joomla will render each module in that position in a certain way.

For example, if you want to do rounded corners for each module in the "left" module position, you would use



That tells Joomla to output the HTML in such a way that you can use CSS to create the rounded corners effect.

I hope all of that makes sense.

Cory

• 
• +0
• 
• 

...
written by bram, July 25, 2007

I'm using Joomla 1.0.13 and I'm designing a new layout.
I'm using mosLoadModules( 'left', -2 ); in my template, but Joomla keeps on generating tables instead of divs.
I'm looking for a solution, but cant find any. Is there another variable I need to set in order to get rid of tables?

Thanks,

Bram

• 
• +0
• 
• 

...
written by Max, August 16, 2007

Hi Cory,

As an o l d hack I really appreciate your work, enthusiasm and the fact that you put your church and faith out there on your site ... Thanks. God Bless and keep up the good work.

• 
• +0
• 
• 

...
written by Cory, August 16, 2007

Hi Max,

Thank you for the kind words.

Cory

• 
• +0
• 
• 

...
written by Wirayudha Rohandi, September 18, 2007

thank you, that's it!

• 
• +0
• 
• 

...
written by aravind, September 20, 2007

ur website not impressive what i need step-by-step for creating templates from last to end and how to
use that template using CMS

• 
• +0
• 
• 

...
written by Cory, September 20, 2007

Hi aravind,

I'm sorry that this was not helpful to you. You might want to look at this article: http://www.howtojoomla.net/content/view/20/2/ . It shows how to create a basic template in Joomla!, and it has links to other template tutorials.

Good luck!

• 
• +0
• 
• 

...
written by Marco, September 24, 2007

This article was quite helpful.

However can you please recommend the best way to horizontally place two or more modules in the same position ie. advert, without any space between the two modules. What is the best way to go about doing this.

Thanks in advance.

• 
• +0
• 
• 

...
written by Den, October 04, 2007

Where to get picture graphically showing a position of the each CSS elements for rhuk_solarflare template? (header_outer, top_outer, top_inner, other... )

• 
• +0
• 
• 

...
written by akin mayor, March 17, 2008

Hi Cory,
Your article made a very interesting readig to me and I have learnt a lot from it. I hiwever still need your guidance in line with the following:
1. When I code mosLoadModules("left"), how do I determine which modules are located in this 'left position?
2. Also, how do I place a new module (written by me eg. calendar) in one of the positions 'left', 'right', 'user1' etc. ?
Thanks.
-- Akin

• 
• +0
• 
• 

...
written by Sina, March 27, 2008

Hi Cory,
This article is excellent for beginners such as myself. My question is the same as Marco's. How do I get 2 modules to occupy the same position, such as having one float right and the other centered? Is this even possible?
Thanks!
--Sina

• 
• -1
• 
• 

...
written by dk, May 08, 2008

Dear Friend

How can change this one ?

• 
• -1
• 
• 

...
written by Angela, August 21, 2008

Module mosLoadModules can be found in what file (.php) ?
Thanks.

• 
• +0
• 
• 

...
written by Cory, August 21, 2008

mosLoadModules is a function in Joomla 1.0 that you use in a template to load a module position. It is used in the template's index.php file.

• 
• +0
• 
• 

...
written by joomla, November 04, 2008

Hi cory, i love you

• 
• -1
• 
• 

...
written by mark weatherill, November 26, 2008

Hello Cory

Thanks for the helpful articles. I am a Joomla beginner and am trying to create a custom template consisting of a header image at the top, under which is a row of buttons ('About', 'Contact', 'Callback', 'News', etc).
Under that is the main content area and then at the bottom the footer image.
In the Site Modules page, i have all modules unpublished except for 'Top Menu', which has a position of 'top'.
In the 'Menu Manager' [topmenu] page i have two menu items.
In the index.php file in the templates/mywebsite directory, i have the following :

















The problem is this: the two menu items are rendering as hyperlinks and i'd like to make them buttons. Where do you do the requisite styling?
Cheers,
Mark Weatherill.
p.s. am using Joomla! 1.0.15, a Xitami web server and Vista.

• 
• +0
• 
• 

...
written by tina, January 12, 2009

hi, I'm new to joomla and I want to create my own template using your method.
But the result turns out "Call to undefined function mosShowHead()/mosLoadModules() in........"
What's the problem? could you tell me how to solve it?

• 
• +0
• 
• 

...
written by Cory Webb, January 12, 2009

Hi tina... this only applies for Joomla! 1.0. Building a template in Joomla! 1.5 is different. I will try to post a Joomla! 1.5 template tutorial in the near future. In the meantime, you should check out the template tutorial at www.compassdesigns.net.

• 
• +0
• 
• 

Write comment

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment Preview