Thứ Sáu, 17 tháng 5, 2013

Recent changes


This page lists all changes that have been made to the wiki over the selected period. More information on the use of this page is located on the Tracking changes or Recent changes pages. For just a list of new pages see the page, Special:NewPages.


17 May 2013

Understanding Joomla! templates


All site templates (templates that change what your website looks like) can be found in the templates directory. For example, if your template is called "mytemplate", then it would be placed in the folder "[path-to-Joomla!]/templates/mytemplate".
All administrator templates (templates that change what the administrator section of the site looks like) can be found in the administrator/templates directory. For example, if your administrator template is called "myadmintemplate", then it would be placed in the folder "[path-to-Joomla!]/administrator/templates/myadmintemplate".
Typical Template Directory Structure
It is most common for a template to have at least the following files:
  • index.php
Provides the logic for the display and positioning of modules and components.
  • component.php
Provides the logic for the display of the printer friendly page, "E-mail this link to a friend." etc.
  • template.css
Handles the presentational aspects of the template including specifications for margins, fonts, headings, image borders, list formatting, etc.
  • templateDetails.xml
Holds meta-information related to the template and is used by the Installer and the Template Manager.
  • template_thumbnail.ext - replace .ext with the extension format of the image (.jpg, .png, .gif)
Generally a 200x150 pixel image that is shown when the cursor is held over the template name in the Template Manager. This gives the Administrator a snapshot view of the template before applying it to the Site.

A typical template for Joomla! 1.5 will include the following directories:
  • css - contains all the .css files
  • html - contains template override files for core output and module chrome
  • images - contains all images used by the template


The templateDetails.xml file holds a variety of meta-data used by the Template Manager in installation and maintenance. It is helpful to recognize the different sections of the file. Typically, each section of data is indented to make the file more readable, but this indentation is not necessary.

Basic Details

The initial display of the Template Manager shows a list of available templates and basic details relating to the template. Each of these bits of information is gathered from the templateDetails.xml file.
Template details basic.png

<install version="1.5" type="template">
<name>rhuk_milkyway</name>
<creationDate>11/20/06</creationDate>
<author>Andy Miller</author>
<authorEmail>rhuk@rockettheme.com.com</authorEmail>
<authorUrl>http://www.rockettheme.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>TPL_RHUK_MILKYWAY</description>

File Structure

All files related to the template are listed. Each filename contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.
A small portion of the files listed in the rhuk_milkyway template is given below.
    <files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/arrow.png</filename>
<filename>images/indent1.png</filename>
</files>
Optional and highly recommended file structure --

<files>
<filename>index.php</filename>
<filename>component.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<folder>images/</folder>
<folder>css/</folder>
</files>

Languages

Some templates may include language files to allow translation of static text in the template. Notice that two language files are shown below. The first holds the language file for text that will be viewed by the User. The second, placed within <administration> tags, is for text that will be viewed by the Administrator.

<languages>
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
</administration>

Module Positions

The available Module Positions that can be used in the template are defined.
    <positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>

Parameters

A template may offer display options that can be chosen by the Administrator in the Template Manager. For instance, the rhuk_milkyway template allows the Administrator to change the border colors, change the background color, and define the display width.
Template details params.png
An example of adding a parameter and its values is shown below.
    <params>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
<option value="white">White</option>
</param>
</params>
For more information about working with Parameters, see:
Defining a parameter in templateDetails.xml
Retrieving parameter data in a template file

The index.php file is the skeleton of the website. Every page that Joomla! delivers is "index.php" fleshed out with a selection of content inserted from the database.
The index.php file for a template contains a mixture of code that will be delivered as it is, and php code, which will be modified before it is delivered. The code will be familiar to anyone who has designed a simple html webpage: there are 2 main sections - the <head> and <body>. Where index.php differs is the use of php code to insert information selected from a database.
Here is an example:
A tradition HTML head section:
<head>
<title>My Example Webpage</title>
<meta name="title" content="example" />
<link rel="stylesheet" href="www.example.com/css/css.css" type="text/css" />
</head>
And the same thing done the Joomla! way:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>templates/mytemplate/css/css.css" type="text/css" />
</head>
So, instead of these header parts being defined on the index.php file, the header parts are looked up from the database by bits of php code. The clever part is that both these scripts will deliver the same code to a user. If you look at the code of a joomla website, all the <?php blah /> will have been replaced by regular html code.
Good template design
Index.php should be as bare-boned as you can make it because it will be re-sent every time a new page is loaded. Elements such as styling should be delivered in css files that are saved in the users cache. The tutorials here will go through the technical aspects of creating your index.php.
Why index.php?
Index.htm has historically been the name given to the home page of a website. Thus when a user navigates to www.example.org, the webserver delivers www.example.org/index.htm. Because Joomla! is written in PHP, index.php is the automatically served file. To futher complicate things, when a user navigates to the joomla website, the index.php of the root directory redirects to the index.php of the current default template.

