Chapter 20: Customizing Joomla! Templates 535 } function pagination_item_inactive(&$item) { return “<span>”.$item->text.”</span>”; } The most efficient way to add pagination overrides to your template is to copy the pagination. php file from either the default RHUK_Milkyway template or the default Beez template. Use that code as your starting point. Save the copied code to your own pagination.php file inside your template’s /html directory. Make any changes you need to your new file and you’re done. If there is a pagination.php file in the active template’s directory, the system will detect it automati- cally and use it in preference to the default styling. Creating a New Template This section looks at the minimum requirements to set up a basic template. With these basics in place, you have a solid foundation from which you can expand the template and introduce more advanced features as needed. Creating the structure As a first step to creating your own template, you need to set up the necessary directory structure and name properly the directories and files. By way of example, I am going to create a new Joomla! 1.5.x template named “Balinese.” Follow these steps to get started: 1. Create a new directory inside /templates and name it /balinese. 2. Inside the /templates/balinese directory, create two new sub-directories: /css and /images. 3. Use your HTML editor to create the following empty files: index.php, template- Details.xml , template.css and component.php. 4. Place the files index.php, component.php and templateDetails.xml inside /templates/balinese. 5. Place the file template.css inside the directory /templates/balinese/css. With the steps above completed, you now have the structure in place to meet the minimum requirements for a new template. The next step is to add the code to the files. Creating the index.php file The index.php file is responsible for placing all the output on the page. The code below sets all the key elements in place, but without any styling; you can add the styling later with CSS. Part IV: Customizing and Extending the System 536 Open the index.php file you created earlier and add the code specified below: Inside the <head> Begin your file by adding the following code: <?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this- >language; ?>” > The first line of the above enhances your site security by prohibiting direct access of the code. The next statement provides the doctype for the pages. The final line declares the language used by the site. <head> <jdoc:include type=”head” /> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/ system/css/system.css” type=”text/css” />Should there be an explanation of each of this line? <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/ system/css/general.css” type=”text/css” />Explanation of this line? <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/ templates/<?php echo $this->template?>/css/template.css” type=”text/css” /> </head> Note the jdoc:include statement at the top of the <head>. That include statement brings in the page title, meta information and system JavaScript. The following lines include the various mini- mum stylesheets. Inside the <body> Add the following lines immediately following the close of the <head> tag: <body> <jdoc:include type=”modules” name=”top” /> <jdoc:include type=”modules” name=”breadcrumb” /> <jdoc:include type=”modules” name=”left” /> <jdoc:include type=”modules” name=”right” /> <jdoc:include type=”modules” name=”top” /> <jdoc:include type=”modules” name=”user1” /> <jdoc:include type=”modules” name=”user2” /> <jdoc:include type=”modules” name=”user3” /> <jdoc:include type=”modules” name=”user4” /> <jdoc:include type=”message” /> Chapter 20: Customizing Joomla! Templates 537 <jdoc:include type=”component” /> <jdoc:include type=”modules” name=”bottom” /> </body> </html> The preceding code places in your template all the essential elements, though without any styling. All the module position holders are set ( type=”modules”), as is the component output ( type=”component”) and the system messages (type=”message”). Tip The User3 module position holder has emerged as a de facto standard for menu placement. While it is not nec- essary to use this module position for that purpose, you may want to consider it, as many other templates do so. Creating the template.css file The easiest way to get started with your CSS is to copy the styles of one of the default templates and then clean it up to suit your needs. Creating the templateDetails.xml file The templateDetails.xml needs to include all the data necessary for the Joomla! installer as well as the module positions. As our template does not include any parameters, there are none declared in the code. Open the templateDetails.xml file you created earlier and add the following specified code: <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN” “http://dev.joomla.org/xml/1.5/template-install.dtd”> <install version=”1.5” type=”template”> <name>Balinese</name> <creationDate>2009-06-01</creationDate> <author>Bob Author</author> <authorEmail>bob@theauthor.com</authorEmail> <authorUrl>http://www.theauthor.com</authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>Bare Bones Template</description> <files> <filename>index.php</filename> <filename>component.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>css/template.css</filename> Part IV: Customizing and Extending the System 538 </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>bottom</position> </positions> </install> Note that the list of module positions in this file matches up with the module position holders placed in the index.php file. Creating the component.php file The component.php file is standardized. To create yours, simply copy the code from one of the default templates and paste it into the component.php file you created earlier, and then alter the following lines of code: <head> <jdoc:include type=”head” /> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/ rhuk_milkyway/css/template.css” type=”text/css” /> <?php if($this->direction == ‘rtl’) : ?> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/ rhuk_milkyway/css/template_rtl.css” type=”text/css” /> <?php endif; ?> </head> Adding parameters to a template can greatly enhance the flexibility of the template. Template parame- ters allow the site administrator to adjust the appearance or behavior of the template from within the Template Manager, without having to make changes to the code. The JA_Purity template included in the default Joomla! site distribution is a great example of how that works. Perhaps not surprisingly, template parameters are most commonly used by designers who have built their templates for sale or for general release. Parameters are rarely included in templates by developers who are building for their own uses. If you are interested in learning more about how to add parameters to your templates, there is a series of articles dedicated to this topic on the official Joomla! docs site. Start with http://docs.joomla. org/Introduction_to_template_parameters Working with template parameters Chapter 20: Customizing Joomla! Templates 539 Change the code to point to your template.css file, as shown next: <head> <jdoc:include type=”head” /> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/ balinese/css/template.css” type=”text/css” /> <?php if($this->direction == ‘rtl’) : ?> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/ balinese/css/template_rtl.css” type=”text/css” /> <?php endif; ?> </head> Save your changes and you are done — you have the framework for a fully functional Joomla! tem- plate. All that remains to be done is to set the styling you prefer by adding CSS styling to your index.php file. Packaging the template files Templates need to be archived for installation. To package the template, simple zip up all the files. The process is really that simple. Once zipped up, it can be installed with Joomla!’s automated Installer. You can use any of the most common archive formats, including .zip, .tar.gz, and .tar. bz2. Note In addition to the files discussed in the preceding section,, you should also include a thumbnail image of the template. The image should be 206 x 150 pixels. The recommended file format is .png. The file should be named template_thumbnail.png. Working With the Admin Template The appearance of the admin system of Joomla!, just like the front end of the site, is controlled by a template. The default Joomla! 1.5.x system provides only one option for the admin template, the Khepri template., shown in Figure 20.10. The admin system provides only limited options for customization, but there are ways to squeeze a bit more out of Khepri and the admin interface as a whole. Here are some ideas for how you can tweak the admin interface; some are based on template modifications, others on changes to the Administrator modules. Figure 20.11 shows Khepri’s appearance after the implementation of these minor changes. l Use Khepri’s Parameters to customize the color of the header. l Use the Parameters to remove the words “Joomla 1.x.x” from the Header. If you remove the site name, the Header shows the word “Administration” in place of the site name. l Use the Parameters to square off the corners of the workspace. Part IV: Customizing and Extending the System 540 l Unpublish any unnecessary Administrator Modules in the right column of the Control Panel. The Welcome to Joomla! message is a likely candidate for deletion, so is the Menu Items Module. Alternatively, you can change the text in the Welcome to Joomla! Module to something else; if you are a developer, this is a good place to drop in your contact details and branding. l Use the Module Manager to re-order the Administrator Modules that appear in the right column of the Control Panel; putting the Joomla! Security Newsfeed at the top is a good way to raise your site users’ awareness of security announcements. FIGURE 20.10 The Control Panel of the admin interface after the changes. Chapter 20: Customizing Joomla! Templates 541 FIGURE 20.11 An interior admin page, after the changes listed above. Note the header is gone and the footer is custom- ized to provide clients a link the developer’s support site in the event of problems. Cross-Reference Managing the Administrator modules is discussed in Chapter 17. l Edit the Khepri template code to remove the footer message or customize the message to your purposes. l Create your own branded header, as discussed earlier in this chapter, or l Edit the Khepri template code to eliminate complete the graphical header. This will decrease the page size and improve page loading speeds (slightly!). To make this change, remove these lines from immediately below the opening <body> tag: <div id=”border-top” class=”<?php echo $this->params->get(‘headerColo r’,’green’);?>”> <div> <div> Part IV: Customizing and Extending the System 542 <span class=”version”><?php echo JText::_ (‘Version’) ?> <?php echo JVERSION; ?></span> <span class=”title”><?php echo $this->params- >get(‘showSiteName’) ? $mainframe->getCfg( ‘sitename’ ) : JText::_(‘Administration’); ?></span> </div> </div> </div> Tip Don’t forget to make a copy of the template if you want to customize it. The copy makes it easier to preserve your changes in the face of updates or upgrades! Note The Joomla! Extensions Directory has a separate category dedicated to extensions that are intended to enhance the admin interface. http://extensions.joomla.org/extensions/administration/admin-interface Summary In this chapter, I covered the basics of customizing the Joomla! templates. You learned the follow- ing: l How the templates work l How to use the Template Manager l The characteristics of the default templates l How to customize the templates l How to create new templates l How to work with the appearance of the menus l How to work with module chrome l How to override the pagination controls . defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1. 0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org /19 99/xhtml”. templateDetails.xml file you created earlier and add the following specified code: <?xml version= 1. 0” encoding=”utf-8”?> <!DOCTYPE install PUBLIC “-/ /Joomla! 1. 5//DTD template 1. 0//EN” “http://dev .joomla. org/xml /1. 5/template-install.dtd”> <install. upgrades! Note The Joomla! Extensions Directory has a separate category dedicated to extensions that are intended to enhance the admin interface. http://extensions .joomla. org/extensions/administration/admin-interface Summary In