Difference between revisions of "How to override the output from the Joomla! core"
From Joomla! Documentation
m (1 revision(s)) |
(Update 3.0 to 3.1) |
||
(30 intermediate revisions by 15 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{version/tutor|1.5,2.5,3.1}}There may be occasions where you would like to change the way a Joomla! Extension (such as a Component or Module, whether from the Joomla! core or produced by a third party) is displayed on your site. Of course, you could recode the Extension from scratch, but that may be a bit ambitious for you! Thankfully, there is another way. | |
− | |||
− | |||
− | but you | ||
− | + | The standard output from any Joomla! Module or Component can be overridden by adding code to the <code>html</code> directory of your template. It is also possible to override two aspects of core functionality: Module chrome, and pagination. | |
+ | |||
+ | == Getting a head-start with overrides == | ||
+ | If you are new to Joomla! development, then it is probably easiest to start with an existing view, and try modifying it to get what you want. To do this, you should make a copy of the existing view in the <code>html</code> directory of your template, and then modify the copy. | ||
+ | |||
+ | The directory structure you need is:<br/> | ||
+ | <source lang="xml">TEMPLATE_NAME/html/EXTENSION_NAME/VIEW_NAME/FILE_NAME.php</source> | ||
+ | |||
+ | For example, if you want to change the way that the '<code>Article</code>' view displays a <code>com_content</code> article, then you should copy the file at | ||
+ | |||
+ | <source lang="xml"> | ||
+ | PATH_TO_JOOMLA/components/com_content/views/article/tmpl/default.php | ||
+ | to | ||
+ | TEMPLATE_NAME/html/com_content/article/default.php | ||
+ | </source> | ||
+ | |||
+ | (note the slight difference in directory structure) | ||
+ | |||
+ | Similarly, if you want to change how the <code>mod_login</code> Module is displayed, then you should copy | ||
+ | |||
+ | <source lang="xml"> | ||
+ | PATH_TO_JOOMLA/modules/mod_login/tmpl/default.php | ||
+ | to | ||
+ | TEMPLATE_NAME/html/mod_login/default.php | ||
+ | </source> | ||
+ | |||
+ | |||
+ | Joomla! comes pre-packaged with a frontend template called [[Beez]]. Beez utilizes template overrides to produce a table-less layout for faster, smoother, and semantically correct markup. To see how it's done, locate your Joomla! installation's <code>template</code> directory, and you'll notice the Beez template. Inside the Beez template directory, you'll find a directory named <code>html</code> | ||
+ | |||
+ | the entire directory structure is as follows: | ||
+ | <source lang="xml">/your_joomla/templates/Beez/html/</source> | ||
+ | |||
+ | If you want to try modifying the overrides used in Beez, you could simply copy and paste the Beez <code>html</code> directory into your own template's main directory. | ||
+ | However you choose to make your override files, you will need to ensure that they are correctly installed with your template. To do this, you should add the following code to your template's <code>templateDetails.xml</code> file (in between the <code><files></code> and <code></files></code> tags): | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <folder>html</folder> | ||
+ | </source> | ||
+ | |||
+ | The above code in essence lets the Joomla! [[Installer|package installer]] know that there are files to extract, and that they are part of the template as a whole. | ||
+ | |||
+ | == Further tips == | ||
+ | Template overrides are almost limitless. They allow you to add, edit, and remove the components of the Joomla! core output. | ||
+ | Note: For the FireFox web browser, an extension called [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug] is available, which is useful for browsing a page's HTML source and matching it up with the PHP code used in template overrides. For more information, please watch [[Using Firebug With Your Joomla Website|the free video tutorial on using Firebug with Joomla]]. | ||
+ | Now firebug is also available for IE called [http://getfirebug.com/lite/ie.html Firebug Lite]. | ||
+ | |||
+ | More information is available from the following resources: | ||
+ | * The article [[Understanding Output Overrides]] explains the theory behind template overrides. | ||
+ | * The preferred way of changing text output is by [[Making templates translatable|using translations in your template]]. | ||
+ | * A [http://help.joomla.org/ghop/feb2008/task059/Getting_Started_with_Template_Overrides_v2.tar.gz downloadable tutorial] is also available. | ||
+ | * [https://github.com/AmyStephen/Layout-Override-Plugin Example in github] how to override layout of view without override the view, but extending it. | ||
+ | <noinclude> | ||
+ | [[Category:Tutorials]] | ||
[[Category:Templates]] | [[Category:Templates]] | ||
+ | [[Category:Tips and tricks]] | ||
+ | [[Category:Tips and tricks 1.5]] | ||
+ | [[Category:Tips and tricks 1.6]] | ||
+ | [[Category:Overrides]] | ||
+ | </noinclude> |
Revision as of 04:35, 29 April 2013
This page has been archived. This page contains information for an unsupported Joomla! version or is no longer relevant. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.
There may be occasions where you would like to change the way a Joomla! Extension (such as a Component or Module, whether from the Joomla! core or produced by a third party) is displayed on your site. Of course, you could recode the Extension from scratch, but that may be a bit ambitious for you! Thankfully, there is another way.
The standard output from any Joomla! Module or Component can be overridden by adding code to the html
directory of your template. It is also possible to override two aspects of core functionality: Module chrome, and pagination.
Getting a head-start with overrides[edit]
If you are new to Joomla! development, then it is probably easiest to start with an existing view, and try modifying it to get what you want. To do this, you should make a copy of the existing view in the html
directory of your template, and then modify the copy.
The directory structure you need is:
TEMPLATE_NAME/html/EXTENSION_NAME/VIEW_NAME/FILE_NAME.php
For example, if you want to change the way that the 'Article
' view displays a com_content
article, then you should copy the file at
PATH_TO_JOOMLA/components/com_content/views/article/tmpl/default.php
to
TEMPLATE_NAME/html/com_content/article/default.php
(note the slight difference in directory structure)
Similarly, if you want to change how the mod_login
Module is displayed, then you should copy
PATH_TO_JOOMLA/modules/mod_login/tmpl/default.php
to
TEMPLATE_NAME/html/mod_login/default.php
Joomla! comes pre-packaged with a frontend template called Beez. Beez utilizes template overrides to produce a table-less layout for faster, smoother, and semantically correct markup. To see how it's done, locate your Joomla! installation's template
directory, and you'll notice the Beez template. Inside the Beez template directory, you'll find a directory named html
the entire directory structure is as follows:
/your_joomla/templates/Beez/html/
If you want to try modifying the overrides used in Beez, you could simply copy and paste the Beez html
directory into your own template's main directory.
However you choose to make your override files, you will need to ensure that they are correctly installed with your template. To do this, you should add the following code to your template's templateDetails.xml
file (in between the <files>
and </files>
tags):
<folder>html</folder>
The above code in essence lets the Joomla! package installer know that there are files to extract, and that they are part of the template as a whole.
Further tips[edit]
Template overrides are almost limitless. They allow you to add, edit, and remove the components of the Joomla! core output. Note: For the FireFox web browser, an extension called Firebug is available, which is useful for browsing a page's HTML source and matching it up with the PHP code used in template overrides. For more information, please watch the free video tutorial on using Firebug with Joomla. Now firebug is also available for IE called Firebug Lite.
More information is available from the following resources:
- The article Understanding Output Overrides explains the theory behind template overrides.
- The preferred way of changing text output is by using translations in your template.
- A downloadable tutorial is also available.
- Example in github how to override layout of view without override the view, but extending it.