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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1023.45 KB, 8 trang )

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”
“ /><html xmlns=”
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?

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”
“ /><install version=”1.5” type=”template”>
<name>Balinese</name>
<creationDate>2009-06-01</creationDate>
<author>Bob Author</author>
<authorEmail></authorEmail>
<authorUrl></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’) : ?>

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

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

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về