Layout Overrides in Joomla 2.5


Introduction to Alternative Layout Feature in Versions 2.5+

Joomla! 1.5 introduced the concept of overriding core layouts using the template override system. Joomla! version 2.5 introduces a set of features that give the site administrator more control over the display of articles, contacts, news feeds, and web links. There are four types of alternative layouts:
  1. Module
  2. Component
  3. Category
  4. Menu Item
Alternative layouts work in a similar fashion to the template override feature but allow you more options and control. Each type is discussed below.

Module Alternative Layouts

Creating an alternative layout for a module is similar to creating a template override for a module. In both cases, you create a folder called "templates/<your template>/html/<module name>. For example, the folder for a "mod_login" template override or alternative layout for the beez5 template would be "templates/beez5/html/mod_login/".
There are two important differences between a template override and an alternative layout. The first is the file name. For the template override, you would call the file "default.php" to match the core file name. For an alternative layout, you use a different name. The only rule is that the file name should not have any underscores in it. This allows you to have complex layouts that include multiple files. The initial file to be called is named without underscores and any other files that are called from this initial file will have underscores in the name. For example, you could have the initial file called "mynewlogin.php" which calls "mynewlogin_1.php".
The second important difference is that, unlike template override files which are called automatically whenever the module is displayed using the template with the override, an alternative layout file is only called if you select it as a parameter in the Module Manager. In version 2.5 and later, there is a new parameter under Advanced Options called Alternative Layout, as shown below.
Screenshot override tutorial 20110107-01.png
This parameter will list any files (without underscores) that you have placed in the template folder for this module. You can also translate the file name using the template's system language file. For example, if you add the line
TPL_BEEZ5_MOD_LOGIN_LAYOUT_NOLOGIN="Alt Login Layout"
to the file "en-GB.tpl_beez5.sys.ini", it will translate the file name "nologin.php" to "Alt Login Layout".
It is important to understand that if specified in the Module Manager screen, an alternative layout file for a module will be used for that module regardless of what template is used to display the page where the module is shown. It is therefore the administrator's responsibility to make sure that the layout file will work as desired in any templates where this module may be shown.

Plugin Alternative Layouts (Tested with Joomla 3.1)

