Módulo estándar Chromes

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

Observa que en este ejemplo se incluye la clase additions porque los ejemplos son tomados mediante mod_mainmenu. El sufijo "_menu" al div de la clase y la clase "menú" en la etiqueta ul no están presentes con otros módulos.

Comparación del Módulo estándar chromes de Joomla! Estos son los mismos de Joomla! 1.5 a 3.3
Estilo Salida Apariencia
redondeado
<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
ninguno
<ul class="menu">
  <li><!-- various menu items --></li>
</ul>

Module chrome none.png

tabla
<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
esquema
<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

Ten en cuenta que el Módulo chrome no necesariamente cambia demasiado la apariencia de todo - esto depende de las CSS que se utilizan en la plantilla. Por ejemplo, los aspectos 'ninguno' y 'horiz' de chromes son muy similares, aunque el código HTML subyacente es muy diferente.

Otras notas: El diseño horiz es sólo el diseño tabla, envuelto en table, try td.

El software de control de estos se encuentra en el archivo /templates/system/html/modules.php