J3.x:Modifying a Joomla! Template

Templates are just a series 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 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

Create a new template:

• Create a new directory templates/my_template
• Copy the contents of the original template directory to the 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
• 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.

  <name>My_Template</name>

  <language tag="en-GB">en-GB.tpl_my_template.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" />

Option Two

Make a backup/copy of the templates/template folder before and after your changes and make a note of what you have changed.

Editing the template

In the Back-end, select Site>>Extensions>>Templates. Select the template you wish to modify. Click the edit icon.

both You are given the choice of editing "html" and "css."

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.

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.