Yes,it's possible to override plugin outputs.It's very useful, especially for content plugins.
For example to override the output of pagenavigation content plugin in "beez5" template, (It's responsible to show previous/next article links in article view of content component), create a folder named "templates/beez5/html/plg_content_pagenavigation/" and copy the original layout file (plugins/content/pagenavigation/tmpl/default.php) to this new folder.
So you can change this layour file to override plugin output.
Note:I think, this feature is very new, not all plugins support this yet

Component Alternative Layouts

Component alternative layouts work similarly to module layouts discussed above. Again, a file is placed in the same folder where you place a template override file. For example, to create an alternative layout for an article for the template "beez5", you would put a file in the folder "templates/beez5/html/com_content/article/". As with module layouts, the file should not be named the same as the core file and should not include underscores in the name. Additionally, there should not be an XML file of the same name in this folder. (We'll discuss XML files below under Menu Item Alternative Layouts.)
You can set a global value for component layouts in the Options window of the component. For example, in the Article Manager Options window, there is a parameter for Alternative Layout as shown below:
Screenshot override tutorial 20110107-02.png
This will create a global value that individual components (articles, contacts, newsfeeds, and weblinks) can inherit from.
As with module layouts, the component layouts are shown as parameter options in the individual component edit screen. For example, for an article, the parameter shows in the Article Options group as shown below.
Screenshot override tutorial 20110107-03.png
As with other parameters, the Use Global setting will use the setting from the Options parameter. The From Component's Default setting will use the component's default layout. Alternative layouts that you have created for different templates are shown under each template heading.
File names may be translated. The line below
TPL_BEEZ5_COM_CONTENT_ARTICLE_LAYOUT_MYLAYOUT="Title Only No XML"
will translate a file called "mylayout.php" as "Title Only No XML".
You can have more than one file for a layout. The initial file must be named without underscores and any additional files must have underscores.
Component alternative layouts may be used with articles, contacts, or news feeds. Web links don't have a single-component layout so no alternative layout is available for web links.
Component alternative layouts are only used when two conditions are met: (1) they are specified in the component parameters; and (2) there is no menu item for this specific component. For example, if you have one or more menu items of type "Single Article" set up for a given article, then the alternative layout for that article will not be used. Instead, the layout specified in the menu item will be used. This is consistent with the general way that component parameters work, where the most specific (in this case a single-article menu item) overrides the less specific (in this case, the article parameters).

Category Alternative Layouts

Category alternative layouts work identically to component layouts. The rules for specifying layout files are the same. The only difference is that the folder is the category folder, not the component folder. For example, a contact category alternative layout for beez5 would go in the folder "templates/beez5/html/com_contact/category".
You can set category layouts globally, in the Options screen of each component. Below is an example from the Contact Manager Options screen:
Screenshot override tutorial 20110107-04.png
Category alternative layouts show up when you add or edit a category in the Category Manager under the Basic Options, as shown below.
Screenshot override tutorial 20110107-05.png
Category alternative layouts may be used for articles, contacts, news feeds, and web links.
As with component layouts, category layouts only will show if (1) they are specified for the category in the global or category parameters and (2) there is no menu item specifically for this category (for example, List Contacts in a Category, List Newsfeeds in a Category, List Weblinks in a Category, Category List, Category Blog).
If there is a menu item set up for this specific category, that layout will be used instead of the alternative category layout.

Drill Down to Blog or List

For articles, we have two core layouts available: Blog and List. Both of these options show under the "From Component" heading in the layout parameters for article category. So, like other layout options, you can now select Blog or List for categories either globally (in the Article Manager Options, shown below), or when editing a single article category.
Screenshot override tutorial 20110107-06.png
This means that, like other layout options, you can control whether article category links drill down to blog or list layouts. It is important to understand that, like other layout parameters, this option will only take effect when there is no single-category menu item for the category.

Alternative Menu Items

Alternative Menu Items have one important difference with the others. To create a menu item alternative layout, you must include an XML file whose name matches the initial layout file. For example, to create an alternative menu item called "myarticle" for an article in the beez5 template, you would create two files in the "templates/beez5/html/com_content/article" folder called "myarticle.php" and "myarticle.xml". If you wanted to include more layout files, you would add these files with underscores in the file names.
The XML file uses the same format as the core Menu Item XML files. This allows you not only to create a customized layout for this menu item, it also allows you to create customized parameters. For example, you could hide some parameters or add new parameters.
Alternative Menu Items show up when you select a menu item type in the Menu Manager, as shown below.
Screenshot override tutorial 20110107-07.png
Alternative Menu Items are used and work the same way as standard menu items. Since they are already based on customised layouts, template overrides do not apply to alternative menu items.
As indicated above, menu item layouts take priority over component or category alternative layouts.
Translation of alternative menu items is done with the following tags in the XML files. The format is "TPL_"<template name>_<component>_<view>_<menu item name>_<tag type>. For example, these lines below will translate the title, option, and description for an alternative menu item called "catmenuitem".
TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_TITLE="Beez5 Custom Category Layout"
TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_OPTION="Beez5 Custom"
TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_DESC="Description for beez5 custom category layout."
These strings have to be added to language/en-GB/en-GB.tpl_beez5.sys.ini
The catmenuitem.xml would start with:
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_TITLE" option="TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_OPTION">
<help
key = "JHELP_MENUS_MENU_ITEM_ARTICLE_SINGLE_ARTICLE"
/>
<message>
<![CDATA[TPL_BEEZ5_COM_CONTENT_CATEGORY_VIEW_CATMENUITEM_DESC]]>
</message>
</layout>

Controlling the Template for Alternative Menu Items

As discussed above, the presence of an XML file makes an alternative layout a menu item. The format of the XML file is the same as the format for core menu item XML files. With this XML file, you can add the parameters you wish to include for this menu item. They can be the same as one of the core menu items, or you can omit core parameters or add new ones. Note that if you add new parameters, these can be used in the layout file but will not be used in the core model or view files.
It is also possible to override parameter settings for core parameters. One example of this is to control which templates an alternative menu item layout can be displayed with. In some cases, you may want to allow a custom menu item to be displayed with any template for the site. In other cases, you may wish to limit that menu item's layout to one specific template. In this situation, you would just add the following parameter to the menu item's XML file:
<fields>
<field
name=''"template_style_id"''
type=''"templatestyle"''
label=''"COM_MENUS_ITEM_FIELD_TEMPLATE_LABEL"''
description=''"COM_MENUS_ITEM_FIELD_TEMPLATE_DESC"''
filter=''"int"''
template=''"beez5"''
class=''"inputbox"''>
</field>
</fields>
This will override the core "template_style_id" parameter. Setting the template equal to "beez5" in this case will limit the user to only selecting template styles for the "beez5" template.