Standard Module Chromes: Difference between revisions
From Joomla! Documentation
m spacing |
m more formating |
||
| Line 10: | Line 10: | ||
|- | |- | ||
!rounded<br />(default for menus on milkyway) | !rounded<br />(default for menus on milkyway) | ||
| | |<source lang="html4strict"> | ||
<source lang="html4strict"> | |||
<div class="module_menu"> | <div class="module_menu"> | ||
<div> | <div> | ||
| Line 25: | Line 24: | ||
</div> | </div> | ||
</source> | </source> | ||
| | |[[Image:Module_chrome_rounded.png]] | ||
[[Image:Module_chrome_rounded.png]] | |||
|- | |- | ||
!none | !none | ||
| | |<source lang="html4strict"> | ||
<source lang="html4strict"> | |||
<ul class="menu"> | <ul class="menu"> | ||
<li><!-- various menu items --></li> | <li><!-- various menu items --></li> | ||
| Line 39: | Line 36: | ||
|- | |- | ||
!table | !table | ||
| | |<source lang="html4strict"> | ||
<source lang="html4strict"> | |||
<table cellpadding="0" cellspacing="0" class="moduletable_menu"> | <table cellpadding="0" cellspacing="0" class="moduletable_menu"> | ||
<tr> | <tr> | ||
| Line 54: | Line 50: | ||
</table> | </table> | ||
</source> | </source> | ||
| | |[[Image:Module_chrome_table.png]] | ||
[[Image:Module_chrome_table.png]] | |||
|- | |- | ||
!horz | !horz | ||
| | |<source lang="html4strict"> | ||
<source lang="html4strict"> | |||
<table cellspacing="1" cellpadding="0" border="0" width="100%"> | <table cellspacing="1" cellpadding="0" border="0" width="100%"> | ||
<tr> | <tr> | ||
| Line 79: | Line 73: | ||
</table> | </table> | ||
</source> | </source> | ||
| | |[[Image:Module_chrome_horz.png]] | ||
[[Image:Module_chrome_horz.png]] | |||
|- | |- | ||
!xhtml | !xhtml | ||
| | |<source lang="html4strict"> | ||
<source lang="html4strict"> | |||
<div class="moduletable_menu"> | <div class="moduletable_menu"> | ||
<h3>Main Menu</h3> | <h3>Main Menu</h3> | ||
| Line 117: | Line 109: | ||
</div> | </div> | ||
</source> | </source> | ||
|[[Image:Module_chrome_outline.png]] | | [[Image:Module_chrome_outline.png]] | ||
|- | |||
|} | |} | ||
Revision as of 01:33, 28 July 2014
This Article Needs Your Help
This article is tagged because it NEEDS UPDATING. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.
Reason: References to 1.5 and 1.6.
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 (default for menus on milkyway) |
<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.