Actions

Difference between revisions of "Core module chrome CSS"

From Joomla! Documentation

(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 ...)
 
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
.moduletable class 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
.moduletable class applied to a <div> that surrounds the module output.
<h3> tags surround the module title, if enabled.
  • Rounded
.module class 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-preview class is applied to the outermost <div>.
.mod-preview-info class
.mod-preview-wrapper class is applied to the innermost <div> which directly holds the module content.