How to make Joomla! templates without tables

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 it). 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. After you find one that fits your style, insert the modules into your template where you want your text to go.

Step 2

You may have noticed that there are numbers after some of the module names in some example templates (example: < ?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 flexibility 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 now you know how to do it).


<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 an unordered list instead of a table (which is what 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 can imagine with unordered list menus. There are also some good menu systems you can download for free, 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 people will jump on board.