Template reference material
From Joomla! Documentation
It has been suggested that this article or section be split into specific version Namespaces. (Discuss). If version split is not obvious, please allow split request to remain for 1 week pending discussions. Proposed since 2 years ago.
jdoc include Types
jdoc statements are included in every Joomla template and indicate where the output from other parts of Joomla or its extensions should be positioned in the overall web page. A typical jdoc statement looks like this: <jdoc:include type="component" />
jdoc:include
The <jdoc:include /> statement is a Joomla! template's method of displaying content specific to the page being viewed. There are various <jdoc:include /> statements, each returning a different part of a Joomla! page. The replacement itself is done in JDocumentHTML::_renderTemplate. See also _parseTemplate.
The type attribute
The type attribute specifies the type of content to be rendered in place of the <jdoc:include /> element. For example, the <jdoc:include type="head" /> statement uses the type attribute head (type="head"). (Note: Jdoc expressions require double quotes around attributes, and won't work with single quotes. The space before the closing /> is also mandatory.)
Component
<jdoc:include type="component" />
This element should only appear once in the <body> element of the Template to render the main content of the page with respect to the current page being viewed.
Head
<jdoc:include type="head" />
This element should only appear once in the <head> element of the Template to render the content of the style, script and meta elements associated with the current page.
Installation
<jdoc:include type="installation" />
This element is only used within the Joomla! Installer template for Joomla 
and below and is of no particular use in a Front-end or Back-end template. It's somewhat the equivalent to the 'component' type, rendering the main content of an installation step.
Message
<jdoc:include type="message" />
This element should only appear once in the <body> element of the Template to render system and error messages that occurred in the request.
CSS styles for system messages can be found in templates\system\css\system.css
Module
<jdoc:include type="module" name="breadcrumbs" title="Breadcrumbs" />
<jdoc:include type="module" name="mainmenu" title="Main Menu" />
This element renders a single module given by the name and title attributes: name should match module type (mod_breadcrumbs and mod_menu in the examples above) while title should be the module name of the desired module. The module in question must be published and accessible by the current user in order to become visible. Additional attributes can be provided to control the layout and appearance of the module, if supported.
Modules
Modules are rendered on a page using one of the following code examples. The modules are separated into different areas of a template using template positions set in the templatedetails.xml file. Using the jdoc:include's name="[template position name]" attribute, the various modules in their respective positions can be called, rendered, and styled separately. Additional attributes can be provided to control the layout and appearance of modules, if supported.
Below are some examples of module statements with module positions used frequently by Joomla! theme developers.
<jdoc:include type="modules" name="debug" />
<jdoc:include type="modules" name="icon" />
<jdoc:include type="modules" name="left" style="rounded" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="status" />
<jdoc:include type="modules" name="syndicate" />
<jdoc:include type="modules" name="title" />
<jdoc:include type="modules" name="toolbar" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />
Note: The name="user3" module position is normally (by default) used for the top menu.
The style attribute
The optional style="" attribute is available for the module and modules types of <jdoc:include /> statements. The attribute value refers to the chrome style used to wrap the output generated by the Module. If no style is provided, a value of "none" is used by default.
Template designers may add additional chrome names as described in Applying custom module chrome.
See also
Module Chrome
The following standard module chromes are available:
- none. Output the raw Module content with no wrapping.
- table. Output the module in a table.
- horz. Output the module as a table inside an outer table.
- xhtml. Output the module wrapped in div tags.
- rounded. Output the module wrapped in nested div tags to support rounded corners.
- outline. Output the module wrapped with a preview border.
CSS Classes
| Core CSS Class | Used With |
|---|---|
| active | xhtml type menu modules |
| article_separator | articles |
| author | article author |
| bannerfooter | banner module |
| bannergroup | banner module |
| bannerheader | banner module |
| banneritem | banner module |
| blog | blog content |
| blog_more | blog content |
| blogsection | blog content |
| breadcrumbs | breadcrumb module; also see pathway |
| button | miscellaneous |
| buttonheading | miscellaneous |
| clr | miscellaneous |
| componentheading | component |
| content_email | content |
| content_rating | content |
| content_vote | content |
| contentdescription | content |
| contentheading | content |
| contentpagetitle | content |
| contentpane | content |
| contentpaneopen | content |
| contenttoc | content |
| createdate | content |
| created-date | content |
| current | horizontal and vertical type menu modules (legacy) |
| form-login | login module |
| modlgn_passwd | login module |
| form-login-username | login module |
| form-login-password | login module |
| modlgn_remember | login module |
| hasTip | |
| input | forms |
| inputbox | forms |
| intro | |
| latestnews | latest news module |
| loclink | |
| mainlevel | legacy - horizontal, vertical, flat list menu module types; also see sublevel |
| menu | menu modules with xhtml framing |
| message | |
| metadata | |
| modifydate | articles - last modified date/time |
| moduletable | module |
| mosimage | images |
| mostread | most read module |
| newsfeed | news feeds |
| outline | |
| pagenav | page navigation |
| pagenav_next | page navigation |
| pagenav_prev | page navigation |
| pagenavbar | page navigation |
| pagenavcounter | page navigation |
| pagination | page numbering |
| pathway | breadcrumb module; also see breadcrumb |
| pollstableborder | poll module |
| readon | read more link |
| searchbox | search module |
| search | search module |
| searchintro | search module |
| sections | content |
| sectiontable_footer | content |
| sectiontableentry1 | content |
| sectiontableentry2 | content |
| sectiontablefooter | content |
| sectiontableheader | content |
| small | default small font |
| sublevel | legacy - horizontal, vertical, flat list module types; also see mainlevel |
| title | title in xhtml type modules |
| wrapper | wrapper module |
Learning Resources for HTML and CSS
CSS
Design Tools
- Web Developer's Handbook, a massive directory of design resources for web developers.
- Colour scheme generator
Learn HTML
- W3 Schools - HTML tutorials, a good resource for complete beginers.
- Jessey.net XHTML Tutorial, for learning xHTML, which Joomla is based on.
Using PHP in Your Template
Operators for Use with the countModules Function
The following logical, comparison and arithmetic operators are available:
| Operator | Example | Description |
|---|---|---|
| + | user1 + user2
|
Total number of Modules in user1 and user2 positions. |
| - | user1 - user2
|
The number of Modules in the user1 position minus the number in the user2 position. |
| * | user1 * user2
|
The number of Modules in the user1 position multiplied by the number in the user2 position. |
| / | user1 / user2
|
The number of Modules in the user1 position divided by the number in the user2 position. |
| == | user1 == user2
|
Returns true if user1 and user2 have the same number of Modules enabled; otherwise returns false. |
| != | user1 != user2
|
Returns true if user1 and user2 do not have the same number of Modules enabled; otherwise returns false. |
| <> | user1 <> user2
|
Same as !=. |
| < | user1 < user2
|
Returns true if user1 has strictly less Modules enabled than user2; otherwise returns false. |
| > | user1 > user2
|
Returns true if user2 has strictly more Modules enabled than user1; otherwise returns false. |
| <= | user1 <= user2
|
Returns true if user1 has the same or less Modules enabled than user2; otherwise returns false. |
| >= | user1 >= user2
|
Returns true if user2 has the same or more Modules enabled than user1; otherwise returns false. |
| and | user1 and user2
|
Returns true if user1 and user2 both have at least 1 enabled Module; otherwise returns false. |
| or | user1 or user2
|
Returns true if user1 or user2 or both have at least 1 enabled Module; otherwise returns false. |
| xor | user1 xor user2
|
Returns true if user1 or user2 but not both have at least 1 enabled Module; otherwise returns false. |
Note that if countModules() returns any non-zero number it is equivalent to true; whereas zero is equivalent to false.
More than two module positions can be included in an expression. Evaluation of the expression is performed from left to right subject to operator precedence.
The following table lists the precedence of operators with the highest-precedence operators listed at the top of the table. Operators on the same line have equal precedence, in which case they are evaluated from left to right. The use of brackets to override precedence is not supported.
| Operators | Operator type |
|---|---|
| * / | Arithmetic operators |
| + - | Arithmetic operators |
| < <= > >= | Comparison operators |
| == != | Comparison operators |
| and | Logical operator |
| xor | Logical operator |
| or | Logical operator |
Objects, Methods and Properties Available from Your Template
According to
<?php print_r($this); ?>
in Joomla! 3.1, the object $this within the index.php file of the Protostar template looks like:
JDocumentHTML Object
(
[_links] => Array
(
[http://j3demo/?view=featured] => Array
(
[relation] => canonical
[relType] => rel
[attribs] => Array
(
)
)
[/index.php?format=feed&type=rss] => Array
(
[relation] => alternate
[relType] => rel
[attribs] => Array
(
[type] => application/rss+xml
[title] => RSS 2.0 )
)
[/index.php?format=feed&type=atom] => Array
(
[relation] => alternate
[relType] => rel [attribs] => Array
(
[type] => application/atom+xml
[title] => Atom 1.0
)
)
[_custom] => Array
(
)
[template] => protostar
[baseurl] =>
[params] => JRegistry Object
(
[data:protected] => stdClass Object
(
[templateColor] =>
[logoFile] =>
[googleFont] => 1
[googleFontName] => Open+Sans
[fluidContainer] => 0
)
)
[_file] => /home/j3demo/public_html/templates/protostar/index.php
[_template:protected] =>
[_template_tags:protected] => Array
(
)
[_caching:protected] =>
[_html5:JDocumentHTML:private] =>
[title] => Home
[description] => Joomla 3 demo
[link] => [base] => http://j3demo/
[language] => en-gb
[direction] => ltr
[_generator] => Joomla! - Open Source Content Management
[_mdate] =>
[_tab] =>
[_lineEnd] =>
[_charset] => utf-8
[_mime] => text/html
[_namespace] =>
[_profile] =>
[_scripts] => Array
(
[/media/system/js/mootools-core.js] => Array
(
[mime] => text/javascript
[defer] => [async] =>
)
[/media/system/js/core.js] => Array
(
[mime] => text/javascript
[defer] =>
[async] =>
)
[/media/system/js/caption.js] => Array
(
[mime] => text/javascript
[defer] =>
[async] =>
)
[/media/jui/js/jquery.min.js] => Array
(
[mime] => text/javascript
[defer] =>
[async] =>
)
[/media/jui/js/jquery-noconflict.js] => Array
(
[mime] => text/javascript
[defer] =>
[async] =>
)
[/media/jui/js/bootstrap.min.js] => Array
(
[mime] => text/javascript
[defer] =>
[async] =>
)
)
[_script] => Array
(
[text/javascript] => window.addEvent('load', function() {
new JCaption('img.caption');
}); )
[_styleSheets] => Array
(
[templates/protostar/css/template.css] => Array
(
[mime] => text/css
[media] =>
[attribs] => Array
(
)
)
)
[_style] => Array
(
)
[_metaTags] => Array
(
[http-equiv] => Array
(
[content-type] => text/html; charset=utf-8
)
[standard] => Array
(
[keywords] =>
[rights] =>
)
)
[_engine] =>
[_type] => html
[_errors:protected] => Array
(
)
)
Example of using objects
<link rel="stylesheet" href="'''<?=$this->baseurl ?>'''/templates/'''<?=$this->template ?>'''/css/template_css.css" type="text/css"/>
AJAX and JavaScript
Asynchronous JavaScript and XML or AJAX, is a term for a group of interrelated web development techniques used for creating interactive web applications or commonly known as web 2.0. Ajax allows web applications to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing website page. Data is retrieved using the XMLHttpRequest object or through the use of Remote Scripting in browsers that do not support it.
JavaScript Resources:
Web page diagnostic tools
Many browsers can act as platforms for diagnostic tools. You can analyze Web pages built with any version of Joomla by using them. These browser tools have many built-in features such as a DOM Inspector, JavaScript Debugger, Network Inspector, Resources Inspector, Storage Inspector, Profiler, Error Log, Remote Debugging, etc. These tools make it easier to see and debug exactly what is being processed by a browser when rendering a web page.
Mozilla Firefox Web Browser
- Web Developer toolbar (Firefox, Flock, Seamonkey)
- Joomla Developer Toolbox - a collection of essential extensions for web developers (Firefox)
Internet Explorer Web Browser
Note Full support for Internet Explorer was discontinued on June 15, 2022.
- MSIE 8+, press Shift+F12 or click the Developer Tools icon in the command bar
- DebugBar (MSIE 5 - 11, free for personal use)
- Users of Office XP and later may also install the Script Debugger via Office Setup. (The debugger is not installed by default.)
- See also Microsoft's Tools for Debugging Web Applications and Add-Ons
Opera Web Browser
Opera has a built-in diagnostic tool. See Streamline development with developer tools
Safari Web Browser
- Apple Safari Web development tools (
) - WebKit Drosera JavaScript Debugger ( WebKit:
)
