Thiết kế web với joomla 1.6(5).x part 55 ppsx

Chapter 20: Customizing Joomla! Templates
515
Introducing the Template Manager
All of the system’s templates, both front-end and back-end, are managed from within Joomla’s
Template Manager. To access the Template Manager, click on the option Template Manager under
the Extensions menu. Clicking on the Template Manager option displays the output shown in
Figure 20.5.
The toolbar at the top of the Template Manager provides quick access to the following functions:
l
Default: Select a template then click this icon to set the template as the default for your
site.
l
Edit: Select a template from the list then click this icon to edit the template’s details.
l
Help: Click to access the online Help files related to the active screen.
FIGURE 20.5
The Template Manager interface.
Part IV: Customizing and Extending the System
516
Below the toolbar there are two links: Site shows you the Site Templates. Administrator shows you
the Administrator Templates.
The main content area of the screen contains a list of all the templates in your Joomla! site. The
columns provided are:
l
#: An indexing number assigned by Joomla! This cannot be changed.
l
Checkbox (no label): Click in a checkbox to select a template; this is needed if you wish
to use any of the toolbar options, referenced in the preceding list.
l
Template Name: This field displays the name of the template. Click the name to edit the
template’s details. Move your mouse over the template’s name to open a thumbnail view

of the template.
l
Default: A yellow star in this field indicates that the template is selected as the site’s
default template. Only one template can be the default template.
l
Assigned: A green checkmark in this column indicates that the template is assigned to
pages on the site. Click the name of the template to open the editing dialogue and view
the pages it is assigned to. When the field is blank, the template is not assigned to any
pages on the site. This is used to give a different look to each page in your site.
l
Version: The version number of the template.
l
Date: The date the template was created.
l
Author: The author of the template.
Finally, at the bottom of the screen, below the content area, is the Display # option. Change the value
in the combo box control to alter the number of templates that are displayed on the page. The default
value can be altered by changing the List Length option on the Global Configuration Manager.
Editing templates
Clicking the name of a template in the Template Manager opens the Template Editing dialogue, as
shown in Figure 20.6. The Template Editing dialogue enables you to accomplish several tasks:
l
Preview the template’s module position holders.
l
Assign the template.
l
Edit the template’s HTML.
l
Edit the template’s CSS.
The toolbar at the top of the Template Editing dialogue provides quick access to the following

functions:
l
Preview: Click this icon to open a view of the template in a pop-up window. The tem-
plate shown in the pop-up window has the module position holders marked for your
reference.
Chapter 20: Customizing Joomla! Templates
517
l
Edit HTML: Click this icon to open the template HTML Editor.
l
Edit CSS: Click this icon to open the template CSS Editor.
l
Save: Click this icon to save your work and exit the Template Editing dialogue.
l
Apply: Click to save your work without exiting from the Template Editing dialogue. This
option lets you save without exiting the screen and is useful in case you are interrupted or
you otherwise wish to save yet keep working on this screen.
l
Close: Cancels the task and exits the Template Editing dialogue.
l
Help: Displays the Help files related to the active screen.
The workspace in this dialogue is broken down into three sections, Details, Menu Assignment, and
Parameters. The Details section contains the following fields:
l
Name: This displays the name of the template. It is not editable.
l
Description: Displays a short description of the template. This is not editable.
FIGURE 20.6
The Template Editing dialogue, showing the default RHUK_Milkyway Template.
Part IV: Customizing and Extending the System

518
The Menu Assignment section contains the following fields:
l
Menus: Select None to leave this template unassigned. Choose Select from List to enable
the template to be assigned to pages on the site. After you click this option, you will need
to select the pages from the box below.
l
Menu Selection: The pages listed here are eligible for template assignment. Click on one
or more to assign the template to those pages. Note that the pages that appear here are the
Items from all of the site’s various menus.
The contents of the Parameters section vary from template to template. The choices you have here,
if any, are set by the template developer.
Editing the template’s HTML
Once inside the Template Editing dialogue, you can click the Edit HTML option to view and edit
the HTML of the template. Clicking the Edit HTML icon on the top right toolbar opens the dia-
logue shown in Figure 20.7.
FIGURE 20.7
The RHUK_Milkyway Template shown in the Edit HTML dialogue.
Chapter 20: Customizing Joomla! Templates
519
The window shows the template’s index.php file. From this window, you can modify the code
in the file and save the changes.
The toolbar at the top of the Edit HTML dialogue provides quick access to the following functions:
l
Save: Click this icon to save your work and exit the HTML Editing dialogue.
l
Apply: Click to save your work without exiting from the HTML Editing dialogue. This
option lets you save without exiting the screen and is useful in case you are interrupted or
you otherwise wish to save yet keep working on this screen.
l

