A site for Joomla! documentation

Joomla 4/5 User Manual

Manual Index

Standaard Module Chromes

Let op: Dit voorbeeld bevat class toevoegingen omdat de voorbeelden gebruik maken van mod_mainmenu. Het achtervoegsel "_menu" bij de class van de div is niet aanwezig bij andere modules.

Vergelijking van de Joomla! standaard Module chromes Dit zijn dezelfde voor Joomla! 1.5 tot 3.3

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