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

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. Chapter 20: Customizing Joomla! Templates 523 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 template. Making a copy of a template Part IV: Customizing and Extending the System 524 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 template 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 directory /templates/ja_purity/images. Your new logo now appears on your template. Chapter 20: Customizing Joomla! Templates 525 Note 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 schemes. Part IV: Customizing and Extending the System 526 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 at the very least you can control your site’s page dimensions, font colors, and sizes. You can achieve a significant amount of template customization by working with the template’s CSS. In the preceding examples, logo replacement was handled by substituting graphics files. However, both the JA_Purity and the RHUK_Milkyway templates place the logo on the page through the use of a Chapter 20: Customizing Joomla! Templates 527 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) 0 0 no-repeat. 9. Adjust the width and height values, if necessary. 10. Click the Save icon on the top-right tool bar. The changes to the CSS are saved, and the CSS Editing dialogue closes, returning you to the Template Editing dialogue. Part IV: Customizing and Extending the System 528 Tip 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 options. Cross-Reference The creation of menus, menu items, and sub-menus is discussed further in Chapter 8. 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 . 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. 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 . 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