Standard Module Chromes: Difference between revisions

From Joomla! Documentation

← Older edit
Tom Hutchison (talk | contribs)
Email Confirmed
13,131 edits
m needs not need
Cmb (talk | contribs)
956 edits
Replaced deprecated 'source' tags with 'syntaxhighlight' tags. Other markup changes.
 
(12 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{page|needs updating|References to 1.5 and 1.6.}}
<noinclude><languages /></noinclude>
 
<translate><!--T:1-->
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.
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"
|+ '''Comparison of the Joomla! 1.5/1.6 standard Module chromes'''
|+ '''<translate><!--T:2-->
!Style
Comparison of the Joomla! standard Module chromes</translate>'''
!Output
<translate><!--T:3-->
!width="204" | Appearance
These are the same from Joomla! 1.5 through 3.x</translate>
!width="100" | <translate><!--T:4-->
Style</translate>
!<translate><!--T:5-->
Output</translate>
!width="210" | <translate><!--T:6-->
Appearance</translate>
|-
|-
!rounded<br />(default for menus on milkyway)
!<translate><!--T:7-->
|
rounded</translate><br />
<source lang="html4strict">
|<syntaxhighlight lang="html4strict">
<div class="module_menu">
<div class="module_menu">
   <div>
   <div>
Line 24: Line 30:
   </div>
   </div>
</div>
</div>
</source>
</syntaxhighlight>
|
|[[Image:Module_chrome_rounded.png]]
[[Image:Module_chrome_rounded.png]]
|-
|-
!none
!<translate><!--T:8-->
|
none</translate>
<source lang="html4strict">
|<syntaxhighlight lang="html4strict">
<ul class="menu">
<ul class="menu">
   <li><!-- various menu items --></li>
   <li><!-- various menu items --></li>
</ul>
</ul>
</source>
</syntaxhighlight>
|
|
[[Image:Module_chrome_none.png]]
[[Image:Module_chrome_none.png]]
|-
|-
!table
!<translate><!--T:9-->
|
table</translate>
<source lang="html4strict">
|<syntaxhighlight lang="html4strict">
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
   <tr>
   <tr>
Line 53: Line 58:
   </tr>
   </tr>
</table>
</table>
</source>
</syntaxhighlight>
|
|[[Image:Module_chrome_table.png]]
[[Image:Module_chrome_table.png]]
|-
|-
!horz
!<translate><!--T:10-->
|
horz</translate>
<source lang="html4strict">
|<syntaxhighlight lang="html4strict">
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<table cellspacing="1" cellpadding="0" border="0" width="100%">
   <tr>
   <tr>
Line 78: Line 82:
   </tr>
   </tr>
</table>
</table>
</source>
</syntaxhighlight>
|
|[[Image:Module_chrome_horz.png]]
[[Image:Module_chrome_horz.png]]
|-
|-
!xhtml
!xhtml
|
|<syntaxhighlight lang="html4strict">
<source lang="html4strict">
<div class="moduletable_menu">
<div class="moduletable_menu">
   <h3>Main Menu</h3>
   <h3>Main Menu</h3>
Line 91: Line 93:
   </ul>
   </ul>
</div>
</div>
</source>
</syntaxhighlight>
|
|[[Image:Module_chrome_xhtml.png]]
[[Image:Module_chrome_xhtml.png]]
|-
!html5
|<!--- leave as html4strict/html5 not available yet --->
<syntaxhighlight lang="html4strict">
<div class="well _menu">
  <h3 class="page-header">Main Menu</h3>
  <ul class="nav menu">
    <li><!-- various menu items --></li>
  </ul>
</div>
</syntaxhighlightv>
|[[Image:Module_chrome_html5.png]]
|-
|-
!outline
!<translate><!--T:11-->
|
outline</translate>
<source lang="html4strict">
|<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 106: Line 119:
   </div>
   </div>
</div>
</div>
</source>
</syntaxhighlight>
|
| [[Image:Module_chrome_outline.png]]
[[Image:Module_chrome_outline.png]]
|-
|}
|}


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><!--T:12-->
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-->
Other notes: The ''horz'' is just the ''table'' layout, wrapped in a ''table'', ''tr'', and ''td''.</translate>
 
<translate><!--T:14-->
Until Joomla! 3: The software controlling these is in the file</translate> ''/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/''.


<noinclude>
<noinclude>
<translate>
<!--T:15-->
[[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>

Latest revision as of 21:04, 9 October 2023

Other languages:

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.

Comparison of the Joomla! standard Module chromes These are the same from Joomla! 1.5 through 3.x
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>
</syntaxhighlightv>
|[[Image:Module_chrome_html5.png]]
|-
!outline
|<syntaxhighlight lang="html4strict">
<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 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/.
Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Standard_Module_Chromes&oldid=1015259"