Actions

J3.x

Difference between revisions of "Modifying a Joomla! Template"

From Joomla! Documentation

(before you begin)
(Upgrade Categories to 2.5 and 3.1 as this page is not 1.5 specific anymore. Add version tags)
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Templates are just a series of xml, php, html and image files that are stored in the templates directory of your site.
+
{{version|2.5,3.1}}
You can edit these files or you can use the editing interface available in the [[Template Manager]].
+
Templates are just a group of XML, PHP, HTML and image files that are stored in the ''templates'' directory of your site. You can edit these files or you can use the editing interface available in the [[Template Manager]].
 +
== Before You Begin ==
 +
Before you start hacking away at a default installed template, remember that any updates of the Joomla core files is likely to contain new copies of the default templates. Unless you take steps to protect your work, your modifications will be lost.
  
== Before you begin ==
+
There are options in the Template Manager to Duplicate and Copy an existing template. Note that you are only copying the style of the template and you are '''not''' protected from overwrites. There is simply another entry made in the ''_template_styles'' table of the database. The template files are '''not''' duplicated into another uniquely-named directory and they will be overwritten during an upgrade.
Before you start hacking away at the a default installed template you may want to do ONE of the following. Doing one of these options will save you from worrying about any future updates to the Joomla source code that might overwrite your existing edits.
+
  
=== Option One ===
+
For example, consider the case in which you Duplicate the Protostar template in the Template Manager and then modify the ''/templates/protostar/css/template.css'' file. A Joomla upgrade is likely to contain a full set of those Protostar template files. Your changes will be lost.
Create a new template:
+
=== Copy an Existing Template ===
*Create a new directory templates/my_template
+
Create a new template by copying an existing template:
*Copy the contents of the original ''template'' directory to the my_template directory.
+
*Create a new ''/templates/my_template'' directory.
*Go to the language/en-GB directory and copy language/en-GB/en-GB.tpl_''template''.ini to en-GB.tpl_my_template.ini
+
*Copy the contents of the original ''template'' directory to the ''my_template'' directory.
*Open the templateDetails.xml file in the my_template directory and change ALL references for the original template directory to the new directory my_template.
+
*Go to the ''/language/en-GB'' directory.
*:<source lang="xml" line start="3"><name>My_Template</name></source>
+
**Copy ''/language/en-GB/en-GB.tpl_original_template.ini'' to ''en-GB.tpl_my_template.ini''
*:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_my_template.ini</language></source>
+
**Copy ''/language/en-GB/en-GB.tpl_original_template.sys.ini'' to ''en-GB.tpl_my_template.sys.ini''
*:<source lang="xml" line start="388">
+
*Open the ''templateDetails.xml'' file in the ''my_template'' directory and change ''ALL'' references, if they exist, for the original template directory to the new directory ''my_template''.
<param name="theme_header" type="folderlist" directory="templates/my_template/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
+
<param name="theme_background" type="folderlist" directory="templates/my_theme/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
+
<param name="theme_elements" type="folderlist" directory="templates/my_theme/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
+
  
=== Option Two ===
+
<syntaxhighlight lang="xml"><name>My_Template</name></syntaxhighlight>
Make a backup/copy of the templates/template folder before and after your changes and make a note of what you have changed.
+
  
 +
<syntaxhighlight lang="xml"><language tag="en-GB">en-GB.tpl_my_template.ini</language>
 +
<language tag="en-GB">en-GB.tpl_my_template.sys.ini</language></syntaxhighlight>
 +
 +
<syntaxhighlight lang="xml">
 +
<param name="theme_header" type="folderlist" directory="templates/my_template/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
 +
<param name="theme_background" type="folderlist" directory="templates/my_theme/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
 +
<param name="theme_elements" type="folderlist" directory="templates/my_theme/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></syntaxhighlight>
 +
=== Discover the New Template ===
 +
Now the new template must be introduced to your Joomla site through the discovery process.
  
== Editing the template ==
+
*Go to Administrator > Extensions > Extension Manager > Discover.
In the [[Back-end]], select Site>>[[Extension]]s>>Templates.
+
*Click the Discover icon.
Select the template you wish to modify.
+
*Select your new template.
Click the edit icon.
+
*Click Install.
  
