View source for Standard Module Chromes/nl

<noinclude><languages /></noinclude>
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.

{| style="width:100%" class="wikitable"
|+ '''Vergelijking van de Joomla! standaard Module chromes'''
Dit zijn dezelfde voor Joomla! 1.5 tot 3.3
!width="100" | Stijl
!Output
!width="210" | Appearance
|-
!rounded<br />
|<source lang="html4strict">
<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</source>
|[[Image:Module_chrome_rounded.png]]
|-
!none
|<source lang="html4strict">
<ul class="menu">
  <li><!-- various menu items --></li>
</ul>
</source>
|
[[Image:Module_chrome_none.png]]
|-
!table
|<source lang="html4strict">
<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>
</source>
|[[Image:Module_chrome_table.png]]
|-
!horz
|<source lang="html4strict">
<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>
</source>
|[[Image:Module_chrome_horz.png]]
|-
!xhtml
|<source lang="html4strict">
<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- various menu items --></li>
  </ul>
</div>
</source>
|[[Image:Module_chrome_xhtml.png]]
|-
!html5
|<!--- leave as html4strict/html5 not available yet --->
<source lang="html4strict">
<div class="well _menu">
  <h3 class="page-header">Main Menu</h3>
  <ul class="nav menu">
    <li><!-- various menu items --></li>
  </ul>
</div>
</source>
|[[Image:Module_chrome_html5.png]]
|-
!outline
|<source lang="html4strict">
<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>
</source>
| [[Image: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 '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.

Other notes: The <tt>horiz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>. 

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

<noinclude>
[[Category:Advanced|Chrome]]
[[Category:Module Development]]
[[Category:Template Development]]
[[Category:CSS]]
</noinclude>