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

To check if your template has parameters, simply open the Template Manager and click the name of the template.. Access the Template Manager by selecting the option Template Manager under

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.

As a first step to any of the customizations discussed in this chapter, I would strongly recommend that you make a copy of the template you want to modify and work off the copy Leave the original template intact so you can use it as a reference in case you run into difficulties Creating and working off a copy also has the added advantage of segregating your changes from the core and making your changes portable When it comes time to upgrade your site, you can keep your changed files separate and intact You can also take your changed files and install them on a different site if you so desire There are a number of steps to this process, so the best approach is to look at an example

To make a copy of the default RHUK_Milkyway Template, follow these steps:

1 Access the Joomla! installation on your server via FTP or your web host control panel’s file

manager

2 Make a copy of the RHUK_Milkyway Template, located at /templates/rhuk_milkyway

3 Give your copy of the directory a unique name

4 Edit the templateDetails.xml file to change the template name and description tags,

plus any other details you want to modify

5 Delete from the XML file all invalid resource references To do this, open the

templateDetails.xml file and go through the files listed inside the <files> tag,

comparing the files listed with the contents of the template’s /images and the /css

directories Delete from the templateDetails.xml file references to any file that is

not present in the /images or /css directories

6 Update all internal links in the template files, changing references to RHUK_Milkyway to the

name of your new template directory

7 Zip up the template directory

8 Log in to the admin system of your Joomla! site

9 Open the Extensions Installer by clicking on the option Install/Uninstall under the Extensions

Menu

10 Click Browse A pop-up window opens

11 Locate the zipped archive containing your new template and click Open

12 The pop-up will close and the name of the archive will be displayed in the Package File text

field

13 Click Upload File & Install The system will attempt to install the template If successful you

will see a confirmation message

Note that while steps 7 through 12 are a best practices approach, you don’t necessarily need to perform those steps if you have duplicated the folder and made changes to the xml file If you refresh the tem-plate page in the back end, you will see a selection available with the name of your new temtem-plate

Making a copy of a template

Changing the logo

Perhaps the most common template customization request seen on the Joomla! forums is to change the default template’s logo All the default templates display the Joomla! logo on the tem-plate header The procedure varies somewhat depending upon the temtem-plate with which you are working

Here is how to make the change to each of the Joomla! 1.5.x default templates:

Beez

Follow these steps to change this default template:

1 Save your logo as a gif file, using the name logo.gif.

2 Access your Joomla! location on your server via FTP or your web host’s file

man-ager.

3 Go to the directory /templates/beez/images.

4 Rename the existing /templates/beez/images/logo.gif file (You are

essen-tially creating a backup of logo.gif.)

5 Copy your logo.gif file to the directory /templates/beez/images Your new logo now

appears on your template

Note

The default logo measures 300 x 97 pixels Ideally, your replacement logo will be the same size If it is not, you may have to adjust the code in the index.php file to account for the new logo dimensions.

Note

You could also replace the logo with an image file of a different name by editing the file name in the code of the index.php file.

JA_Purity

Follow these steps to change this default template:

1 Save your logo as a gif file, using the name logo.png.

2 Access your Joomla! location on your server via FTP or your web host’s file

manager.

3 Go to the directory/templates/ja_purity/images.

4 Rename the existing /templates/ja_purity/images/logo.png file.

5 Copy your logo.png file to the

The default logo measures 208 x 80 pixels Ideally, your replacement logo will be the same size If it is not, you may have to adjust the CSS styling to account for the new logo dimensions.

Note

You could also replace the logo an image file of a different name by making changes to the template.css

file See the next section for an example.

RHUK_Milkway

Follow these steps to change this default template:

1 Save your logo as a gif file, using the name mw_joomla_logo.png.

2 Access your Joomla! location on your server via FTP or your Web host’s file manager.

3 Go to the directory /templates/rhuk_milkyway/images.

4 Rename the existing /templates/rhuk_milkyway/images/mw_joomla_logo

png file

5 Copy your mw_joomla_logo.png file to the directory /templates/rhuk_milkyway/

images Your new logo now appears on your template

Note

The default logo measures 298 x 75 pixels Ideally, your replacement logo will be the same size If it is not, you may have to adjust the CSS styling to account for the new logo dimensions.

Note

You could also replace the logo with an image file of a different name by making changes to the template css file See the next section for an example.

Khepri

Eliminating or substituting the logo inside the Khepri admin template is significantly more compli-cated, due to the way the header image has been created The author of Khepri has embedded the logo into the background image Accordingly, replacing the logo means reworking the header image To complicate matters further, the header image uses a two-tone effect and has rounded corners This makes replacing or substituting the logo more complicated to execute graphically

Tip

Arguably, it is easier to simply replace the entire header image than to try to rework what is there now

If you want to rework the header, you will need to modify several files First, however, you need to identify which files you should replace, as the Khepri header is offered in three different color

