Did you know you can dynamically wrap modules in div tags within your Joomla! templates to make it tableless? For some this is old news, but for new users this could be a dream come true (I know it was for me when I first found out about them). With this knowledge, you can make your template validate XHTML and CSS, and almost WAI 1.0 Priority 1 in a default install of Joomla!

Step 1

I guess the obvious should be said first… make your Joomla! template without any tables. If you need help with this then please visit this page on our site to get a tableless layout to start with. After you find one that fits what you want then insert the modules into your template where you want your text to go.

Step 2

You may have noticed in some example templates that there are numbers after some of the module names (ex. < ?php mosLoadModule ( 'left', -3 ); ?>. This is where the magic happens! Just follow the list below to figure out what fits your needs the best…

• < ?php mosLoadModule ( 'left', -1 ); ?>
  No code goes around the module and no title.
• < ?php mosLoadModule ( 'left', -2 ); ?>
  Wraps the entire module in a div class=”module” with the module’s title in an h3.


<div class="module">
<h3>Title</h3>Module Info
</div>


• < ?php mosLoadModule ( 'left', -3 ); ?>
  Creates 3 extra divs along with the h3 title tag to give you flexability with the module container. We will be adding a section just for code to add to your style sheets to get special borders and other effects with this style sometime soon.


<div class="module">
<div>
<div>
<div>
<h3>Title</h3>Module Info
</div>
</div>
</div>
</div>


• < ?php mosLoadModule ( 'left', -4 ); ?>
  Wraps the module in a table (not what we want here, but wanted to let you know anyway).


<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">
Module Title
</th>
</tr>
<tr>
<td>
Module info
</td>
</tr>
</table>

Step 3

The last part is to make your menus display as Flat lists.

Go to your module area and select main menu (or whatever you named your main menu). Under Parameters go to the fourth selection down where it says Menu Style. Change it to Flat List. This will make your menu as an unordered list instead of a table (which the other selections do).

<ul id="mainlevel">
<li>
<a href="page1" class="mainlevel" id="active_menu">Page 1</a>
</li>
<li>
<a href="page2" class="mainlevel" >Page 2</a>
</li>
</ul>

Since the menu module that comes with Joomla doesn’t display child menu items you may want to use a third party menu module. I recommend using Extended Menu (http://de.siteof.de/extended-menu.html) if you are in need of more options. This will give you so many options that your head will spin. It can do anything you ever imagined with unordered list menus and they have some good downloadable menu systems for free as well, such as Suckerfish Menus and tree menus. They plug directly into Extended Menu’s administration area for ease of use.

We hope this has helped shed some light on the world of Tableless Joomla! Templates. We will be adding much more information to help ease your transition into this new and exiting world of accessible web design. Joomla! truly is the best CMS available for accessible web sites that I’ve ever seen and we hope more will people jump on board.