Cory Webb's How to Joomla!

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 URI for this entry

Comments (23)

Subscribe to this comment's feed

Troy: ...

When showing the "basic syntax" you have:

mosLoadModules( $position_name [, $style] )

However, I'm thinking you meant to have:

mosLoadModules( $position_name , [$style] )

instead?

1

report abuse

vote down

vote up

November 01, 2006
Votes: +0

Cory: ... http://www.howtojoomla.net

@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

report abuse

vote down

vote up

November 02, 2006
Votes: +0

L: ...

Where do we find out what position_names are available?

3

report abuse

vote down

vote up

December 12, 2006
Votes: +0

Cory: ... http://www.howtojoomla.net

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.

4

report abuse

vote down

vote up

December 12, 2006
Votes: -1

James: ...

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.

5

report abuse

vote down

vote up

December 18, 2006
Votes: +0

Cory: ... http://www.howtojoomla.net

@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.

6

report abuse

vote down

vote up

December 18, 2006
Votes: +0

James: ...

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

7

report abuse

vote down

vote up

December 23, 2006
Votes: +0

Cory: ... http://www.howtojoomla.net

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

8

report abuse

vote down

vote up

December 23, 2006
Votes: +0

mark: ...

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

9

report abuse

vote down

vote up

January 18, 2007
Votes: +0

Cory: ... http://www.howtojoomla.net

Hi Mark,

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

Cory

10

report abuse

vote down

vote up

January 18, 2007
Votes: +0

Brock McGee: ...

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.

11

report abuse

vote down

vote up

May 20, 2007
Votes: +0

Cory: ... http://www.howtojoomla.net

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

12

report abuse

vote down

vote up

May 20, 2007
Votes: +0

bram: ... http://smallstar.org

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

13

report abuse

vote down

vote up

July 25, 2007
Votes: +0

Max: ... http://www.truthandlib.org

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.

14

report abuse

vote down

vote up

August 16, 2007
Votes: +0

Cory: ... http://www.howtojoomla.net

Hi Max,

Thank you for the kind words.

Cory

15

report abuse

vote down

vote up

August 16, 2007
Votes: +0

Wirayudha Rohandi: ... http://rohandi.com

thank you, that's it!

16

report abuse

vote down

vote up

September 17, 2007
Votes: +0

aravind: ... http://gmail

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

17

report abuse

vote down

vote up

September 19, 2007
Votes: +0

Cory: ... http://www.howtojoomla.net

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!

18

report abuse

vote down

vote up

September 20, 2007
Votes: +0

Marco: ...

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.

19

report abuse

vote down

vote up

September 24, 2007
Votes: +0

Den: ...

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

20

report abuse

vote down

vote up

October 04, 2007
Votes: +0

akin mayor: ...

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

21

report abuse

vote down

vote up

March 17, 2008
Votes: +0

Sina: ...

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

22

report abuse

vote down

vote up

March 26, 2008
Votes: +0

dk: ... http://www.ashaonline.com

Dear Friend

How can change this one ?

23

report abuse

vote down

vote up

May 08, 2008
Votes: +0

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Add Comment