To find your images, look inside /administrator/templates/images Inside that directory there are three sub-directories, one for each header color scheme: h_cherry, h_green, h_teal The default color scheme is green; therefore the default header images are inside the directory h_ green Each of the three color header directories contains files of the same name and function:

l j_header_left_rtl.png: The left corner of the header when text orientation is set right-to-left

l j_header_left.png: The left corner of the header when text orientation is set to left-to-right (this is the default for most languages)

l j_header_middle.png: The middle portion of the header image This is the portion that is repeated to allow the header image to expand to fit different screen resolution set-tings

l j_header_right_rtl.png: The right corner of the header when text orientation is set right-to-left

l j_header_right.png: The right corner of the header when text orientation is set to left-to-right (this is the default for most languages)

Before you begin the following five steps, you need to identify which pieces of the header you need

to change Create your new header images with the same names and file formats of the pieces you want to replace

Tip

You will only need to modify those pieces that are used for your text orientation If you want to replace the header entirely with one of your own design, you must replace three files and you must remember that the

j_header_middle.png file must be able to be repeated to allow for smooth expansion of the header image for different display resolutions.

Follow these steps:

1 Access your Joomla! location on your server via FTP or your web host’s file manager.

2 Go to the directory/administrator/templates/khepri/images.

3 Open the directory of the header images you wish to modify.

4 Rename the existing files inside the directory.

5 Copy your new files to the directory Your new logo will now appear on your template.

Modifying the CSS

The CSS files are largely responsible for the appearance of your site Although the extent of the role played by the CSS depends on the way the developer created the template, you can be certain that

CSS selector; for those two templates you can also change the logo by modifying the CSS Working with the CSS has several advantages over substitution of the graphics file First, you do not have to name your logo to match the default logo Similarly, you do not have to rename the old logo to preserve it Second, by working with the CSS, you can adjust the height, width, and margin attri-butes to account for differences in graphic file dimensions

By way of example, look at the RHUK_Milkyway template The index.php file includes the fol-lowing line:

<div id=”logo”></div>

This seemingly empty tag actually is responsible for the placement of the logo on the page If you open RHUK_Milkyway’s template.css file, you can identify the selector responsible:

div#logo {

position: absolute;

left: 0;

top: 0;

float: left;

width: 298px;

height: 75px;

background: url( /images/mw_joomla_logo.png) 0 0 no-repeat;

margin-left: 30px;

margin-top: 25px;

}

By altering this selector you can change the logo on your template Follow these steps:

1 Use FTP or your web host’s file manager to upload your new logo to your Joomla! site

installation Put the image in the directory /templates/rhuk_milkyway/images.

2 Log in to the admin system of your site.

3 Access the Template Manager by selecting the option Template Manager under the

Extensions menu The Template Manager loads in your browser.

4 Click the name of the rhuk_milkyway template The Template Editing dialogue opens.

5 Click the Edit CSS icon on the top-right toolbar The Template CSS selecting window

opens

6 Click the radio button next to the file named template.css.

7 Click the Edit icon on the top-right toolbar The CSS editing dialogue opens.

8 Find the selector div#logo Change the image name in this line of the selector to reflect

the name of your new logo image file: background:url( /images/mw_joomla_ logo.png)00no-repeat

9 Adjust the width and height values, if necessary.

If you are new to working with CSS, there are a number of good resources online at the official Joomla! docu-mentation site A good place to start is here:

http://docs.joomla.org/Discover_your_template_css-styles_and_learn_how_to_ change_them

Controlling the Appearance of Menus

The Joomla! system provides menu styling options as part of the parameters for the menu mod-ules You can also style the menus through the use of the system’s CSS selectors The following sec-tion looks at the default styling opsec-tions

Cross-Reference

The Joomla! system provides the administrator with the option to add class suffixes to a number of items

in the system Page class suffixes, Module class suffixes, and Menu class suffixes are all examples of the Class Suffix option in action The purpose of all these options is the same, that is, to give you the oppor-tunity to make the styling specific to that item by appending to the existing class the suffix of your choice

To take advantage of this feature you need to both specify the suffix for the item and then create the CSS styling that goes with it You have two options for setting the value of the suffix First, if you simply type

a label into the provided class suffix field, the value will be appended directly to the existing class, thereby removing the old class from application to the item and also creating a new class that you can style Alternatively, if you enter a space then type in the label, the system behaves differently: Instead of replacing the old class with a new one, the system leaves the old class and adds a new class with the same name as your label Both the old class and the new class will be applied to the item

By way of example, if the item was originally styled with a class named “moduleheading” and you add the Module Class suffix “_blue” then the styling for the item would look like this: class=“moduleheading_ blue” If instead you add the Module Class suffix “ blue” (that is, a space “ “ plus the word “blue”), the code would be class=“moduleheading blue”

The final step to complete the process would be to add the appropriate selector to your template css

You can learn more about class suffixes at http://docs.joomla.org/Tutorial:Using_Class_ Suffixes_in_Joomla!_1.5

Using class suffixes