|
|
| (17 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | <includeonly>==What is Module chrome?==</includeonly> | + | <noinclude><languages /></noinclude> |
| | + | <translate> |
| | + | <!--T:1--> |
| | + | {{Chunk:Module chrome/en}} |
| | | | |
| − | Module chrome allows template designers to have a certain amount of control over the way the output from a Module is displayed in their template. Essentially, it consists of a small amount of predefined HTML which is inserted before, after, or around the output from each module, and which can then be styled using CSS. Module chrome is commonly used to provide borders around modules, especially with rounded corners, but it can be used for much more than that. | + | <!--T:3--> |
| | + | '''See also:''' [[Standard Module Chromes]] |
| | | | |
| − | Module chrome is determined by using the '<tt>style</tt>' attribute in the statement calling the module. For example, the following statement may be used in the <tt>index.php</tt> file of a template to insert the Modules in the '<tt>user1</tt>' position and apply the '<tt>custom</tt>' Module chrome:
| + | <!--T:2--> |
| − | <source lang="php">
| |
| − | <jdoc:include type="modules" name="user1" style="custom" />
| |
| − | </source>
| |
| − | It can be seen that the same Module chrome is applied to every Module in that position - in other words, if you want to have two Modules in a column, but want them to have different Module chrome, then they would need to be set up as two different 'positions' (e.g. '<tt>user1</tt>' and '<tt>user2</tt>').
| |
| − | | |
| − | The standard Joomla! 1.5/1.6 package includes six default Module chrome styles. However, the flexibility of the template system means that you are not limited to these styles - it's very easy to create as many new styles as you want!
| |
| − | | |
| − | 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="width:100%" class="wikitable"
| |
| − | |+ '''Comparison of the Joomla! 1.5/1.6 standard Module chromes'''
| |
| − | !Style
| |
| − | !Output
| |
| − | !width="204" | Appearance
| |
| − | |-
| |
| − | !rounded<br />(default for menus on milkyway)
| |
| − | |
| |
| − | <source lang="html4strict">
| |
| − | <div class="module_menu">
| |
| − | <div>
| |
| − | <div>
| |
| − | <div>
| |
| − | <h3>Main Menu</h3>
| |
| − | <ul class="menu">
| |
| − | <li><!-- various menu items --></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </source>
| |
| − | |
| |
| − | [[Image:Module_chrome_rounded.png]]
| |
| − | |-
| |
| − | !none
| |
| − | |
| |
| − | <source lang="html4strict">
| |
| − | <ul class="menu">
| |
| − | <li><!-- various menu items --></li>
| |
| − | </ul>
| |
| − | </source>
| |
| − | |
| |
| − | [[Image:Module_chrome_none.png]]
| |
| − | |-
| |
| − | !table
| |
| − | |
| |
| − | <source lang="html4strict">
| |
| − | <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>
| |
| − | </source>
| |
| − | |
| |
| − | [[Image:Module_chrome_table.png]]
| |
| − | |-
| |
| − | !horz
| |
| − | |
| |
| − | <source lang="html4strict">
| |
| − | <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>
| |
| − | </source>
| |
| − | |
| |
| − | [[Image:Module_chrome_horz.png]]
| |
| − | |-
| |
| − | !xhtml
| |
| − | |
| |
| − | <source lang="html4strict">
| |
| − | <div class="moduletable_menu">
| |
| − | <h3>Main Menu</h3>
| |
| − | <ul class="menu">
| |
| − | <li><!-- various menu items --></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </source>
| |
| − | |
| |
| − | [[Image:Module_chrome_xhtml.png]]
| |
| − | |-
| |
| − | !outline
| |
| − | |
| |
| − | <source 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>
| |
| − | </source>
| |
| − | |
| |
| − | [[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.
| |
| | <noinclude> | | <noinclude> |
| | [[Category:Advanced|Chrome]] | | [[Category:Advanced|Chrome]] |
| − | [[Category:Modules]] | + | [[Category:Module Development]] |
| − | [[Category:Templates]] | + | [[Category:Template Development]] |
| − | [[Category:Topics]] | + | [[Category:CSS]] |
| − | [[Category:Template FAQ]]</noinclude> | + | [[Category:Glossary]] |
| | + | </noinclude> |
| | + | </translate> |
Module chrome allows template designers to have a certain amount of control over the way the output from a Module is displayed in their template. Essentially, it consists of a small amount of predefined HTML which is inserted before, after, or around the output from each module, and which can then be styled using CSS. Module chrome is commonly used to provide borders around modules, especially with rounded corners, but it can be used for much more than that.
Module chrome is determined by using the 'style' attribute in the statement calling the module. For example, the following statement may be used in the index.php file of the currently assigned as main template to insert the Modules in the 'user1' position and apply the 'custom' Module chrome:
<jdoc:include type="modules" name="user1" style="custom" />
It can be seen that the same Module chrome is applied to every Module in that position - in other words, if you want to have two Modules in a column, but want them to have different Module chrome, then they would need to be set up as two different 'positions' (e.g. 'user1' and 'user2').
The standard Joomla! 1.5+ package includes six default Module chrome styles. However, the flexibility of the template system means that you are not limited to these styles - it's very easy to create as many new styles as you want!
See also: Standard Module Chromes