Actions

Difference between revisions of "How to override the output from the Joomla! core"

From Joomla! Documentation

m (Getting A Head-Start with Overrides)
(Expanded article and included more generic info)
Line 1: Line 1:
 
{{review}}
 
{{review}}
The standard output from the Joomla! core can be overridden by adding code to the html directory in a template. Basic overrides include: <code>your_template/html/modules.php</code> (overriding module output) and <code>your_template/html/pagination.php</code> (overriding pagination output); however, it is possible to override the output of any module or component.
+
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 <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 <code>TEMPLATE_NAME/html/EXTENSION_NAME/VIEW_NAME/FILE_NAME.php</code>.
 +
 
 +
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 <code>PATH_TO_JOOMLA/components/com_content/views/article/tmpl/default.php</code> to <code>TEMPLATE_NAME/html/com_content/article/default.php</code> (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 <code>PATH_TO_JOOMLA/modules/mod_login/tmpl/default.php</code> to <code>TEMPLATE_NAME/html/mod_login/default.php</code>.
 +
 
  
== Getting A Head-Start with Overrides ==
 
 
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 add the table-less layout to your template, locate your Joomla! installation's template directory, and you'll notice the Beez template. Inside the Beez template directory, copy the folder titled <code>html</code> (the entire directory structure is as follows: <code>/your_joomla/templates/Beez/html/</code>) and paste the html folder into your template's main directory. After copying Beez's html folder to your template, you must add the following code to your template's <code>templateDetails.xml</code> file (in between the <code><files></code> and <code></files></code> tags):
 
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 add the table-less layout to your template, locate your Joomla! installation's template directory, and you'll notice the Beez template. Inside the Beez template directory, copy the folder titled <code>html</code> (the entire directory structure is as follows: <code>/your_joomla/templates/Beez/html/</code>) and paste the html folder into your template's main directory. After copying Beez's html folder to your template, you must add the following code to your template's <code>templateDetails.xml</code> file (in between the <code><files></code> and <code></files></code> tags):
  

Revision as of 17:02, 22 May 2008

Copyedit.png
This Article Needs Your Help

This article is tagged because it NEEDS REVIEW. 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.


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

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 add the table-less layout to your template, locate your Joomla! installation's template directory, and you'll notice the Beez template. Inside the Beez template directory, copy the folder titled html (the entire directory structure is as follows: /your_joomla/templates/Beez/html/) and paste the html folder into your template's main directory. After copying Beez's html folder to your template, you must add the following code to your template's templateDetails.xml file (in between the <files> and </files> tags):

<filename>html/com_contact/category/default.php</filename>
<filename>html/com_contact/category/default_items.php</filename>
<filename>html/com_contact/category/index.html</filename>
<filename>html/com_contact/contact/default.php</filename>
<filename>html/com_contact/contact/default_address.php</filename>
<filename>html/com_contact/contact/default_form.php</filename>
<filename>html/com_contact/contact/index.html</filename>
<filename>html/com_contact/index.html</filename>
<filename>html/com_content/article/default.php</filename>
<filename>html/com_content/article/index.html</filename>
<filename>html/com_content/article/form.php</filename>
<filename>html/com_content/category/blog.php</filename>
<filename>html/com_content/category/blog_item.php</filename>
<filename>html/com_content/category/blog_links.php</filename>
<filename>html/com_content/category/index.html</filename>
<filename>html/com_content/category/default_items.php</filename>
<filename>html/com_content/category/default.php</filename>
<filename>html/com_content/frontpage/default.php</filename>
<filename>html/com_content/frontpage/default_item.php</filename>
<filename>html/com_content/frontpage/default_links.php</filename>
<filename>html/com_content/frontpage/index.html</filename>
<filename>html/com_content/section/blog.php</filename>
<filename>html/com_content/section/blog_item.php</filename>
<filename>html/com_content/section/blog_links.php</filename>
<filename>html/com_content/section/default.php</filename>
<filename>html/com_content/section/index.html</filename>
<filename>html/com_content/index.html</filename>
<filename>html/index.html</filename>
<filename>html/com_search/search/default.php</filename>
<filename>html/com_search/search/default_error.php</filename>
<filename>html/com_search/search/default_form.php</filename>
<filename>html/com_search/search/default_results.php</filename>
<filename>html/com_search/search/index.html</filename>
<filename>html/com_search/index.html</filename>
<filename>html/editor_content.css</filename>
<filename>html/mod_latestnews/default.php</filename>
<filename>html/mod_latestnews/index.html</filename>
<filename>html/mod_login/default.php</filename>
<filename>html/mod_login/index.html</filename>
<filename>html/mod_newsflash/_item.php</filename>
<filename>html/mod_newsflash/default.php</filename>
<filename>html/mod_newsflash/horiz.php</filename>
<filename>html/mod_newsflash/vert.php</filename>
<filename>html/mod_newsflash/index.html</filename>
<filename>html/mod_poll/default.php</filename>
<filename>html/mod_poll/index.html</filename>
<filename>html/mod_search/default.php</filename>
<filename>html/mod_search/index.html</filename>
<filename>html/modules.php</filename>
<filename>html/pagination.php</filename>
<filename>html/com_poll/poll/default.php</filename>
<filename>html/com_poll/poll/default_graph.php</filename>
<filename>html/com_poll/poll/index.html</filename>
<filename>html/com_poll/index.html</filename>
<filename>html/com_newsfeeds/categories/default.php</filename>
<filename>html/com_newsfeeds/categories/index.html</filename>
<filename>html/com_newsfeeds/category/default.php</filename>
<filename>html/com_newsfeeds/category/default_items.php</filename>
<filename>html/com_newsfeeds/category/index.html</filename>
<filename>html/com_newsfeeds/newsfeed/default.php</filename>
<filename>html/com_newsfeeds/newsfeed/index.html</filename>
<filename>html/com_newsfeeds/index.html</filename>
<filename>html/com_weblinks/categories/default.php</filename>
<filename>html/com_weblinks/categories/index.html</filename>
<filename>html/com_weblinks/category/default.php</filename>
<filename>html/com_weblinks/category/default_items.php</filename>
<filename>html/com_weblinks/category/index.html</filename>
<filename>html/com_weblinks/weblinks/form.php</filename>
<filename>html/com_weblinks/weblinks/index.html</filename>
<filename>html/com_weblinks/index.html</filename>
<filename>html/com_user/user/index.html</filename>
<filename>html/com_user/user/default.php</filename>
<filename>html/com_user/user/form.php</filename>
<filename>html/com_user/login/index.html</filename>
<filename>html/com_user/login/default_login.php</filename>
<filename>html/com_user/login/default.php</filename>
<filename>html/com_user/login/default_logout.php</filename>
<filename>html/com_user/register/default.php</filename>
<filename>html/com_user/register/index.html</filename>
<filename>html/com_user/register/default_message.php</filename>
<filename>html/com_user/index.html</filename>
<filename>html/com_user/remind/index.html</filename>
<filename>html/com_user/remind/default.php</filename>
<filename>html/com_user/remind/default_message.php</filename>
<filename>html/com_user/reset/index.html</filename>
<filename>html/com_user/reset/default.php</filename>
<filename>html/com_user/reset/confirm.php</filename>
<filename>html/com_user/reset/complete.php</filename>

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.

Complex Overrides

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 is available called Firebug, which is useful for browsing a page's HTML source and matching it up with the PHP code used in template overrides.

Which File To Edit

Here is a list of very important and commonly used files for editing purposes:

  • html/com_content/frontpage/default.php

Detail to follow