Standard Module Chromes: Difference between revisions

From Joomla! Documentation

← Older edit
Changes in J!4
Cmb (talk | contribs)
956 edits
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" 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" 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 />
|<source lang="html4strict">
|<syntaxhighlight lang="html4strict">
<div class="module_menu">
<div class="module_menu">
   <div>
   <div>
Line 30: Line 30:
   </div>
   </div>
</div>
</div>
</source>
</syntaxhighlight>
|[[Image:Module_chrome_rounded.png]]
|[[Image:Module_chrome_rounded.png]]
|-
|-
!<translate><!--T:8-->
!<translate><!--T:8-->
none</translate>
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]]
Line 45: Line 45:
!<translate><!--T:9-->
!<translate><!--T:9-->
table</translate>
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 58: Line 58:
   </tr>
   </tr>
</table>
</table>
</source>
</syntaxhighlight>
|[[Image:Module_chrome_table.png]]
|[[Image:Module_chrome_table.png]]
|-
|-
!<translate><!--T:10-->
!<translate><!--T:10-->
horz</translate>
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 82: Line 82:
   </tr>
   </tr>
</table>
</table>
</source>
</syntaxhighlight>
|[[Image:Module_chrome_horz.png]]
|[[Image:Module_chrome_horz.png]]
|-
|-
!xhtml
!xhtml
|<source lang="html4strict">
|<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>
</source>
</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 --->
<source lang="html4strict">
<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>
</source>
</syntaxhighlightv>
|[[Image:Module_chrome_html5.png]]
|[[Image:Module_chrome_html5.png]]
|-
|-
!<translate><!--T:11-->
!<translate><!--T:11-->
outline</translate>
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 119: Line 119:
   </div>
   </div>
</div>
</div>
</source>
</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 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 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 <tt>horz</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 ''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> <tt>/templates/system/html/modules.php</tt>.
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 <tt>horz</tt>, <tt>rounded</tt> and <tt>xhtml</tt> have been removed from core.
* The standard chromes ''horz'', ''rounded'' and ''xhtml'' have been removed from core.
* The core module chromes are controlled by <tt>JLayout</tt> files in directory <tt>/layouts/chromes/</tt>.
* The core module chromes are controlled by ''JLayout'' files in directory ''/layouts/chromes/''.


<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"