Core module chrome CSS
From Joomla! Documentation
(Difference between revisions)
Radiant tech (Talk | contribs) (New page: The core HTML output for modules can be extended in the <tt><jdoc:include /></tt> statement by adding the style attribute, <tt>style="stylename"</tt>, where <tt>stylename</tt> corresponds ...) |
Radiant tech (Talk | contribs) |
||
| Line 4: | Line 4: | ||
'''Chrome Type''' | '''Chrome Type''' | ||
| + | * None | ||
| + | :: This is the default if no style attribute is added to the tt><jdoc:include /></tt> statement. | ||
| + | :: No additional CSS styling is added. | ||
| + | :: Module title is NOT included in the output, regardless of enabled status. | ||
* Table | * Table | ||
| − | :: <code>.moduletable</code> class applied to a <tt><nowiki><table></nowiki></tt> element of no set width that surrounds the module output | + | :: <code>.moduletable</code> class applied to a <tt><nowiki><table></nowiki></tt> element of no set width that surrounds the module output. |
| − | :: <tt><nowiki><th></nowiki></tt> tags surround the module title, if enabled | + | :: <tt><nowiki><th></nowiki></tt> tags surround the module title, if enabled. |
* Horz | * Horz | ||
| − | :: No additional CSS styling is added | + | :: No additional CSS styling is added. |
| − | :: Output is the same as the "Table" style above, but also wraps the output in second table of 100% width | + | :: Output is the same as the "Table" style above, but also wraps the output in second table of 100% width. |
* XHTML | * XHTML | ||
| − | :: <code>.moduletable</code> class applied to a <tt><nowiki><div></nowiki></tt> that surrounds the module output | + | :: <code>.moduletable</code> class applied to a <tt><nowiki><div></nowiki></tt> that surrounds the module output. |
| − | :: <tt><nowiki><h3></nowiki></tt> tags surround the module title, if enabled | + | :: <tt><nowiki><h3></nowiki></tt> tags surround the module title, if enabled. |
* Rounded | * Rounded | ||
| − | :: <code>.module</code> class is applied to the outermost <tt><nowiki><div></nowiki></tt> | + | :: <code>.module</code> class is applied to the outermost <tt><nowiki><div></nowiki></tt>. |
:: The module output is surrounded with four layers of <tt><nowiki><div></nowiki></tt>s to allow for rounded corners. | :: The module output is surrounded with four layers of <tt><nowiki><div></nowiki></tt>s to allow for rounded corners. | ||
| + | :: <tt><nowiki><h3></nowiki></tt> tags surround the module title, if enabled. | ||
| + | * Outline | ||
| + | :: <code>.mod-preview</code> class is applied to the outermost <tt><nowiki><div></nowiki></tt>. | ||
| + | :: <code>.mod-preview-info</code> class | ||
| + | :: <code>.mod-preview-wrapper</code> class is applied to the innermost <tt><nowiki><div></nowiki></tt> which directly holds the module content. | ||
<noinclude>[[Category: Templates]][[Category: Modules]][[Category:Intermediate]][[Category: Definition lists]]</noinclude> | <noinclude>[[Category: Templates]][[Category: Modules]][[Category:Intermediate]][[Category: Definition lists]]</noinclude> | ||
Revision as of 09:01, 22 February 2008
The core HTML output for modules can be extended in the <jdoc:include /> statement by adding the style attribute, style="stylename", where stylename corresponds to the "chrome" style used to wrap the module.
For further information, see <jdoc:include /> Statements and What is module chrome?
Chrome Type
- None
- This is the default if no style attribute is added to the tt><jdoc:include /> statement.
- No additional CSS styling is added.
- Module title is NOT included in the output, regardless of enabled status.
- Table
-
.moduletableclass applied to a <table> element of no set width that surrounds the module output. - <th> tags surround the module title, if enabled.
-
- Horz
- No additional CSS styling is added.
- Output is the same as the "Table" style above, but also wraps the output in second table of 100% width.
- XHTML
-
.moduletableclass applied to a <div> that surrounds the module output. - <h3> tags surround the module title, if enabled.
-
- Rounded
-
.moduleclass is applied to the outermost <div>. - The module output is surrounded with four layers of <div>s to allow for rounded corners.
- <h3> tags surround the module title, if enabled.
-
- Outline
-
.mod-previewclass is applied to the outermost <div>. -
.mod-preview-infoclass -
.mod-preview-wrapperclass is applied to the innermost <div> which directly holds the module content.
-
