Standard Module Chromes/de: Difference between revisions
From Joomla! Documentation
Created page with "Standard Modul Chromes" |
Updating to match new version of source page |
||
| Line 4: | Line 4: | ||
{| style="width:100%" class="wikitable" | {| style="width:100%" class="wikitable" | ||
|+ '''Comparison of the Joomla! standard Module chromes''' | |+ '''Comparison of the Joomla! standard Module chromes''' | ||
These are the same from Joomla! 1.5 through 3. | These are the same from Joomla! 1.5 through 3.x | ||
!width="100" | Style | !width="100" | Style | ||
!Output | !Output | ||
| Line 115: | Line 115: | ||
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. | 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. | ||
Other notes: The <tt> | 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>. | ||
The software controlling these is in the file <tt>/templates/system/html/modules.php</tt> | Until Joomla! 3: The software controlling these is in the file <tt>/templates/system/html/modules.php</tt>. | ||
'''Changes since Joomla! 4''' | |||
* The standard chromes <tt>horz</tt>, <tt>rounded</tt> and <tt>xhtml</tt> have been removed from core. | |||
* The core module chromes are controlled by <tt>JLayout</tt> files in directory <tt>/layouts/chromes/</tt>. | |||
<noinclude> | <noinclude> | ||
Latest revision as of 23:14, 12 March 2020
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 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/.