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

Part IV Customizing and Extending the System IN THIS PART Chapter 20: Customizing Joomla! Templates Chapter 21: Customizing Joomla! Functionality Chapter 22: Extending Your Site Chapter 23: Implementing e-Commerce with VirtueMart Chapter 24: Creating a Community Site with JomSocial 497 CHAPTER Customizing Joomla! Templates IN THIS CHAPTER Discovering how the templates work Exploring the default templates Knowing the parts of a template Introducing the Template Manager Customizing templates Controlling the appearance of menus Working with module chrome Overriding pagination formatting Creating a new template Working with the admin template O ne of the joys of working with the Joomla! system is the ease with which you can create an attractive web site. Unlike many other content management systems that lock you into a standardized, cookie- cutter approach to site design, Joomla! has great flexibility. You can create virtually any look and feel you want. Moreover, the widespread popularity of Joomla! has resulted in a large number of pre-existing templates being available in the market, often for little or no cost. This chapter takes you through the basics of understanding how Joomla! templates work and then digs in more deeply to explain how you can cus- tomize an existing template or how you can even go further and build your own from scratch. Discovering How the Templates Work The Joomla! template files are responsible for what is seen on the screen by your visitors. When a visitor to your Web site clicks on a link, it sets off a process that culminates in the production of a web page inside their browser. The final step in that process is the rendering of the page inside the template. Though some elements, for example, modules and components, have their own templates that control the look and feel of a particular bit of output, all of those various elements are brought together inside the template. Cross-Reference In Chapter 21 there is a discussion of how to control and override the output elements generated by the modules and components. Part IV: Customizing and Extending the System 498 As you can see in the next section, a template is a set of files; it is not one single item. The various parts of the template work together to format the final page output. Typically the template works as a frame, providing all the outer dressing and decoration you see on the page, while the content inside that frame is produced by the various functional elements of the site. All of the text and the colors on the screen are also controlled by the template, via the template’s CSS files. While some modules and components may influence on the site’s look and feel, the template has the final say in the site output. This creates an opportunity for you; by gaining fluency in controlling the template you are able to tailor the site output to suit your needs. Note If you are new to Joomla! templates, one of the key concepts you need to grasp is that designing templates is very different from designing traditional Web pages. Where in a traditional Web page design you have to fix every- thing on each page inside a separate file, in Joomla! template design you are creating the outer shell only, the structure inside of which you will call other output for display. That one template is then used for multiple pages. Exploring the Default Templates The Joomla! default distribution includes a set of templates to help you get started. These templates may be sufficient for your needs, or they may serve as a base for your customization efforts. Regardless, they offer a great set of examples of what can be done from the system and provide you with an opportunity to learn. In Joomla! 1.5.x, there are three front-end templates and one back- end template: l Front-end templates l Beez l JA_Purity l RHUK_Milkyway (this is selected as the default) l Back-end template l Khepri Beez The Beez template is included in the default Joomla! 1.5.x distribution. More than any of the other default templates, Beez makes heavy use of CSS formatting and provides a number of overrides. The overrides are specifically designed to replace the table-based presentation of the core’s modules and components. The template is shown in Figure 20.1. Chapter 20: Customizing Joomla! Templates 499 FIGURE 20.1 The Beez template, shown with the sample data installed. Part IV: Customizing and Extending the System 500 The Beez template includes the following attributes and features: l The template’s files are located at /templates/beez. l The CSS files are located at /templates/beez/css l The overrides are located at /templates/beez/html. l The template provides overrides for the following: l Content component l Contact component l Newsfeeds component l Polls component l Search component l User component l Weblinks component l Latest News module l Login module l Newsflash module l Poll module l Search module l The template overrides the default module chrome at /templates/beez/html/ modules.php l The template overrides the default pagination styling at /templates/beez/html/ pagination.php l The template does not include any parameters. l The template includes ten module position holders: l left l right l top l breadcrumb l user1 l user2 l user3 l user4 l debug l syndicate Chapter 20: Customizing Joomla! Templates 501 Note In assessments of compliance with accessibility standards, this template performed the best of all the default templates. See Chapter 26 for more information. Tip For additional information above the Beez template, including a guide to the CSS, visit the dedicated page on the Joomla! docs site at http://docs.joomla.org/Beez JA_Purity The JA_Purity template is included as part of the Joomla 1.5.x distro. The template is highly configurable and includes a large number of parameters that enable you to set the template’s width, color scheme, and many other elements. One of the key features of this template is the ability to create easily drop-down menus. Of all the default templates, JA_Purity allows for the most flexibility without having to modify code. The template is shown in Figure 20.2. The JA_Purity template includes the following attributes and features: l The template’s files are located at /templates/ja_purity. l The CSS files are located at /templates/ja_purity/css. l The overrides are located at /templates/ja_purity/html. l The Beez template provides overrides for the following: l Content component l Banners module l Login module l The template overrides the default module chrome at /templates/ja_purity/ html/modules.php . l The template overrides the default pagination styling at /templates/ja_purity/ html/pagination.php . l The template provides the following parameters: l Logo type: Select whether the template displays an image or text. The default option is image. The image file is /templates/ja_purity/images/login.gif. If you select the text option for this parameter, you can enter the text you want to appear in the parameter that follows. l Logo text: Type the text you’d like to appear in the logo space on the template. This is only relevant if you have selected the option text in the parameter above. Part IV: Customizing and Extending the System 502 l Slogan: Type the slogan text you want to appear under the logo on the template. l Horizontal Navigation Type: Select whether the horizontal menus, if any, use Suckerfish or JAMoo Menu. Suckerfish is largely CSS dependent. JAMoo Menu relies on JavaScript. The default selection is Suckerfish. Note Simply setting this parameter is not sufficient to create horizontal drop-down menus. As discussed in the section on the drop-down menus, additional steps must be taken. l Font size: Select the default font size for the text on the site. l Template Width: Select how the width of the template will be calculated. The options are l Auto (fluid): The width of the template will automatically flex to fill the screen. l Narrow Screen: Sets the template to a fixed width compatible with 800 x 600 screen display settings. l Wide Screen: Sets the template to a fixed width compatible with 1024 x 768 screen display settings. l Specified in percentage (fluid): The width of the template will be flexible and determined by a percentage value entered in the next parameter. l Specified in pixels: The width of the template will be a fixed value determined by the integer value entered in the next parameter. If you select either of the specified values, you will need to enter an integer value in the next parameter to provide that value. The default option is specified in percentage. l Specified width: If you have selected either of the specified options in the parameter immediately preceding, type an integer in this field to set the value to used. l Header Themes: Select from the combo box one of three header themes or select none to supply your own. l Background Themes: Select from the combo box one of three background themes or select none to supply your own. l Primary Elements: The Primary Elements parameter controls a number of text decoration variables, including the color of link text color and module titles. Select your preferred color from the combo box or select none to specify your own via the template’s CSS. l Right modules collapsible function: Enable to allow modules assigned to the right column to expand and collapse (vertically). l Default status: If the parameter above is set to Enable, use this parameter to set the default value for the column. l Exclude Modules: If you have elected to enable the Right modules collapsible function, you can exempt individual modules from this control by typing their element ID here. Chapter 20: Customizing Joomla! Templates 503 FIGURE 20.2 The JA_Purity template, shown with the sample data installed. Part IV: Customizing and Extending the System 504 The template includes 12 module position holders: l hornav l breadcrumbs l banner l top l user1 l user2 l user3 l user4 l user5 l footer l syndicate l debug Tip For additional information above the JA_Purity template, including a guide to the CSS, visit the dedicated page on the Joomla! docs site at http://docs.joomla.org/Ja_purity RHUK_Milkyway The rhuk_milkyway template is the first thing you see when you log in to a new Joomla! installation; it is the system’s default template. Though it has only a few configurable parameters, Milkyway is a solid all-purpose template. The template is shown in Figure 20.3. The RHUK_Milkyway template includes the following attributes and features: l The template’s files are located at /templates/rhuk_milkyway. l The CSS files are located at /templates/rhuk_milkyway/css. l The overrides are located at /templates/rhuk_milkyway/html. [...]... l user2 l user3 l user4 l footer l debug l syndicate Khepri Joomla! is bundled with a single, dedicated template for use in the admin system Khepri is tailored for use by administrators The template is designed to be lightweight, fast, and easy to use Few parameters are available for this template The template is shown in Figure 20.4 505 Part IV: Customizing and Extending the System FIGURE 20.3 The... anything published to them; the one exception is if the template has made the appearance of module positions conditional and that condition is not being met 508 Chapter 20: Customizing Joomla! Templates Knowing the Parts of a Template As noted earlier, a template is actually a collection of files that work together In this section, I outline the basic files that are needed and their roles in the system... template The template is shown in Figure 20.4 505 Part IV: Customizing and Extending the System FIGURE 20.3 The RHUK_Milkyway template, shown with the sample data installed 506 Chapter 20: Customizing Joomla! Templates FIGURE 20.4 The Khepri template The Khepri template includes the following attributes and features: l The template’s files are located at /administrator/templates/khepri l The CSS files... l The Khepri template does not provides any override for the system’s modules or components l The template overrides the default module chrome at /administrator/templates/ khepri/html/modules.php 507 Part IV: Customizing and Extending the System l The template overrides the default pagination styling at /administrator/templates/ khepri/html/pagination.php l The template includes the following parameters:... The template includes five module position holders: l status l menu l title l toolbar l submenu Tip Looking for more help with the default templates? There is a dedicated support form at http://forum .joomla. org/viewforum.php?f=466 Finding the Module Positions on a page There are times when it is useful to be able to identify quickly the module positions that are active on the page you see in your browser...Chapter 20: Customizing Joomla! Templates l The Milkyway template provides an override for the Login module l The template overrides the default Module Chrome at /templates/rhuk_milkyway/ html/modules.php l The template overrides... section demonstrates the variance that can occur with various approaches to template design Directory structure All front-end templates are kept inside the directory /templates, located at the root of the Joomla! installation All back-end templates are kept in /administrator/templates Inside the appropriate directory, each template will have its own directory names for the template By way of example, the... if any l An /images directory containing any images specifically needed by the template The template may also have other directories, as defined by the template developer The key files At a minimum, a Joomla! 1.5.x template includes the following files: l component.php l index.php l template.css l templateDetails.xml l template_thumbnail.png Each of these key files is discussed in detail in the following . Part IV Customizing and Extending the System IN THIS PART Chapter 20: Customizing Joomla! Templates Chapter 21: Customizing Joomla! Functionality Chapter 22: Extending Your Site Chapter. CSS, visit the dedicated page on the Joomla! docs site at http://docs .joomla. org/Beez JA_Purity The JA_Purity template is included as part of the Joomla 1. 5 .x distro. The template is highly configurable. is shown in Figure 20 .1. Chapter 20: Customizing Joomla! Templates 499 FIGURE 20 .1 The Beez template, shown with the sample data installed. Part IV: Customizing and Extending the System 500 The