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. . 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;. 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 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.