A site for Joomla! documentation

Joomla User Manual

Manual Index

Standard Module Chromes

Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.

Comparison of the Joomla! standard Module chromes These are the same from Joomla! 1.5 through 3.x

Comparison of the Joomla! standard Module chromes These are the same from Joomla! 1.5 through 3.x
Style Output Appearance
rounded
 
<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>
 Module chrome rounded.png
none 
<ul class="menu">
  <li><!-- various menu items --></li>
</ul>

Module chrome none.png

table 
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Main Menu</th>
  </tr>
  <tr>
    <td>
      <ul class="menu">
        <li><!-- various menu items --></li>
      </ul>
    </td>
  </tr>
</table>
 Module chrome table.png
horz 
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" class="moduletable_menu">
        <tr>
          <th valign="top">Main Menu</th>
        </tr>
        <tr>
          <td>
            <ul class="menu">
              <li><!-- various menu items --></li>
            </ul>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
 Module chrome horz.png
xhtml 
<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- various menu items --></li>
  </ul>
</div>
 Module chrome xhtml.png
html5 
<div class="well _menu">
  <h3 class="page-header">Main Menu</h3>
  <ul class="nav menu">
    <li><!-- various menu items --></li>
  </ul>
</div>
 Module chrome html5.png
outline 
<div class="mod-preview">
  <div class="mod-preview-info">left[outline]</div>
  <div class="mod-preview-wrapper">
    <ul class="menu">
      <li><!-- various menu items --></li>
    </ul>
  </div>
</div>
 Module chrome outline.png

Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the 'none' and 'horz' chromes look very similar, although the underlying HTML code is very different.

Other notes: The horz is just the table layout, wrapped in a table, tr, and td.

Until Joomla! 3: The software controlling these is in the file /templates/system/html/modules.php.

Changes since Joomla! 4

  • The standard chromes horz, rounded and xhtml have been removed from core.
  • The core module chromes are controlled by JLayout files in directory /layouts/chromes/.

In this Article