Standaard Module Chromes

From Joomla! Documentation

This page is a translated version of the page Standard Module Chromes and the translation is 44% complete.

Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎Nederlands

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
Stijl Output Uiterlijk
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 horiz is just the table layout, wrapped in a table, tr, and td.

The software controlling these is in the file /templates/system/html/modules.php