Module Chromes standard

From Joomla! Documentation

Revision as of 06:42, 5 March 2022 by Shim-sao (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎中文(台灣)‎

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.

Depuis Joomla! 3 : Le logiciel va contrôler ceci dans le fichier /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/.