The CSS is a key component of the Joomla template system. Not only can multiple CSS files be used with every template but a custom CSS file can be specified with a granular level down to individual articles. Even more importantly to a Joomla practitioner are the features available within a CSS.

If you do a simple survey of most CSS files, you’ll find that their authors only use the most basic features available. CSS is bursting with attributes that can be used to polish the presentation of a Web site. The great news is that nearly all of the various attributes in the CSS specification are supported by all popular browsers.

In this section, you’ll learn about some of the features that can make your template display stand out from other sites. You’ll see how positioning can be used to locate text over an image. You’ll learn the best practices about locating image references in the CSS file itself, and how to specify a CSS file for a specific article or target platform (such as cell phone or PDA).

Using a Template Family with CSS
Templates within Joomla can be designed such that all of the pages on the site use the same template or, alternately, a different template can be made for each Category and Section, so that articles will be displayed with the templates that match their categorization. For the remainder of this book, single site templates will be called templates, and the set of templates selected by the article categorization will be known as a template family.

How you design a template versus a template family requires different organization and planning. In contrast to a single template that needs to be a Swiss army knife for the entire site, a template family can be organized so that the front page sets the stylistic tone (in color, organization, and font selections), and the child templates will reinforce the site identity.

 A template family can be thought of almost like a brand identity. With Coca-Cola, all the other spin-offs of the brand (Diet Coke, Cherry Coke, and so on) use similar design elements so that even a casual observer can see the relationship.

Once you have several templates of your site designed, you can assign them to different portions of the site through the Template Manager. In this example, the green-hued template has been assigned to display for all of the Key Concepts content.

favicon.ico
Templates can include a favicon.ico (for favorites icon) file at the template root. This file holds a small graphic (16 X 16) icon that, if referenced in the index.php file, will be displayed in the address bar of a Web browser and also to the left of the site name in a bookmark list. If stored at the root directory of a Web server, most browsers will read the favicon.ico file automatically.

Core Output Override Templates
Although beyond the scope of this chapter, it is worth mentioning that extensions (components, modules, and so on) can have their own templates to determine their particular look and feel. Generally, these templates are stored within a subfolder named mpl that exists in the folder of the specific component. The Joomla system was designed so that a site template can override the template used by any extension for customized look-and-feel. You can include a folder named html in your template folder. Inside this folder can be subfolders of any specific extension types you want to override (such as com_contact, com_weblinks, mod_poll, and mod_search). For a sample of how this override feature can work, look in the html folder of the eez template included with the default installation.

Generally, however, it is enough to override the stylesheets of a component to have it match the selected template. There is an easy method of ensuring your template modifies all of the major styles of a site to match your interface appearance. Use your browser to access a page that features all of the components, modules, and other user interface elements.

Once the page is displayed, use the View Source option to display the HTML of the page. If you work through the HTML source, you will see the entire CSS id and class definitions that are used for the display. Now that you know the names and functions of all of the stylesheets, you can override them in your own template.

Creating a Cell Phone–Centric CSS
These days, there are a growing number of people surfing the Web through their cell phones. With the tremendous popularity of the Tungsten and Treo PDA phones, it’s reasonable to assume that such Web access will become increasingly common. Sites ensuring that such visitors have a pleasant browsing experience will capture a larger audience and, if a commercial site, be better able to monetize traffic.

Joomla, by insisting most of the display settings exist within a CSS file, is the perfect platform to provide cell phone–specific templates that cater to the small viewing area and compressed navigation area.

As of this writing, the following are the most popular mobile browsers:

❑       Pocket Internet Explorer  — All Windows-based PDAs (often called Pocket PCs) include this browser by default.

❑       Opera  —  Likely the most popular third-party browser (available whether included with the mobile device or not).

 ❑       NetFront  —  Popular browser, especially on the now-defunct Sony Clie line. The Blazer browser was built from the NetFront foundation.

❑       Blazer  —  Popular browser included on the Tungsten and Treo PDA lines.

❑       Minimo  —  Open source browser based on the Mozilla Firefox engine

There are many other custom browser implementations (OpenWave, Series 60, and others) and, with the rapidly evolving mobile search market, more are surely on the way. The good news is that your Joomla site doesn’t need to be designed to address each browser separately.

A normal CSS file-embedding link looks like this:

There is a new attribute tag called media that is supported by most mobile browsers. In the media tag, you can specify the CSS to be used, depending on the viewing platform. The three widely accepted set- tings for this tag are: screen, print, and handheld. Therefore, your template can contain CSS links to the various file references.

To supply CSS files for each media type, you can include the following reference in your template:

The screen media type can contain a reference to your standard CSS file. The print media type may strip away banners, columns, and navigation items not useful to the printed page. Often, this CSS will be identical to the normal CSS, except that the styles for nonprinting items will have the visible attribute set to false.

As of this writing, the Pocket Internet Explorer browser frustratingly uses both the screen and handheld media styles to display the Web page on a mobile device. However, the desktop version of Internet Explorer 6 (the most popular browser installed) doesn’t display the handheld media styles. Therefore, one approach to compatibility with IE would be to make sure that the screen CSS file reference precedes the handheld reference. Then, you can ensure that each style in the screen CSS is overridden (has an identically named style) in the handheld CSS. Therefore, on desktop machines, the handheld file will be ignored, but Pocket IE browsers will read the screen file and then override the styles with those found in the handheld CSS.

The handheld  media type is the CSS that will be used by mobile devices that support it. As of this writ- ing, most mobile devices that have been successfully tested were able to use the CSS specified with the handheld attribute. The following browsers have been tested: Blazer (on Treo), Opera (on Nokia), and Pocket Internet Explorer (on iPAQ). Unfortunately, a number of those tested did not support the attribute (most notably Netfront 3.1). However, moving into the future, the standard will probably be embraced by all new browsers.