Module Chromes standard

From Joomla! Documentation

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

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

Notez que cet exemple comprend des ajouts de classes puisque les exemples sont le résultat de l'utilisation de mod_mainmenu. Le suffixe "_menu" de la classe div ainsi que la classe "menu" de la balise ul ne sont pas présents avec d'autres modules.

Comparaison des modules Joomla! Chromes standards Ceci est identique de la série Joomla! 1.5 à la série 3.x.
Style Sortie Apparence
rounded (arrondi)
<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 (aucun)
<ul class="menu">
  <li><!-- various menu items --></li>
</ul>

Module chrome none.png

table (tableau)
<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

Notez que le module chrome ne va pas nécessairement changer de façon substantielle l'apparence du module. Cela dépend principalment des CSS utilisé par le template. Par exemple, les none et horz sont très similaires, bien que le code HTML soit très différent.

Autres remarques : le horiz est juste la mise en page d'une table incorporée dans une table, tr et td.

Le logiciel va contrôler ceci dans le fichier /templates/system/html/modules.php