dropdown-modulemanagerModules are boxes that may contain content, links, a menu, a list of archived articles, breadcrumbs, a login box, advertisements, a newsreel, etc. They are usually put into the postions that surround the content such as the header section or the sidebars or the footer.  They can also be placed directly into an article. Modules can be placed on everypage on your site or on selected pages.

Learn by Example

We return to to Susie Catlover who is creating her site all about cats.  Susie has already created Categories, wrote Articles to be assigned to those Categories, and added those Articles and Categories to her Main Menu.

When Susie pulls up the Front End of her site she sees these Menu Items in a box in the right sidebar. This is where Joomla puts the Main Menu by default. She knows enough about Joomla to know that the Main Menu location is determined by a Module Position. So she goes into the Module Manager to make changes to the default layout. You can get to the Module Manager by pulling the Extensions dropdown from the top menu or you can click on the Module Manager in the Quick Icons on the Dashboard.

Joomla has come with a few Modules already created. These are Breadcrumbs, the Main Menu and the Login Form. For this example we are going to stick with the default Protostar Template. Joomla has these modules already assigned to Positions defined by the Protostar Template. It puts Breadcrumbs in Postion-2 which is down along the bottom in the center right under the Content. Breadcrumbs are a navigational trail that is helpful if you have a large website with many levels.  It allows people to jump up two or three levels to an upper level web page without having to do a lot of complicated navigation. Protostar puts the Main Menu and the Login Form in Position-7 which is the right sidebar. 

Susie doesn't need to have the Login Form at this time.  She may want to have users login to post comments at a later date, but for now she wants the Login Form to be removed from the site.  She also doesn't feel the need for breadcrumbs on her site. She simple clicks on the green check mark to the left of these items in Module Manager and that changes them to Unpublished.  She can bring them back at any time by clicking on the  red x.

Next, Susie wants to change the Main Menu's location.  She wants it to be horizontally along the top of the Content.  She clicks on the words Main Menu and that opens up a new screen.

At the top of this new screen she sees Module Manager: Module Menu. You can read more about that in the joom3 article Administrative Interface article on Modules.

Protostar has defined to existence and location of the Postions with it's index.php, templateDetails.xml and template.css in the files under templates/protostar in the file system for Joomla. We are going to use the default layout for our examples, but these files can be modified to work with other layouts. Click here for the Protostar Default Module Positions.

hideSusie wants to hide the Title of Main Menu, so she clicks on Hide next to Show Title.

position-1Now she wants to assign the Main Menu module to Position-1, which is <div class="navigation"> in the Protostar Template. She scrolls down the selection box and makes sure she locates the Protostar section of the list of Positions. She selects Navigation [position-1].

nav-pillsNext she clicks on the Options tab and then clicks on Advanced Options. Under Advanced Options, she can assign a Menu Class Suffix to this module.  To have Protostar align the menu horizontally she needs to enter " nav-pills" in the text box (no quote marks and do put a space before nav-pills).  This is not the most intuitive answer to making the menu horizontal - and hopefully in later releases they create a more obvious selection for this frequently used feature.

Over the course of building her site, Susie will return to the Module Manager many times.  In the future she plans to add advertisments, sub-menus, links to archived articles and illustrations in the sidebars.  These will all be created in the Module Manager.

 

 

 

Resources: Modules