Modifying a Joomla! Template

To preserve your changes you need to Copy the template with all its files and styles. This procedure makes references to creating a full copy (an exact duplicate) of the template including all the files. In order to make a copy, you must be on the Customise Template view. There are two methods available for accessing the Template Manager: Customise Template. The Customise Template interface allows for editing the actual code found in the template files, creating template overrides and template file manipulation.

One-Click or Switch to Template View

A Tip!

Styles column refers to changing the available parameters of a template, such as color, font-color, logo, etc. These are dependent on the parameters a template maker made available and are a convenience for quick changes. Template - column refers to editing the actual template files.

To access the Template Customise feature:

• Directly - Click the template name in the column Template

• Indirectly - Styles will be highlighted, click on Templates below it which will turn the view to Template Manager:Templates, see image below.

• Select the template you wish to modify which will change the view to Template Manager: Customise Template view

Customisation View

You should now be looking at the image below, Template Manager: Customise Template.

Copy an Existing Template

The Easy Way

Create a new template by copying an existing template:

• Click on Copy Template in Toolbar in Template Manager: Customise Template view.

• Provide a new name and click on Copy Template

• The template is completely copied. This includes styles and all the template files.

Manually

• Create a new /templates/my_template directory.
• Copy the contents of the original template directory to the my_template directory.
• Go to the root /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
• Go to the /language/en-GB directory in the template's directory, if it exists.
  • 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

When manually copying a template, 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.

Finding Errors

You might have problems as a result of copying an existing template to a new template. Because of the way that Joomla handles file names, you might be tripped up by a capitalization error, for example.
Joomla contains some useful debugging tools. To see what is happening while working on a site, there are three settings that you should change.

1. Administration > Site > Global Configuration > System > Debug Settings > Debug System > Yes (Default = No)
2. Administration > Site > Global Configuration > System > Debug Settings > Debug Language > Yes (Default = No)
3. Administration > Site > Global Configuration > Server > Server Settings > Error Reporting > Maximum (Default = System Default)

With the Debug Language set to Yes, for instance, you will see the success or failure of language file loading on each page of the Administrator. Open the Joomla Debug Console > Language Files Loaded panel to view the report.