Standard Module Chromes: Difference between revisions
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 19: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