Understanding Module Chrome in Joomla!

One element of Joomla! templates that is very specific to Joomla! is Module Chrome. Module Chrome allows you as a Joomla! template designer to have greater control over the code that surrounds each module that Joomla! outputs.

Getting ready

View your Joomla! website in your browser.

How to do it...

1. 1. Look at the menu to the left of the template surrounded by a colored, rounded border.

1. 2. If you view the source of the home page in the rhuk_milkyway template, you'll see that the corresponding XHTML for this is surrounded by "Module Chrome":

   <div class="module_menu">
   <div>
   <div>
   <div>
   <!—rounded content-->
   </div>
   </div>
   </div>
   </div>
   

2. 3. This is the rounded Module Chrome. Another Module Chrome is none, which applies nothing around your content—xhtml wraps the module in a div tag with the class attribute referencing the name of the module:

   <div class="moduletable_menu">
   <!-- module content --...