Difference between revisions of "Template reference material"

From Joomla! Documentation

m (→‎CSS classes: wikitable class)
m (→‎Configuration variables: removing section can be added back in after JSplit)
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{JSplit}}
 
{{:What jdoc include types are available?}}
 
{{:What jdoc include types are available?}}
 
===Module chrome===
 
===Module chrome===
 
{{:Standard module chrome styles}}
 
{{:Standard module chrome styles}}
{{stub}}
+
 
 
==CSS classes==
 
==CSS classes==
{{stub}}
 
{{:Default CSS classes}}
 
 
{| class="wikitable"
 
{| class="wikitable"
 
| align="center" style="background:#f0f0f0;"|'''Core CSS Class'''
 
| align="center" style="background:#f0f0f0;"|'''Core CSS Class'''
Line 151: Line 150:
 
|}
 
|}
  
==Configuration variables==
 
{{:Configuration variables deprecated in Joomla! 1.5}}
 
 
==Learning resources for HTML and CSS==
 
==Learning resources for HTML and CSS==
 
{{:Where can you learn about HTML?}}{{-}}
 
{{:Where can you learn about HTML?}}{{-}}
Line 161: Line 158:
 
{{-}}
 
{{-}}
 
{{:Objects, methods and properties available from your template}}
 
{{:Objects, methods and properties available from your template}}
==Security==
 
{{:Security do's and don't's}}
 
 
==AJAX and JavaScript ==
 
==AJAX and JavaScript ==
 
{{:AJAX}}
 
{{:AJAX}}

Revision as of 16:00, 25 April 2013

Split-icon.png
Split Page into Specific Joomla! Versions - J2.5 and 3.x

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 10 years ago.


<translate> 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" /> </translate> <translate>== jdoc:include == </translate> <translate> 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.</translate>

<translate>=== The type Attribute === </translate> <translate> 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.)</translate>

<translate>==== Component ==== </translate>

<jdoc:include type="component" />

<translate> 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.</translate>

<translate>==== Head ==== </translate>

<jdoc:include type="head" />

<translate> 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.</translate>

<translate>==== Installation ==== </translate>

<jdoc:include type="installation" />

<translate> 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 Frontend or Backend template. It's somewhat the equivalent to the 'component' type, rendering the main content of an installation step.</translate>

<translate>==== Message ==== </translate>

<jdoc:include type="message" />

<translate> This element should only appear once in the <body> element of the Template to render system and error messages that occurred in the request.</translate>

<translate> CSS styles for system messages can be found in</translate> templates\system\css\system.css

<translate>==== Module ==== </translate>

<jdoc:include type="module" name="breadcrumbs" title="Breadcrumbs" />
<jdoc:include type="module" name="mainmenu" title="Main Menu" />

<translate> 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.</translate>

<translate>==== Modules ==== </translate> <translate> 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.</translate>

<translate> Below are some examples of module statements with module positions used frequently by Joomla! theme developers.</translate>

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

<translate> Note: The name="user3" module position is normally (by default) used for the top menu.</translate>

<translate>=== The style Attribute === </translate> <translate> 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.</translate>

<translate> Template designers may add additional chrome names as described in Applying custom module chrome.</translate>

<translate>==See also== </translate>

  • <translate>

Understanding Joomla! templates</translate>

  • <translate>

Creating a basic Joomla! template</translate>

<translate></translate>

Module chrome[edit]

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[edit]

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[edit]

<translate> Joomla! Developers Portal</translate>

{{Portal:Developers/Intro/<translate> en</translate>}}

<translate> Getting Started!</translate>

{{Portal:Developers/Resources/<translate> en</translate>}}

<translate>==There are four types of extensions development== </translate>

<translate> Components</translate>

{{Portal:Component_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Component Development Portal page.</translate>


<translate> Plugins</translate>

{{Portal:Plugin_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Plugin Development Portal page.</translate>


<translate> Modules</translate>

{{Portal:Module_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Module Development Portal page.</translate>


<translate> Templates</translate>

{{Portal:Template_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Template Development Portal page.</translate>

<translate>==More Development Topics== </translate>

<translate> Database</translate>

{{Portal:Developers/Database/<translate> en</translate>}}

<translate> Localisation</translate>

{{Portal:Developers/Localisation/<translate> en</translate>}}

<translate> ACL Topics</translate>

{{Portal:Developers/Access Control/<translate> en</translate>}}

<translate> Forms</translate>

{{Portal:Developers/Forms/<translate> en</translate>}}

<translate> API Guides</translate>

<translate> The Joomla API Guides provide explanations and sample code relating to the Joomla API functions, to help you understand how to use the APIs in your own extensions. Click here to get to the index of these guides.</translate>

<translate> Security</translate>

{{Portal:Developers/Security/<translate>

en</translate>}}
<translate> For more articles and information:</translate>

<translate> See the Security Portal page.</translate>

<translate> Contributing to Documentation</translate>

{{Portal:Developers/Developer_Documentation/<translate> en</translate>}}


<translate> Joomla! Developers Portal</translate>


{{Portal:Developers/Intro/<translate> en</translate>}}

<translate> Getting Started!</translate>

{{Portal:Developers/Resources/<translate> en</translate>}}

<translate>==There are four types of extensions development== </translate>

<translate> Components</translate>

{{Portal:Component_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Component Development Portal page.</translate>


<translate> Plugins</translate>

{{Portal:Plugin_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Plugin Development Portal page.</translate>


<translate> Modules</translate>

{{Portal:Module_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Module Development Portal page.</translate>


<translate> Templates</translate>

{{Portal:Template_Development/Reading_list/<translate>

en</translate>}}

<translate> For more articles and information:</translate>

<translate> See the Template Development Portal page.</translate>

<translate>==More Development Topics== </translate>

<translate> Database</translate>

{{Portal:Developers/Database/<translate> en</translate>}}

<translate> Localisation</translate>

{{Portal:Developers/Localisation/<translate> en</translate>}}

<translate> ACL Topics</translate>

{{Portal:Developers/Access Control/<translate> en</translate>}}

<translate> Forms</translate>

{{Portal:Developers/Forms/<translate> en</translate>}}

<translate> API Guides</translate>

<translate> The Joomla API Guides provide explanations and sample code relating to the Joomla API functions, to help you understand how to use the APIs in your own extensions. Click here to get to the index of these guides.</translate>

<translate> Security</translate>

{{Portal:Developers/Security/<translate>

en</translate>}}
<translate> For more articles and information:</translate>

<translate> See the Security Portal page.</translate>

<translate> Contributing to Documentation</translate>

{{Portal:Developers/Developer_Documentation/<translate> en</translate>}}


Using PHP in your template[edit]

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[edit]

<link rel="stylesheet" href="'''<?=$this->baseurl ?>'''/templates/'''<?=$this->template ?>'''/css/template_css.css" type="text/css"/>

AJAX and JavaScript[edit]


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[edit]

Internet Explorer Web Browser[edit]

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[edit]

Opera has a built-in diagnostic tool. See Streamline development with developer tools

Safari Web Browser[edit]

See also[edit]