'''both'''
+
If successful, the new template will now be available in Administrator > Extensions > Template Manager. Make the new template the default template. View the site to verify it.
You are given the choice of editing "html" and "css."
+
== Editing the Template ==
 +
In the Administrator, select Extensions > Template Manager. Now select Styles or Templates. Select the template you wish to modify.
 
   
 
   
 
[[CSS]] stands for cascading style sheets. This controls many elements of the look and feel of your site.
 
[[CSS]] stands for cascading style sheets. This controls many elements of the look and feel of your site.
[[HTML]] is the file that controls where positions are defined and positioned. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the tempate designer.
+
[[HTML]] is the file that controls where positions are defined and placed. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the template designer.
  
One common change is to use your own graphic/image. Graphics are linked to in the HTML file. Simply change the reference to the image of your choice. Keep in mind that it if it is a different size than the original image this may change the appearance of the site in unexpected ways.
+
One common change is to use your own graphic/image. Graphics are linked to the HTML file. Simply change the reference to the image of your choice. Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.
  
[[Category:FAQ]]
+
<noinclude>[[Category:FAQ]]
 
[[Category:Administration FAQ]]
 
[[Category:Administration FAQ]]
 
[[Category:Getting Started FAQ]]
 
[[Category:Getting Started FAQ]]
 
[[Category:Installation FAQ]]
 
[[Category:Installation FAQ]]
 
[[Category:Upgrading and Migrating FAQ]]
 
[[Category:Upgrading and Migrating FAQ]]
[[Category:Version 1.5 FAQ]]
+
[[Category:Version 2.5 FAQ]]
[[Category:Template Management]]
+
[[Category:Version 3.1 FAQ]]
 +
[[Category:Template Management]]</noinclude>

Revision as of 03:10, 1 May 2013

Templates are just a group of XML, PHP, HTML and image files that are stored in the templates directory of your site. You can edit these files or you can use the editing interface available in the Template Manager.

Contents

Before You Begin

Before you start hacking away at a default installed template, remember that any updates of the Joomla core files is likely to contain new copies of the default templates. Unless you take steps to protect your work, your modifications will be lost.

There are options in the Template Manager to Duplicate and Copy an existing template. Note that you are only copying the style of the template and you are not protected from overwrites. There is simply another entry made in the _template_styles table of the database. The template files are not duplicated into another uniquely-named directory and they will be overwritten during an upgrade.

For example, consider the case in which you Duplicate the Protostar template in the Template Manager and then modify the /templates/protostar/css/template.css file. A Joomla upgrade is likely to contain a full set of those Protostar template files. Your changes will be lost.

Copy an Existing Template

Create a new template by copying an existing template:

  • Create a new /templates/my_template directory.
  • Copy the contents of the original template directory to the my_template directory.
  • Go to the /language/en-GB directory.
    • Copy /language/en-GB/en-GB.tpl_original_template.ini to en-GB.tpl_my_template.ini
    • Copy /language/en-GB/en-GB.tpl_original_template.sys.ini to en-GB.tpl_my_template.sys.ini
  • Open the templateDetails.xml file in the my_template directory and change ALL references, if they exist, for the original template directory to the new directory my_template.
<name>My_Template</name>
<language tag="en-GB">en-GB.tpl_my_template.ini</language>
<language tag="en-GB">en-GB.tpl_my_template.sys.ini</language>
<param name="theme_header" type="folderlist" directory="templates/my_template/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/my_theme/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/my_theme/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" />

Discover the New Template

Now the new template must be introduced to your Joomla site through the discovery process.

  • Go to Administrator > Extensions > Extension Manager > Discover.
  • Click the Discover icon.
  • Select your new template.
  • Click Install.

If successful, the new template will now be available in Administrator > Extensions > Template Manager. Make the new template the default template. View the site to verify it.

Editing the Template

In the Administrator, select Extensions > Template Manager. Now select Styles or Templates. Select the template you wish to modify.

CSS stands for cascading style sheets. This controls many elements of the look and feel of your site. HTML is the file that controls where positions are defined and placed. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the template designer.

One common change is to use your own graphic/image. Graphics are linked to the HTML file. Simply change the reference to the image of your choice. Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.