Cancels: Cancels the task and exits the HTML Editing dialogue.
l
Help: Displays the Help files related to the active screen.
Editing the template’s CSS
The Template Manager also enables you to edit the various CSS files associated with your tem-
plates. When you are inside the Template Editing dialogue, you can click on the Edit CSS icon to
view a list of all the CSS files for the template, as shown in Figure 20.8.
FIGURE 20.8
The CSS selection screen.
Part IV: Customizing and Extending the System
520
The right column of the CSS selection screen indicates whether the individual CSS files are edit-
able. If the column indicates that the file is not editable, you will need to change the file permis-
sions before you can use the Template Manager’s Edit CSS tool.
On the CSS selection screen, select the CSS file you want to edit and click the Edit icon. The Edit
CSS dialogue loads in your window, as shown in Figure 20.9.
The toolbar at the top of the Edit CSS dialogue provides quick access to the following functions:
l
Save: Click this icon to save your work and exit the CSS Editing dialogue.
l
Apply: Click to save your work without exiting from the CSS Editing dialogue. This
option lets you save without exiting the screen and is useful in case you are interrupted or
you otherwise wish to save yet keep working on this screen.
l
Cancels: Cancels the task and exits the CSS Editing dialogue.
l
Help: Displays the Help files related to the active screen.
FIGURE 20.9
The Edit CSS dialogue.
Chapter 20: Customizing Joomla! Templates

521
Setting the default template
The default template appears on all pages where another template is not specifically assigned.
When no templates are assigned to any pages, the default template is shown throughout the site.
The site can have only one default template.
To change the default template, follow these steps:
1. Log in to the admin system of your site.
2. Access the Template Manager by selecting the option Template Manager under the
Extensions menu. The Template Manager loads in your browser.
3. Click the radio button next to the template you want to make the default template.
4. Click the Default icon on the top right tool bar. A yellow star appears in the Default
column by the template of your choice. The new template will immediately become
active as the site’s default template.
Assigning templates
If you want to use more than one template on your site, you can do so by assigning one or more
templates to specific pages on the site. The Edit Template dialogue provides you with the tools to
perform this task. There is no limit to the number of templates you can use; if you wanted, you
could use a different template for each section or even each page of your site.
Cross-Reference
See Chapter 22 for a discussion of how to add new Extensions, including templates, to your Joomla! site.
To assign a template to a specific page, follow these steps:
1. Log in to the admin system of your site.
2. Access the Template Manager by selecting the option Template Manager under the
Extensions Menu. The Template Manager loads in your browser.
3. Click the name of the template you want to assign. The Template Editing dialogue opens.
4. Click the option Select from List.
5. Click on the names of one or more pages in the box next to the label Menu
Selection.
6. Click the Save icon on the top right tool bar. The template immediately becomes active
for the pages you have selected and the Template Editing dialogue closes, returning you

to the Template Manager.
Tip
If you want to make a page eligible for template assignment, the page must have a Menu Item associated with
it; or else the default template will be assigned to the page.
Part IV: Customizing and Extending the System
522
Caution
If you use multiple templates on your site, make note of the fact that any module and component overrides
created for one template will not be available for the other templates. You must, in other words, duplicate the
overrides across multiple templates if you want them to be available throughout the site.
Customizing Templates
If you have a found an existing template that is close to what you need for your site, the fastest
path to having your site up and running may be through customizing an existing template. Some
templates, like the JA_Purity template, come with a number of parameters that make it possible for
the site administrator to customize the look and feel; others require you to make changes to the
code of the template.
This section looks at the most common template customization requests.
Tip
Customizing an existing template is one of the easiest ways to learn Joomla! templating.
Working with template parameters
The easiest way to modify a template is to work with the template parameters. The problems here
are twofold: First, and most importantly, not all templates provide parameters for your use and
second, sometimes the parameters don’t address your specific needs. Regardless, this is a good
place to start because if there is a parameter that suits your needs, your work can be done in
moments.
To check if your template has parameters, simply open the Template Manager and click the name
of the template. If there are any parameters available, they will show in the right column of the
Template Editing dialogue. (Refer to Figure 20.6.)
To modify the template parameters, follow these steps:
1. Log in to the admin system of your site.

2. Access the Template Manager by selecting the option Template Manager under the
Extensions menu. The Template Manager loads in your browser.
3. Click the name of the template you want to check. The Template Editing dialogue
opens.
4. Select the parameter options you want in the right-hand column.
5. Click the Save icon on the top-right tool bar. The changes are immediately visible on
the template. The Template Editing dialogue will close, returning you to the Template
Manager.