Home . Articles . News . Documentation . Menus, Pages, Templates and Modules

Menus, Pages, Templates and Modules

2008 October 31

{slide=Core Concept: What Makes a Page in Joomla?}In database-driven websites like those created with Joonla, pages are generated "on the fly." The URLs Joomla generates do not refer to files on the webserver. They are actually commands that are interpreted as database queries asking for X content from component Y (and its own taxonomies) under menu item A.

There are no web pages in the form of static HTML files that sit on the webserver, except when you have Joomla's cache feature turned on, and even they are not truly static.How does Joomla know what to send to browsers then? It's rather simple, but it can quickly become very complex:

Menu items determine page identities.

Since menus are the navigational and organizational backbone of any website, Joomla identifies every menu item as having a corresponding page or pages and lets you assign modules (and templates) to those pages. You can create pages that have no tie to any menu, but you will not be able to assign any modules to them except for modules that are assigned to all pages. One way to work around this is to assign pages to a hidden menu who module position is non-existent or never actually visible.

Here is an example of how page generation works.This page you are looking at now is currently generated with the following URL:

index.php?option=com_content&view=article&id=60:templates-and-modules&catid=28:documentation&Itemid=133

If you have SEF turned on, this is the "real" URL behind the simplified, more readable SEF URL. This URL will always generate this page as long as the items it references exist in Joomla.

Here how the URL is "read" by Joomla. Index.php is the base page display file--it's an actual file with program code that manages page creation. What follows next (after the question mark) instructs index.php to run the core content component in Joomla, instructing it to display the article with the ID number of 60. It also notes the alias ("templates-and-modules") for this article, its article category ID and the category's alias ("documentation"), which is helpful for SEF URL functionality.Finally our page URL conveys the itemid, which refers to a menu item. Since there is no direct link to this page from a menu item currently, the item ID for this page is associated with the nearest menu item ID, which is the "Documentation" link under "Staff Guidebook" under "My Account." Consequently the settings for any of those menu items can affect the display and behavior for this page, as they are hierarchically linked, and many settings in a hierarchy within Joomla cascade down unless overridden at a lower level.{/slide}{slide=Template Basics}Templates are installed like other extensions. Any number of templates can be installed. One and only one template must be the default template. The default template is used to determine how pages are rendered unless additional templates are assigned to specific pages.

Templates consist of a master index file composed of PHP rendered X/HTML, any number of stylesheets, associated graphics, possibly template overrides that provide sub-templating for core and third-party components, modules, and plugins. Certain JavaScript libraries and custom code (e.g. built-in menus) may be included in some templates. The master index file and stylesheets can be edited from the Joomla backend. There are often settings as well for governing options coded into a template, such as a choice of menus, the width of the template, color schemes, etc.{/slide}{slide=Making Modules Appear Where You Want Them}Installed modules are assigned to module positions in the Module Manager and given an access level, just like menu items, articles, and plugins. If there are more than one module in the same position, they will appear in the order determined in the Module Manager.

Module positions are written into site templates. If template "A" has a module position "alpha" and module B is assigned to "alpha," module B will appear on the site as rendered for browser requests if the following conditions are met: 1) the module is published (turned on), 2) the requesting browser/client has the requisite access level; 2) the module is assigned to the currently viewed page or all pages; 3) the module position is actually invoked by the template when the page is rendered and served to browser requests. If a module position is not invoked at the template level then the modules in that position will not be displayed regardless of their published state and page assignments.

Regarding the last point, most templates are written so that all their module positions are potentially executable on every possible page. Howeve, template code logic can be written to perform checks and determine whether to invoke a module position based on certain conditions--e.g., only invoke this module position if the requesting browser is on the home page, or only if another module is active, etc. Such checks are performed to generate a unique home page layout on this site. Additionally, some modules invoke one or more other modules that may be assigned to positions that may never be invoked by the template, and these modules may have their own conditions for doing this. E.g., module "alpha" displays all modules in module positions "beta" and "gamma" which are never invoked by the template.{/slide}{slide=Making Modules Appear As You Want Them}The location, size and other visual attributes of the module positions are defined in the template HTML/CSS, which may also cascade to affect module output, particularly when module CSS class suffixes are used on modules within the module manager, allowing them to be styled individually.

The master template's default module styling for this site is generally not desirable. Adding module suffixes "-white" or "-banner" evokes basic styles in the master template CSS to strip down and position ads and other modules with a very minimal styling.

The module output itself is determined by the module's code and its own stylesheets and/or templates and template overrides, if it has them. Joomla 1.5's "module chrome" offers some built-in styling possibilities if it's not overriden by templates and other CSS.

Joomla 1.5 also implements a model-view-controller (MVC) architecture that modules and other extensions should and increasingly do adhere to, but this is not always the case. Following an MVC architecture means extensions' program logic--the primary code determinging raw content output--is separated from design/layout specifications, which are governed by external templates, template overrides, and/or stylesheets.

Use the jPosition component to see a list of all module positions and what's currently in them--this is a little more visually accessible than the Module Manager. You can also click the "Preview" icon within the template manager to see the module positions outlined over the current output of the default template.

{/slide}{slide=Template Module Map for SAILING}xxxx{/slide}{slide=Mobile Device Template}There is a secondary template installed on this site for mobile devices. The PDAbot plugin, if active, will identify mobile device browsers and redirect them to use this stripped-down template. The PDAbot is a system plugin whose settings allow you to determine its performance and which module positions it will display (and where) in the mobile template. NOTE: There is a dedicated module position and banner ad category for small ads sized to conform to recommended ad sizes for mobile devices.{/slide}{slide=Module Caching}Aside from the global caching function in Joomla, most modules can be cached individually by enabling their cache option and setting the time delay for it to be refreshed. Caching will improve page load speed and decrease the server processor load.{/slide}