Standard Module Chromes: Difference between revisions

From Joomla! Documentation

← Older editNewer edit →
MATsxm (talk | contribs)
Email Confirmed, JDOC Contributors, Translator
34,129 edits
Marked for translation
MATsxm (talk | contribs)
Email Confirmed, JDOC Contributors, Translator
34,129 edits
Marked this version for translation
Line 1: Line 1:
<noinclude><languages /></noinclude>
<noinclude><languages /></noinclude>
<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>
<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>


{| style="width:100%" class="wikitable"
{| style="width:100%" class="wikitable"
|+ '''<translate>Comparison of the Joomla! standard Module chromes</translate>'''
|+ '''<translate><!--T:2-->
<translate>These are the same from Joomla! 1.5 through 3.3</translate>
Comparison of the Joomla! standard Module chromes</translate>'''
!width="100" | <translate>Style</translate>
<translate><!--T:3-->
!<translate>Output</translate>
These are the same from Joomla! 1.5 through 3.3</translate>
!width="210" | <translate>Appearance</translate>
!width="100" | <translate><!--T:4-->
Style</translate>
!<translate><!--T:5-->
Output</translate>
!width="210" | <translate><!--T:6-->
Appearance</translate>
|-
|-
!<translate>rounded</translate><br />
!<translate><!--T:7-->
rounded</translate><br />
|<source lang="html4strict">
|<source lang="html4strict">
<div class="module_menu">
<div class="module_menu">
Line 26: Line 33:
|[[Image:Module_chrome_rounded.png]]
|[[Image:Module_chrome_rounded.png]]
|-
|-
!<translate>none</translate>
!<translate><!--T:8-->
none</translate>
|<source lang="html4strict">
|<source lang="html4strict">
<ul class="menu">
<ul class="menu">
Line 35: Line 43:
[[Image:Module_chrome_none.png]]
[[Image:Module_chrome_none.png]]
|-
|-
!<translate>table</translate>
!<translate><!--T:9-->
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 61:
|[[Image:Module_chrome_table.png]]
|[[Image:Module_chrome_table.png]]
|-
|-
!<translate>horz</translate>
!<translate><!--T:10-->
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 108:
|[[Image:Module_chrome_html5.png]]
|[[Image:Module_chrome_html5.png]]
|-
|-
!<translate>outline</translate>
!<translate><!--T:11-->
outline</translate>
|<source lang="html4strict">
|<source lang="html4strict">
<div class="mod-preview">
<div class="mod-preview">
Line 113: Line 124:
|}
|}


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


<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>  
<translate><!--T:13-->
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>  


<translate>The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>
<translate><!--T:14-->
The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>


<noinclude>
<noinclude>
<translate>
<translate>
<!--T:15-->
[[Category:Advanced|Chrome]]
[[Category:Advanced|Chrome]]
[[Category:Module Development]]
[[Category:Module Development]]

Revision as of 19:24, 8 September 2015

Other languages:

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.

Comparison of the Joomla! standard Module chromes These are the same from Joomla! 1.5 through 3.3
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

Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Standard_Module_Chromes&oldid=227438"