Actions

Template reference material

From Joomla! Documentation

Revision as of 12:29, 22 June 2008 by Harryb (Talk | contribs)

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" /> See the jdoc statements article for more information.

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 Joomla 2.5 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

Default 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
read
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

Configuration variables

Configuration variables deprecated in Joomla! 1.5

Learning resources for HTML and CSS

Contents

Template reference material/Intro


Getting Started

Template reference material/Resources There are four types of extension development:

More Development Topics

Template reference material/Intro


Getting Started

Template reference material/Resources There are four types of extension development:

More Development Topics

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

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"/>

Security

Security do's and don't's

AJAX and JavaScript

Copyedit.png
This Article Needs Your Help

This article is tagged because it NEEDS IMPROVEMENT. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.


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.

Using AJAX in Joomla

Javascript Resources:

  1. jQuery
  2. MooTools
  3. Prototype
  4. Script.aculo.us
  5. Help I Don’t Know JavaScript Blog


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

  • Firebug is an Add-on for Firefox 1.5+
For more information, please watch the free video tutorial on using Firebug with Joomla.)
Screenshot-368firebug.png

Internet Explorer Web Browser

Opera Web Browser

Opera has a built-in diagnostic tool called Dragonfly. When viewing the page, right click and choose "Inspect Element" to start Dragonfly.

Safari Web Browser

See also