Customizing Existing Templates

If you are reading this chapter, I assume you have already created a template style, figured out how to work with all of the available template options, but would still like to have more possibilities. Welcome to the world of HTML and CSS! I'll also assume that you know these two abbreviations. If not, have a look at wikipedia for HyperText Markup Language (HTML) and Cascading Styles Sheets (CSS).

In Joomla! it is possible to edit all CSS used by the template within the Joomla! template manager. Go to Extensions - Template Manager - Templates and click on the link beez_20 Details. There, you will be able to make changes in the beez2 template as well as access all modifiable files (Figure 1).

Figure 1: Beez2: Customize Template

The editable CCS files are the files that are located in the file system in the folder htdocs/templates/[template_name]/css. Click on the linked name of the CSS file and a form will open, in which you can edit the file content by using the CodeMirror editor. Besides the CSS files, you can also edit the three main template files:

• Main page
  htdocs/templates/[template_name]/index.php
• Error page
  If an error occurs while opening a Joomla! site, this template is used for the page.
  htdocs/templates/[template_name]/error.php
• Print view
  This template is responsible for the output when you access the print view.
  htdocs/templates/[template_name]/component.php

More template pieces like the files for the core overrides are located in htdocs/templates/[template_name]/html. The core overrides cannot be edited from the administrator backend.

The changes you make here will change the core Beez2 files. This is something to keep in mind in case of updates.