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 Contro
Trang 1Part 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
Trang 3C H A P T E R
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
One of the joys of working with the Joomla! system is the ease with
which you can create an attractive web site Unlike many other
con-tent 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
avail-able 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.
Trang 4As 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 control-ling 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 tem-plates 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 mod-ules and components
The template is shown in Figure 20.1
Trang 5Chapter 20: Customizing Joomla! Templates
FIGURE 20.1
The Beez template, shown with the sample data installed
Trang 6The 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
Trang 7Chapter 20: Customizing Joomla! Templates
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 con-figurable 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 flexibil-ity 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
Trang 8l 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 sec-tion on the drop-down menus, addisec-tional 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
deter-mined 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
deco-ration 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 tem-plate’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
func-tion, you can exempt individual modules from this control by typing their element ID here
Trang 9Chapter 20: Customizing Joomla! Templates
FIGURE 20.2
The JA_Purity template, shown with the sample data installed
Trang 10The 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! installa-tion; 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
Trang 11Chapter 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 the default pagination styling at /templates/rhuk_milkyway/ html/pagination.php
l The template includes the following parameters:
l Color Variation: Select one of the six primary color variations from the combo box.
l Background Variation: Select one of the six background color variations from the
combo box
l Template Width: Select an option for controlling the width of the template
l The template includes eleven module position holders:
l breadcrumb
l left
l right
l top
l user1
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
Trang 12FIGURE 20.3
The RHUK_Milkyway template, shown with the sample data installed
Trang 13Chapter 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 are located at /administrator/templates/khepri/css
l The overrides are located at /administrator/templates/khepri/html
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
Trang 14l The template overrides the default pagination styling at /administrator/templates/ khepri/html/pagination.php
l The template includes the following parameters:
l Use Rounded Corners: Select the look for the corners of the page.
l Show Site Name: Show or hide the site name on the header.
l Header Color: Select one of three colors for the site header.
l 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
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 Although you can always look up the names of the positions in the template’s XML file, preview the template in Template Manager, or open up the template’s code and look where the module positions holders have been inserted, sometimes you just want to see where they are on the rendered page with the published items in place To do this, follow these steps:
1 Open the page in your browser and look at the URL that appears in the browser’s address
bar
2 If there are no parameters displayed at the end of the URL, append “?tp=1” to the URL and
click refresh The module positions will be outlined and lightly shaded, with the name of the position appearing in red
3 If there are parameters at the end of the URL, append “&tp=1” to the URL and click refresh
The module positions will be outlined and lightly shaded, with the name of the position appearing in red
Note that this shows you all active module positions, regardless of whether there is 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
Finding the Module Positions on a page
Trang 15Chapter 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 out-line the basic files that are needed and their roles in the system Note that some templates are more complex than others and may include a large number of additional files The discussion of the default templates in the next 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 default RHUK_Milkyway template’s files are found at /templates/rhuk_ milkyway
Inside the individual template’s directory you typically find:
l A /css directory containing the CSS files needed by the template
l An /html directory containing overrides, 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 sections
component.php
The component.php file has a very narrow and specific purpose; it provides the display of printer-friendly pages