Difference between revisions of "Standard Module Chromes"
From Joomla! Documentation
(Changes in J!4) |
(Replaced deprecated 'source' tags with 'syntaxhighlight' tags. Other markup changes.) |
||
Line 1: | Line 1: | ||
<noinclude><languages /></noinclude> | <noinclude><languages /></noinclude> | ||
<translate><!--T:1--> | <translate><!--T:1--> | ||
− | Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" | + | Note that this example includes class additions because the examples are taken using ''mod_mainmenu''. The suffix "_menu" on the div class and the ''menu'' class on the unordered list (ul) tag are not present with other modules.</translate> |
{| style="width:100%" class="wikitable" | {| style="width:100%" class="wikitable" | ||
Line 17: | Line 17: | ||
!<translate><!--T:7--> | !<translate><!--T:7--> | ||
rounded</translate><br /> | rounded</translate><br /> | ||
− | |< | + | |<syntaxhighlight lang="html4strict"> |
<div class="module_menu"> | <div class="module_menu"> | ||
<div> | <div> | ||
Line 30: | Line 30: | ||
</div> | </div> | ||
</div> | </div> | ||
− | </ | + | </syntaxhighlight> |
|[[Image:Module_chrome_rounded.png]] | |[[Image:Module_chrome_rounded.png]] | ||
|- | |- | ||
!<translate><!--T:8--> | !<translate><!--T:8--> | ||
none</translate> | none</translate> | ||
− | |< | + | |<syntaxhighlight lang="html4strict"> |
<ul class="menu"> | <ul class="menu"> | ||
<li><!-- various menu items --></li> | <li><!-- various menu items --></li> | ||
</ul> | </ul> | ||
− | </ | + | </syntaxhighlight> |
| | | | ||
[[Image:Module_chrome_none.png]] | [[Image:Module_chrome_none.png]] | ||
Line 45: | Line 45: | ||
!<translate><!--T:9--> | !<translate><!--T:9--> | ||
table</translate> | table</translate> | ||
− | |< | + | |<syntaxhighlight lang="html4strict"> |
<table cellpadding="0" cellspacing="0" class="moduletable_menu"> | <table cellpadding="0" cellspacing="0" class="moduletable_menu"> | ||
<tr> | <tr> | ||
Line 58: | Line 58: | ||
</tr> | </tr> | ||
</table> | </table> | ||
− | </ | + | </syntaxhighlight> |
|[[Image:Module_chrome_table.png]] | |[[Image:Module_chrome_table.png]] | ||
|- | |- | ||
!<translate><!--T:10--> | !<translate><!--T:10--> | ||
horz</translate> | horz</translate> | ||
− | |< | + | |<syntaxhighlight lang="html4strict"> |
<table cellspacing="1" cellpadding="0" border="0" width="100%"> | <table cellspacing="1" cellpadding="0" border="0" width="100%"> | ||
<tr> | <tr> | ||
Line 82: | Line 82: | ||
</tr> | </tr> | ||
</table> | </table> | ||
− | </ | + | </syntaxhighlight> |
|[[Image:Module_chrome_horz.png]] | |[[Image:Module_chrome_horz.png]] | ||
|- | |- | ||
!xhtml | !xhtml | ||
− | |< | + | |<syntaxhighlight lang="html4strict"> |
<div class="moduletable_menu"> | <div class="moduletable_menu"> | ||
<h3>Main Menu</h3> | <h3>Main Menu</h3> | ||
Line 93: | Line 93: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | </ | + | </syntaxhighlight> |
|[[Image:Module_chrome_xhtml.png]] | |[[Image:Module_chrome_xhtml.png]] | ||
|- | |- | ||
!html5 | !html5 | ||
|<!--- leave as html4strict/html5 not available yet ---> | |<!--- leave as html4strict/html5 not available yet ---> | ||
− | < | + | <syntaxhighlight lang="html4strict"> |
<div class="well _menu"> | <div class="well _menu"> | ||
<h3 class="page-header">Main Menu</h3> | <h3 class="page-header">Main Menu</h3> | ||
Line 105: | Line 105: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | </ | + | </syntaxhighlightv> |
|[[Image:Module_chrome_html5.png]] | |[[Image:Module_chrome_html5.png]] | ||
|- | |- | ||
!<translate><!--T:11--> | !<translate><!--T:11--> | ||
outline</translate> | outline</translate> | ||
− | |< | + | |<syntaxhighlight lang="html4strict"> |
<div class="mod-preview"> | <div class="mod-preview"> | ||
<div class="mod-preview-info">left[outline]</div> | <div class="mod-preview-info">left[outline]</div> | ||
Line 119: | Line 119: | ||
</div> | </div> | ||
</div> | </div> | ||
− | </ | + | </syntaxhighlight> |
| [[Image:Module_chrome_outline.png]] | | [[Image:Module_chrome_outline.png]] | ||
|- | |- | ||
Line 125: | Line 125: | ||
<translate><!--T:12--> | <translate><!--T:12--> | ||
− | Note that the Module chrome doesn't | + | Note that the Module chrome doesn't change the appearance all that much—this depends on the CSS used in the template. For example, the ''none'' and ''horz'' chromes look similar, although the underlying HTML code is different.</translate> |
<translate><!--T:13--> | <translate><!--T:13--> | ||
− | Other notes: The | + | Other notes: The ''horz'' is just the ''table'' layout, wrapped in a ''table'', ''tr'', and ''td''.</translate> |
<translate><!--T:14--> | <translate><!--T:14--> | ||
− | Until Joomla! 3: The software controlling these is in the file</translate> | + | Until Joomla! 3: The software controlling these is in the file</translate> ''/templates/system/html/modules.php''. |
'''Changes since Joomla! 4''' | '''Changes since Joomla! 4''' | ||
− | * The standard chromes | + | * The standard chromes ''horz'', ''rounded'' and ''xhtml'' have been removed from core. |
− | * The core module chromes are controlled by | + | * The core module chromes are controlled by ''JLayout'' files in directory ''/layouts/chromes/''. |
<noinclude> | <noinclude> |
Latest revision as of 21:04, 9 October 2023
Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" on the div class and the menu class on the unordered list (ul) tag are not present with other modules.
Note that the Module chrome doesn't change the appearance all that much—this depends on the CSS used in the template. For example, the none and horz chromes look similar, although the underlying HTML code is different.
Other notes: The horz is just the table layout, wrapped in a table, tr, and td.
Until Joomla! 3: The software controlling these is in the file /templates/system/html/modules.php.
Changes since Joomla! 4
- The standard chromes horz, rounded and xhtml have been removed from core.
- The core module chromes are controlled by JLayout files in directory /layouts/chromes/.