Difference between revisions of "Standard Module Chromes"
From Joomla! Documentation
m (updated a bit, and made note that these are the same for J1.5 through J3.3) |
(Marked for translation) |
||
| Line 1: | Line 1: | ||
| − | + | <noinclude><languages /></noinclude> | |
| − | 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. | + | <translate>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.</translate> |
{| style="width:100%" class="wikitable" | {| style="width:100%" class="wikitable" | ||
| − | |+ '''Comparison of the Joomla! standard Module chromes''' | + | |+ '''<translate>Comparison of the Joomla! standard Module chromes</translate>''' |
| − | These are the same from Joomla! 1.5 through 3.3 | + | <translate>These are the same from Joomla! 1.5 through 3.3</translate> |
| − | !width="100" | Style | + | !width="100" | <translate>Style</translate> |
| − | !Output | + | !<translate>Output</translate> |
| − | !width="210" | Appearance | + | !width="210" | <translate>Appearance</translate> |
|- | |- | ||
| − | !rounded<br /> | + | !<translate>rounded</translate><br /> |
|<source lang="html4strict"> | |<source lang="html4strict"> | ||
<div class="module_menu"> | <div class="module_menu"> | ||
| Line 26: | Line 26: | ||
|[[Image:Module_chrome_rounded.png]] | |[[Image:Module_chrome_rounded.png]] | ||
|- | |- | ||
| − | !none | + | !<translate>none</translate> |
|<source lang="html4strict"> | |<source lang="html4strict"> | ||
<ul class="menu"> | <ul class="menu"> | ||
| Line 35: | Line 35: | ||
[[Image:Module_chrome_none.png]] | [[Image:Module_chrome_none.png]] | ||
|- | |- | ||
| − | !table | + | !<translate>table</translate> |
|<source lang="html4strict"> | |<source lang="html4strict"> | ||
<table cellpadding="0" cellspacing="0" class="moduletable_menu"> | <table cellpadding="0" cellspacing="0" class="moduletable_menu"> | ||
| Line 52: | Line 52: | ||
|[[Image:Module_chrome_table.png]] | |[[Image:Module_chrome_table.png]] | ||
|- | |- | ||
| − | !horz | + | !<translate>horz</translate> |
|<source lang="html4strict"> | |<source lang="html4strict"> | ||
<table cellspacing="1" cellpadding="0" border="0" width="100%"> | <table cellspacing="1" cellpadding="0" border="0" width="100%"> | ||
| Line 98: | Line 98: | ||
|[[Image:Module_chrome_html5.png]] | |[[Image:Module_chrome_html5.png]] | ||
|- | |- | ||
| − | !outline | + | !<translate>outline</translate> |
|<source lang="html4strict"> | |<source lang="html4strict"> | ||
<div class="mod-preview"> | <div class="mod-preview"> | ||
| Line 113: | Line 113: | ||
|} | |} | ||
| − | 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. | + | <translate>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.</translate> |
| − | 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>. | + | <translate>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>.</translate> |
| − | The software controlling these is in the file <tt>/templates/system/html/modules.php</tt> | + | <translate>The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt> |
<noinclude> | <noinclude> | ||
| + | <translate> | ||
[[Category:Advanced|Chrome]] | [[Category:Advanced|Chrome]] | ||
[[Category:Module Development]] | [[Category:Module Development]] | ||
[[Category:Template Development]] | [[Category:Template Development]] | ||
[[Category:CSS]] | [[Category:CSS]] | ||
| + | </translate> | ||
</noinclude> | </noinclude> | ||
Revision as of 14:24, 8 September 2015
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