Standard Module Chromes: Difference between revisions
From Joomla! Documentation
Marked this version for translation |
mNo edit summary |
||
| Line 7: | Line 7: | ||
Comparison of the Joomla! standard Module chromes</translate>''' | Comparison of the Joomla! standard Module chromes</translate>''' | ||
<translate><!--T:3--> | <translate><!--T:3--> | ||
These are the same from Joomla! 1.5 through 3. | These are the same from Joomla! 1.5 through 3.x</translate> | ||
!width="100" | <translate><!--T:4--> | !width="100" | <translate><!--T:4--> | ||
Style</translate> | Style</translate> | ||
Revision as of 20:44, 11 March 2020
Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.
| Style | Output | Appearance |
|---|---|---|
| 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>
|
|
| none | <ul class="menu">
<li><!-- various menu items --></li>
</ul>
|
|
| 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>
|
|
| 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>
|
|
| xhtml | <div class="moduletable_menu">
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
|
|
| html5 |
<div class="well _menu">
<h3 class="page-header">Main Menu</h3>
<ul class="nav menu">
<li><!-- various menu items --></li>
</ul>
</div>
|
|
| 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>
|
|
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