Skip to content | Skip to institutional links

Common menu bar links

Institutional links

CLF 2.0 Standards and Guidelines
Accessibility Help

Government of Canada Common Look and Feel Template Technical Guide

1.0 Benefits of using the GC CLF template
2.0 Introduction to the Welcome Page templates
3.0 Introduction to the content page templates
4.0 Introduction to the server message page templates
- 4.1 Server message page template language variations
- 4.2 Server message page template examples
5.0 How to download the GC CLF template
6.0 How to install and configure the templates
7.0 How to use the configured content page templates
8.0 Utility CSS classes defined by the template
9.0 Client-side CSS for enhancing accessibility
10.0 Progressive Enhancement
11.0 Supported adaptive technologies
12.0 Supported browser/platform combinations
13.0 Known Issues
14.0 Template version history
15.0 Enquiries

1.0 Benefits of using the GC CLF template

The Government of Canada (GC) Common Look and Feel (CLF) template solution was developed over several months in summer 2006 by a team of technical experts recruited from several GC institutions. The template serves to improve and standardize the navigation and accessibility features for GC Web sites while reducing the associated burden on institutions to develop a technical solution for implementing CLF 2.0.

Some of the key benefits of adopting and adapting the GC CLF template in institutions include:

XHTML 1.0 Strict conformant, to improve compatibility with adaptive technologies, handheld devices, browsers and search engines.
Integrates the jQuery JavaScript framework to enable Web sites to take advantage of a wealth of interactive and innovative jQuery plugins while improving accessibility through progressive enhancement and built-in WAI-ARIA support.
Successfully tested on a wide range of adaptive technologies and browser/platform combinations to ensure that Canadians can access Web pages regardless of the technology used.
Major template components, such as the common menu bar, side menu, and content area are properly marked up with headings to simplify navigation with adaptive technologies such as screen readers.
Table-less layout and design to simplify client navigation and reduce the complexity of Web pages.
Presentation information centralized in global CSS files, which simplifies page maintenance and site updates, in addition to providing clients with the ability to override visual formatting and remove barriers to accessing information on Web pages.
Uses scaleable fonts and text-based navigational elements to improve accessibility and simplify navigation using adaptive technologies.
Printer-friendly functionality in the CSS helps to render pages more compatible with printers and to prevent printing unnecessary page elements.
Ability to enable full expandability with minor CSS modifications to improve accessibility at a future date. (Expandability has been successfully tested on a wide range of browser/platform combinations.)
Avoids truncated and overlapped elements at very large font sizes.
Displays the title value when a link gains keyboard focus.
Employs skip navigation links at the beginning of the page for quickly moving to the content or the institutional links. These skip navigation links become visible when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device.
PNG Alpha Transparency Support in Internet Explorer 5.5 and 6.0.
Accessible multimedia player and initiative link slideshow.

2.0 Introduction to the Welcome Page templates

The Welcome Page templates must only be used for the main point of entry for a site or sub site.

2.1 Welcome Page template language variations

There are three different language variations of the Welcome Page template included in the GC CLF template: a bilingual Welcome Page, a unilingual Welcome Page and a multilingual Welcome page. Each of these language variations includes two message area variations.

2.1.1 Bilingual Welcome Page template

This template must be used for Web sites that are required to be available simultaneously in both official languages. It provides language links to content in both languages. Different templates that display the official languages in the prescribed order are available for Web sites of institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

2.1.2 Unilingual Welcome Page template

This template must only be used for sites that are allowed to offer information in one official language only. The unilingual Welcome Page template provides a language link to content in one language and includes a language notice in both official languages indicating that service is only provided in one official language.

2.1.3 Multilingual Welcome Page template

This template may be used by institutions to offer content in one or more languages in addition to content offered simultaneously in both official languages. The multilingual Welcome Page template allows other languages to be supported by including additional language links below the mandatory English and French links. These additional language links may be configured for any languages that need to be supported.

2.2 Welcome Page template message area variations

There are two message area variations of the Welcome Page template: a text-based message area variation and an image-based message area variation.

2.2.1 Text-based message area template (recommended)

This template divides the message area into an image-based top section, and a text-based bottom section. Text must not be embedded in the image; it must be kept separate and displayed instead in the foreground. The text-based lower section contains the institution name in both official languages.

This template must only be used for the main point of entry for an institutional Web site or sub site.

Note: This template is recommended for Welcome Pages because the text-based section of the message area is more accessible than the image-only message area of the image-based message area template.

2.2.2 Image-based message area template

This template includes an image in the entire message area. If this template is adopted, text should not be embedded in the image, but displayed in the foreground instead.

This template may only be used for the main point of entry for an institutional Web site or sub site.

Note: The text-based message area template is recommended for Welcome Pages because the text-based section of the message area is more accessible than the image-only message area of this template.

Top of Page

2.3 Welcome Page template examples

2.3.1 Bilingual Welcome Page templates

2.3.2 Unilingual Welcome Page templates

2.3.3 Multilingual Welcome Page templates

3.0 Introduction to the content page templates

The content page templates must be used for all pages except for the main point of entry for a site or sub site; use the Welcome Page templates for the main point of entry instead.

There are three different language variations of the Welcome Page template included in the GC CLF template. Each of these language variations include three layout variations.

3.1 Content page template language variations

There are three language variations of the content page template: one for bilingual sites, one for unilingual sites and one for languages other than English or French.

3.1.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites. This content page template is available in English and French. The English and French templates are unilingual except for a link in the common menu to the content in the other official language.

For multilingual site, links to content in languages other than English or French must not be included in the common menu bar. In cases where links to content in languages other than English or French are required, those links should be included in the left-hand menu, the right-hand menu or the content area.

3.1.2 Content page template for unilingual sites

This template must be used for all content pages on unilingual sites; this template is available in English and French. The English and French templates are unilingual except for a link in the common menu bar to an official languages notice.

3.1.3 Content page template for languages other than English or French

This template must be used for any content pages where the content is provided primarily in a language other than English or French. Different templates are available for institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

3.2 Content page template layout variations

There are three layout variations of the content page template: a three-column layout, a two-column layout and a one-column layout.

3.2.1 Three-column template

This template contains a three-column layout that consists of a central content area with side menus to the left and the right. The institution's primary menu page and all sub site main pages must apply the three-column layout. Although the three-column template must be used for all top-level pages, it can also be used for Web applications and secondary pages on an institutional Web site.

Note: The three-column layout is mandatory for the main pages of an institutional Web. It is however recommended that a two-column layout be used instead for secondary pages, to benefit from an increased content area and allow for shorter Web pages.

3.2.2 Two-column template

This template contains a two-column layout that consists of a central content area with a left side menu. This template is recommended for all secondary pages of an institutional Web site. The two-column layout allows for shorter Web pages than the three-column layout by increasing the width of the content area. This template may also be used for Web applications.

Note: In cases where it is not possible to fit content within the two-column template without exceeding the content area width, the one-column template should be used instead.

3.2.3 One-column template

This template contains a one-column layout that consists of only a central content area. This layout should only be used in cases where it is not possible to fit the content within the two-column template on secondary pages without exceeding the content area width.

Top of Page

3.3 Content page template examples

3.3.1 Content page templates for bilingual sites

3.3.2 Content page templates for unilingual sites

3.3.3 Content page templates for languages other than English or French

4.0 Introduction to the server message page templates

The server message page templates must only be used for messages generated by Web servers and Web application servers.

4.1 Server message page template language variations

There are two different language variations of the server message page template included in the GC CLF template: a bilingual server message page and a unilingual server message page.

4.1.1 Unilingual server message page template

This template must be used for server messages of unilingual sites or sites where the language preference of the client is known.

4.1.2 Bilingual server message page template

This template must be used for server messages of bilingual and multilingual sites where the language preference of the client is not known. Different templates that display the official languages in the prescribed order are available for Web sites of institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

4.2 Server message page template examples

4.2.1 Unilingual server message page templates

4.2.2 Bilingual server message page templates

5.0 How to download the GC CLF templates

The GC CLF templates provide all of the required images, CSS files and HTML files in one convenient download. The templates can be downloaded using the following link:

GC CLF templates version 1.05 (zip, 263 kb)

6.0 How to install and configure the templates

This section provides instructions to help institutions with installing and configuring the GC CLF template. The configured template should be shared with all the authoring groups within the institution. It is recommended that this process be completed once per institution to ensure consistency throughout the institution's Web site.

6.1 Selecting a Welcome Page template

Select a Welcome Page template for the institution. The text-based message area templates are recommended over the image-based message area templates for accessibility reasons.

Use the following table to determine which Welcome Page template file should be used:

Language of the site	Headquarters location	Message area variation	Template file
Bilingual	Outside Quebec	Text-based	`wp-pa.html`
	Outside Quebec	Image-based	`wp-pa-alt.html`
	In Quebec	Text-based	`wp-pa-quebec.html`
	In Quebec	Image-based	`wp-pa-alt-quebec.html`
Unilingual English	n/a	Text-based	`uniling\wp-pa-ul-eng.html`
Unilingual English	n/a	Image-based	`uniling\wp-pa-alt-ul-eng.html`
Unilingual French	n/a	Text-based	`uniling\wp-pa-ul-fra.html`
Unilingual French	n/a	Image-based	`uniling\wp-pa-alt-ul-fra.html`
Multilingual	Outside Quebec	Text-based	`multiling\wp-pa-ml.html`
	Outside Quebec	Image-based	`multiling\wp-pa-alt-ml.html`
	In Quebec	Text-based	`multiling\wp-pa-ml-quebec.html`
	In Quebec	Image-based	`multiling\wp-pa-alt-ml-quebec.html`

6.2 Configuring the image files

Replace sig-eng.gif and sig-fra.gif in the images directory with institutional signature images, without changing the file names. The images must meet the following requirements:
- The institutional signature must be the only graphical element in the image.
- The institutional signature must use the entire vertical space of the image (that is, no vertical white space above or below the institutional signature).
- The institutional signature must have no horizontal white space to the left of the flag symbol or the Coat of Arms.
- Institutional signatures that use the flag symbol must have an image height of 20 pixels, except in cases where additional height is required to fit the applied title.
- Institutional signatures that use the Coat of Arms must have an image height of 50 pixels, except in cases where additional height is required to fit the applied title.
Institutional signatures that exceed 260 pixels in width will require a change to the width and the starting position of the skip navigation links container. Instructions can be found in section 6.3.2.21 (Changing the width and the starting position of the skip navigation links container).
Institutional signatures that exceed 20 pixels in height will require an adjustment to the alignment of the FIP images. Instructions can be found in section 6.3.2.19 (Adjusting the alignment of the FIP images).
Replace the Welcome Page image in the image directory with an institutional Welcome Page image without changing the file name. The Welcome Page image should not contain text. For accessibility reasons, this image should be included using CSS, which is covered in section 6.3 (Configuring the CSS files). The image to replace depends on the Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).
- Text-based message area: Replace wp-pa.gif with the new Welcome Page image. The new image must be 600 pixels wide by 130 pixels high. These instructions apply to the following Welcome Page template files:
  - wp-pa.html
  - wp-pa-quebec.html
  - uniling\wp-pa-ul-eng.html
  - uniling\wp-pa-ul-fra.html
  - multiling\wp-pa-ml.html
  - multiling\wp-pa-ml-quebec.html
- Image-based message area: Replace wp-pa-alt.gif with the new Welcome Page image. The new image must be 600 pixels wide by 250 pixels high. These instructions apply to the following Welcome Page template files:
  - wp-pa-alt.html
  - wp-pa-alt-quebec.html
  - uniling\wp-pa-alt-ul-eng.html
  - uniling\wp-pa-alt-ul-fra.html
  - multiling\wp-pa-alt-ml.html
  - multiling\wp-pa-alt-ml-quebec.html
If there is a requirement for a background image in the banner area, create an image for that purpose and place it in the images directory. The image should not contain any text. For accessibility reasons, this image should be included using CSS, which is covered in section 6.3 (Configuring the CSS files).

Note: It is recommended that the banner area consist of a background colour instead of a background image. Should the template be made expandable in the future, a background image would be too wide when the template collapses and too narrow when the template expands.

Aside from the potential expandable template issues, the background image can be made accessible if the following requirements are met:
1. The image must be no more than 760 pixels wide by 80 pixels high. Exceeding these dimensions will result in the image being clipped.
2. The image should not contain any text for accessibility reasons. Text embedded in images is difficult for some clients to read since they are unable to control the font size or the foreground/background colour combinations. Also, by not embedding text, the same image can be used on both the English and French pages.
3. The image must have a background colour that will achieve high contrast with white text. If the background colour does not achieve high contrast with the white text, then the institutional name and URL will be difficult to read for some clients.
4. The majority of the image should be a plain colour except for the left and right sides of the image. The reason for this limitation is to ensure that all clients can read the institutional name and URL, which will be displayed over the image. If the part of the image behind the institutional name and URL is not plain, then that text will be difficult to read.

Top of Page

6.3 Configuring the CSS files

The template was developed using multiple CSS files to control layout and design. Many of the CSS files must not be modified because they are critical to ensuring a consistent result on most browsers.

The following CSS files must not be modified:

css\2col.css: Controls the two-column layout of the two-column template.
css\3col.css: Controls the three-column layout of the three-column template.
css\base2.css: Controls the content page scaleable font-size support for most browsers.
css\base.css: Controls the content page scaleable font-size support for legacy browsers, the utility classes and the layout for the FIP elements, the banner elements, the common menu bar elements, the side menu elements and the footer elements.
css\pf-if.css: Controls the printer-specific template functionality.
css\wp-pa.css: Controls the Welcome Page scaleable font-size support for legacy browsers and the Welcome Page layout.
css\wp-pa2.css: Controls the Welcome Page scaleable font-size support for most browsers.

The following CSS files that can be modified:

css\base-institution.css: Controls the customizable content page properties.
css\wp-pa-institution.css: Controls the customizable Welcome Page properties
css\institution.css: Controls the institution-specific CSS classes. CSS classes that will be used by multiple pages should be placed in this file.

6.3.1 Configuring css\wp-pa-institution.css

Both the layout and design of the Welcome Page templates are controlled using CSS. This section provides instructions for configuring some of the visual elements in the Welcome Page templates by modifying the css\wp-pa-institution.css file.

6.3.1.1 Changing the background/foreground colours of the text-based message area (text-based message area template only)

To change the background and foreground colours of the text-based message area in the text-based message area templates (wp-pa.html and wp-pa-quebec.html), change the "background-color" and "color" properties of the "div.headcontainer" class.

div.headcontainer { background-color: #CC9; color: #000; }

6.3.1.2 Changing the background image of the image-based message area

To change the background image of the image-based message area, change the first item of the "background" property of the "div.msgarea" and "div.msgareaalt" classes.

div.msgarea { background: url(../images/wp-pa.gif) #363; } div.msgareaalt { background: url(../images/wp-pa-alt.gif) #363; }

6.3.1.3 Changing the background/foreground colours of the image-based message area

To change the background and foreground colours of the image-based message area, change the "color" property of the "div.msgarea h1", "div.msgareaalt h1" class and the second item of the "background" property of the "div.msgarea" and "div.msgareaalt" classes.

div.msgarea h1, div.msgareaalt h1 { text-align: center; color: #FFF; font-weight: bold; } div.msgarea { background: url(../images/wp-pa.gif) #69C no-repeat; } div.msgareaalt { background: url(../images/wp-pa-alt.gif) #69C no-repeat; }

6.3.1.4 Changing the vertical positioning of the text in the image-based message area

To change the vertical positioning of the text in the image-based message area, change the "padding-top" property of the "div.msgarea h1" and "div.msgareaalt h1" classes.

div.msgarea h1 { padding-top: 55px; } div.msgareaalt h1 { padding-top: 160px; }

6.3.2 Configuring css\base-institution.css

Both the layout and design of the content page templates are controlled using CSS. This section provides instructions for configuring some of the visual elements in the content page templates by modifying the css\base-institution.css file.

Note: To ensure consistent results on a wide range of browser/platform combinations, do not make any changes to the css\base-institution.css file other than what is specified in this section.

6.3.2.1 Changing the banner background

The banner background can be changed to be either a background colour or a background image.

Note: It is recommended that the banner area use a background colour instead of a background image. Should the template be made expandable in the future, the background image will be too wide when the template collapses and will be too narrow when the template expands. Also, the background image will not be accessible unless the requirements specified in section 6.2 (Configuring the image files) are met.

Specifying the banner background colour:
To change the banner background colour, change the colour specified for the "background-color" property in the "div.banner" class. The "div.banner" class is located in base-institution.css.

div.banner{ color: #FFF; background-color: #363; }

Specifying a language neutral banner background image:
To change the background colour to a language neutral background image, it will be necessary to replace the " background-color" property in the "div.banner" class with a "background" property that specifies both a background colour and a background image. The background colour will only be visible where the background image is not.

div.banner{ color: #FFF; background: #363 url("/images/bbg.jpg") no-repeat center center; }

Specifying a language-specific banner background image:
To change the background colour to a language-specific background image, it will be necessary to first perform step 5 in section 6.6.1, Content page template for bilingual and multilingual sites. Next, change the URL and the background colour specified for the English and French content pages.

For English content pages, change the URL and the background colour specified for the "background" property in the "div.banner-eng, div.banner-lfcoa-eng" class. The background colour will only be visible where the background image is not.

div.banner-eng, div.banner-lfcoa-eng { background: url() #FFF no-repeat center center; }
For French content pages, change the URL and the background colour specified for the "background property" in the "div.banner-fra, div.banner-lfcoa-fra" class. The background colour will only be visible where the background image is not.

div.banner-fra, div.banner-lfcoa-fra { background: url() #FFF no-repeat center center; }

Note: To ensure consistent results on all pages, the URL used to specify the background image should either be an absolute URL (for example, "http://www.url.gc.ca/images/bbg.jpg") or a site absolute url (for example, "/images/bbg.jpg"). For the image to display when viewing the pages locally (for testing purposes), a local URL must be used (for example, "file:///C:/images/bbg.jpg").

6.3.2.2 Changing the regular, visited, hover, active, and focus link colours for the content area

To change the regular, visited, hover, active, and focus link colours for the content area, change the colours specified for the "color" property in the "div.center a:link", "div.center a:visited classes", and "div.center a:hover, div.center a:active, div.center a:focus" classes.

div.center a:link { color: #039; } div.center a:visited { color: #663; } div.center a:hover, div.center a:active, div.center a:focus { color: #C00; }

6.3.2.3 Changing the regular, visited, hover, active, and focus link colours for the breadcrumb, the footer, and the top of page links

To change the link colour for the footer, change the colours specified for the "color" property in the "p.breadcrumb a:link, p.breadcrumb a:visited, div.footer a:link, div.footer a:visited, div.topPage a:link, div.topPage a:visited, p.topPage a:link, p.topPage a:visited" "p.breadcrumb a:hover, p.breadcrumb a:active, p.breadcrumb a:focus, div.footer a:hover, div.footer a:active, div.footer a:focus, div.topPage a:hover, div.topPage a:active, div.topPage a:focus, p.topPage a:hover, p.topPage a:active, p.topPage a:focus" classes.

p.breadcrumb a:link, p.breadcrumb a:visited, div.footer a:link, div.footer a:visited, div.topPage a:link, div.topPage a:visited, p.topPage a:link, p.topPage a:visited { color: #039; background-color: #FFF; } p.breadcrumb a:hover, p.breadcrumb a:active, p.breadcrumb a:focus, div.footer a:hover, div.footer a:active, div.footer a:focus, div.topPage a:hover, div.topPage a:active, div.topPage a:focus, p.topPage a:hover, p.topPage a:active, p.topPage a:focus { color: #C00; }

6.3.2.4 Changing the background and foreground colours of the side menu titles

To change the background and foreground colours of the side menu titles, change the colours specified for the "background-color" and "color" properties in the "h2.nav, h2.nav a:link, h2.nav a:visited, div.h2nav, div.h2nav a:link, div.h2nav a:visited, p.h2nav, p.h2nav a:link, p.h2nav a:visited" class.

h2.nav, h2.nav a:link, h2.nav a:visited, div.h2nav, div.h2nav a:link, div.h2nav a:visited, p.h2nav, p.h2nav a:link, p.h2nav a:visited { background-color: #363; color: #FFF; }

6.3.2.5 Changing the underlining for side menu titles that are regular, visited, hover, active, and focus links

To change the underlining for side menu titles that are regular, visited, hover, active, and focus links, change the "text-decoration" property in the "h2.nav a:link, h2.nav a:visited, div.h2nav a:link, div.h2nav a:visited, p.h2nav a:link, p.h2nav a:visited" and "h2.nav a:hover, h2.nav a:active, h2.nav a:focus, div.h2nav a:hover, div.h2nav a:active, div.h2nav a:focus, p.h2nav a:hover, p.h2nav a:active, p.h2nav a:focus" classes.

h2.nav a:link, h2.nav a:visited, div.h2nav a:link, div.h2nav a:visited, p.h2nav a:link, p.h2nav a:visited { text-decoration: none; } h2.nav a:hover, h2.nav a:active, h2.nav a:focus, div.h2nav a:hover, div.h2nav a:active, div.h2nav a:focus, p.h2nav a:hover, p.h2nav a:active, p.h2nav a:focus { text-decoration: underline; color: #C00; }

6.3.2.6 Changing the background and foreground colours for text, regular links, and visited links in the left side menu text

To change the background and foreground colours for text, regular links, and visited links in the left side menu, change the colours specified for the "background-color" and "color" properties in the "div.left li.menucontent, div.left div.menucontent, div.left a:link.menulink, div.left a:visited.menulink" class.

div.left li.menucontent, div.left div.menucontent, div.left a:link.menulink, div.left a:visited.menulink { color :#000; background-color: #CC9; }

6.3.2.7 Changing the underlining for regular, visited, hover, active, and focus links in the left side menu

To change the underlining for regular, visited, hover, active, and focus links in the left side menu, change the "text-decoration" property in the "div.left a:link.menulink, div.left a:visited.menulink" and "div.left a:hover.menulink, div.left a:active.menulink, div.left a:focus.menulink" classes.

div.left a:link.menulink, div.left a:visited.menulink { text-decoration: none; } div.left a:hover.menulink, div.left a:active.menulink, div.left a:focus.menulink { text-decoration: underline; color: #C00; }

6.3.2.8 Changing the background and foreground colours for text, regular links, and visited links in the right side menu (three-column template only)

To change the background and foreground colours for text, regular links, and visited links in the right side menu in the three-column template, change the colours specified for the "background-color" and "color" properties in the "div.right li.menucontent, div.right div.menucontent, div.right a:link.menulink, div.right a:visited.menulink" class.

div.right li.menucontent, div.right div.menucontent { color: #000; background-color: #FFF; } div.right li.menucontent, div.right div.menucontent, div.right a:link.menulink, div.right a:visited.menulink { color: #000; background-color: #FFF; }

6.3.2.9 Changing the underlining for regular, visited, hover, active, and focus links in the right side menu (three-column template only)

To change the underlining for regular, visited, hover, active, and focus links in the right side menu, change the "text-decoration" property in the "div.right a:link.menulink, div.right a:visited.menulink" and "div.right a:hover.menulink, div.right a:active.menulink, div.right a:focus.menulink" classes.

div.right a:link.menulink, div.right a:visited.menulink { text-decoration: none; } div.right a:hover.menulink, div.right a:active.menulink, div.right a:focus.menulink { text-decoration: underline; color: #C00; }

6.3.2.10 Changing the hover, active, and focus link colours in the left and right side menus

To change the hover, active, and focus link colours in the left and right side menus, change the "color" property in the "div.left a:hover, div.left a:active, div.left a:focus, div.right a:hover, div.right a:active, div.right a:focus", "div.left a:hover.menulink, div.left a:active.menulink, div.left a:focus.menulink", and "div.right a:hover.menulink, div.right a:active.menulink, div.right a:focus.menulink" classes.

div.left a:hover, div.left a:active, div.left a:focus, div.right a:hover, div.right a:active, div.right a:focus { color: #C00; } div.left a:hover.menulink, div.left a:active.menulink, div.left a:focus.menulink { text-decoration: underline; color: #C00; } div.right a:hover.menulink, div.right a:active.menulink, div.right a:focus.menulink { text-decoration: underline; color: #C00; }

6.3.2.11 Changing the background colour of the proactive disclosure bar (three-column template only)

To change the background colour of the proactive disclosure bar in the left side menu of the three-column template, change the colour specified for the "background-color" property in the "div.prodis" class.

div.prodis { background-color: #363; }

6.3.2.12 Changing the background colour of the footer bar

To change the background colour of the footer bar at the bottom of the page, change the colour specified for the background-color property in the div.footer div.footerline class.

div.footer div.footerline { background-color: #363; }

6.3.2.13 Changing the dashed borders in the left side menu

To change the dashed borders in the left side menu, change the "border-bottom" property in the "div.left li.menucontent, div.left div.menucontent" class.

div.left li.menucontent, div.left div.menucontent { border-bottom: 1px dotted #FFF; }

6.3.2.14 Changing the colour of the content area border (three-column template only)

To change the content area border in the three-column template, change the "border" property in the "div.blackborder" class.

div.blackborder { border: solid #000 1px; }

6.3.2.15 Changing the colour of the right side menu border (three-column template only)

To change the right side menu border in the three-column template, change the "border" property in the "div.right li ul.nav, div.right li p.nav, div.right li div.nav" class.

div.right li ul.nav, div.right li p.nav, div.right li div.nav { border: 1px solid #000; }

6.3.2.16 Changing the background colour of the free space below the side menus and the content area (two-column and three-column templates only)

To change the background colour of the free space below the side menus and the content area, change the "background-color" property in the "div.colLayout" class.

div.colLayout { background-color: #FFF; height: 100%; }

6.3.2.17 Changing the background colour of the browser window surrounding the page

To change the background colour of the browser window surrounding the page, change the "background-color" property in the "body" class.

body { background-color: #FFF; }

6.3.2.18 Changing the default colour of the heading elements (h1 - h6)

To change the default colour of the heading elements (h1, h2, h3, h4, h5 and h6 ), change the "color" property in the "div.center h1, h2, h3, h4, h5, h6" class.

div.center h1, h2, h3, h4, h5, h6 { color: #000; }

6.3.2.19 Adjusting the alignment of the FIP images

When institutional signature images exceed 20 pixels in height, the alignment of the FIP images need to be adjusted.

To adjust the alignment of the FIP images, change the "height" property in the "div.fip", "div.cwm" class and the "padding-top" property in the "div.cwm img" class.

div.fip, div.cwm { height: 20px; } div.cwm img { padding-top: 0px; }

The "height" property in the "div.fip, div.cwm" class must have the same pixel height as the institutional signature image.

The "padding-top" property in the "div.cwm img" class must be adjusted to ensure correct vertical alignment between the "Canada" wordmark and the institutional signature.

Top of Page

6.3.2.21 Changing the default foreground, background, and border colours of the skip navigation links (when visible)

To change the default foreground, background, and border colours of the skip navigation links (when visible), change the "color", "background-color", and "border-color" properties in the "div.page div.core div.navaid a:hover,
div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" class.

div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus { color: #000; background-color: #CC9; border-color: #000; }

6.3.2.21 Changing the width and the starting position of the skip navigation links container

For institutional signatures that are wider than the Government of Canada institutional signature, it may be necessary to change the width and the starting position of the skip navigation links container to prevent the links from overlapping the institutional signature and the "Canada" wordmark in Internet Explorer when JavaScript is disabled.

Internet Explorer 5.x and 6.x: To change the width of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "width" property in the "div.page div.core div.navaid" class. To change the starting position of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "padding-left" property of the "div.page div.core div.navaid" class.

div.page div.core div.navaid { width: 450px; padding-left: 50px; }

Internet Explorer 7.x: To change the width of the skip navigation links container in Internet Explorer 7.x, change the "width" property in the "*:first-child+html div.page div.core div.navaid" class. To change the starting position of the skip navigation links container in Internet Explorer 7.x, change the "padding-left" property of the "*:first-child+html div.page div.core div.navaid" class.

*:first-child+html div.page div.core div.navaid { width: 450px; padding-left: 50px; }

Internet Explorer 5.x and 6.x: To change the width of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "width" property in the "* html div.page div.core div.navaid" class. To change the starting position of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "padding-left" property of the "* html div.page div.core div.navaid" class.

* html div.page div.core div.navaid { width: 450px; padding-left: 50px; }

6.4 Installing the image, CSS, and script files

Copy the "images", "css", "scripts", and "swf" directories to a central location that can be referenced by all Web pages. To simplify future maintenance, all Web pages should link to the same set of image and CSS files.
Modify all file paths in scripts/pe-ap.js so they correctly refer to the other script files.

6.5 Configuring and installing the Welcome Page template

6.5.1 Bilingual Welcome Page template

These instructions apply to the unilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template.
1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
2. For institutions headquartered outside Quebec, the alt text must be the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
3. For institutions headquartered in Quebec, the alt text must be the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
Change the message floating over the image in the message area. The message must be bilingual. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
1. For institutions headquartered outside Quebec, the message must include the English text, a space, a pipe, another space, followed by the French text (for example, <h1>Welcome | <span lang="fr" xml:lang="fr">Bienvenue</span></h1>)
2. For institutions headquartered in Quebec, the message must include the French text, a space, a pipe, another space, followed by the English text (for example, <h1>Bienvenue | <span lang="en" xml:lang="en">Welcome</span></h1>)
If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in both official languages.
1. For institutions headquartered outside Quebec, the English institution name must be on the left and the French institution name must be on the right.
  
  <div class="headtitleLft">Institution Name</div> <div class="headtitleRgt" lang="fr" xml:lang="fr">Nom de l'institution</div>
2. For institutions headquartered in Quebec, the French institution name must be on the left and the English institution name must be on the right.
  
  <div class="headtitleLft">Nom de l'institution</div> <div class="headtitleRgt" lang="en" xml:lang="en">Institution Name</div>
Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
1. English
2. Important Notices
Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
1. Français
2. Avis importants
Populate the metadata elements with appropriate values.
Provide an appropriate title within the title element. The title must be bilingual.
1. For institutions headquartered outside Quebec, the title must include the English text, a space, a pipe, another space, followed by the French text (for example, <title>Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada</title>).
2. For institutions headquartered in Quebec, the title must include the French text, a space, a pipe, another space, followed by the English text for example, <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default (for example, index.html).
Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.5.2 Unilingual Welcome Page template

These instructions apply to the unilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template.
1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
2. For unilingual English sites, the alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
3. For unilingual French sites, the alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
Change the message floating over the image in the message area. The message must be in the language of the page. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
1. For unilingual English sites, the message must be in English (for example, <h1>Welcome</h1>)
2. For unilingual French sites, the message must be in French (for example, <h1>Bienvenue</h1>)
If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in the language of the page. .
1. For unilingual English sites, the English institution name must be on the left. <div class="headtitleLft">Institution Name</div>
2. For unilingual French sites, the French institution name must be on the left. <div class="headtitleLft">Nom de l'institution</div>
For unilingual English sites, change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
1. Enter
2. Important Notice
For unilingual French sites, change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
1. Entrer
2. Avis importants
Populate the metadata elements with appropriate values.
Provide an appropriate title within the title element. The title must be unilingual..
1. For unilingual English sites, the title must be in English (for example, <title>Treasury Board of Canada Secretariat</title>).
2. For unilingual French sites, the title must be in French (for example, <title>Secrétariat to Conseil du Trésor du Canada</title>).
Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default for example, index.html).
Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.5.3 Multilingual Welcome Page template

These instructions apply to the multilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template
1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
2. For institutions headquartered outside Quebec, the alt text must include the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
3. For institutions headquartered in Quebec, the alt text must include the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
Change the message floating over the image in the message area. The message must be bilingual. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
1. For institutions headquartered outside Quebec, the message must include the English text, a space, a pipe, another space, followed by the French text (for example, <h1>Welcome | <span lang="fr" xml:lang="fr">Bienvenue</span></h1>)
2. For institutions headquartered in Quebec, the message must include the French text, a space, a pipe, another space, followed by the English text (for example, <h1>Bienvenue | <span lang="en" xml:lang="en">Welcome</span></h1>)
If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in both official languages.
1. For institutions headquartered outside Quebec, the English institution name must be on the left and the French institution name must be on the right.
  
  <div class="headtitleLft">Institution Name</div> <div class="headtitleRgt" lang="fr" xml:lang="fr">Nom de l'institution</div>
2. For institutions headquartered in Quebec, the French institution name must be on the left and the English institution name must be on the right.
  
  <div class="headtitleLft">Nom de l'institution</div> <div class="headtitleRgt" lang="en" xml:lang="en">Institution Name</div>
Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
1. English
2. Important Notices
Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
1. Français
2. Avis importants
Change the paths of the language links other than English or French to ensure they point to the appropriate institutional pages in the same language.
Populate the metadata elements with appropriate values.
Provide an appropriate title within the title element. The title must be bilingual.
1. For institutions headquartered outside Quebec, the title must include the English text, a space, a pipe, another space, followed by the French (for example, <title>Treasury Board of Canada Secretariat | Secrétariat to Conseil du Trésor du Canada</title>).
2. For institutions headquartered in Quebec, the title must include the French text, a space, a pipe, another space, followed by the English text (for example, <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default (for example, index.html).
Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

Top of Page

6.6 Configuring the content page templates

6.6.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites.

Modify all image and CSS file paths in the *col-eng.html and *col-fra.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (images/sig-eng.gif and images/sig-fra.gif) in the *col-eng.html and *col-fra.html files.
1. The specified width and height must be consistent with the width and height for images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
2. The alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat") for the *col-eng.html files, and the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada") for the *col-fra.html files.
Change the institution name in the banner area of the *col-eng.html and *col-fra.html files. The institution name must match the language of the page.
1. For the *col-eng.html pages, the institution name must be in English (for example, <p class="main">Treasury Board of Canada Secretariat</p> ).
2. For the *col-fra.html pages, the institution name must be in French (for example, <p class="main">Secrétariat du Conseil du Trésor du Canada</p> ).
Change the institution URL in the banner area of the *col-eng.html and *col-fra.html files. The institution URL in the banner must match the language of the page.
1. For the *col-eng.html pages, the institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
2. For the *col-fra.html pages, the institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
In the case where separate English and French banner images are required, change the "banner" class for the banner area of the *col-eng.html and *col-fra.html files as follows to enable support for the separate images. This change will also make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.
1. For the *col-eng.html pages, change the "banner" class to "banner-eng" or "banner-lfcoa-eng" if the stylized leaf is included in the image.
2. For the *col-fra.html pages, change the "banner" class to "banner-fra" or "banner-lfcoa-fra" if the stylized leaf is included in the image.
Change the paths of the following links in the *col-eng.html files to ensure they point to the appropriate institutional pages in English:
1. Home
2. Contact Us
3. Help
4. Search
5. Important Notices
Change the paths of the following links in the *col-fra.html files to ensure they point to the appropriate institutional pages in French:
1. Accueil
2. Contactez-nous
3. Aide
4. Recherche
5. Avis importants
Change the metadata elements in the *col-eng.html and *col-fra.html files as required.

6.6.2 Content page template for unilingual English sites

This template must be used for all content pages on unilingual English sites.

Modify all image and CSS file paths in the uniling\*col-ul-eng.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (images/sig-eng.gif) in the uniling\*col-ul-eng.html files.
1. The specified width and height must be consistent with the width and height for images/sig-eng.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
2. The alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
Change the institution name in the banner area of the uniling\*col-ul-eng.html files. The institution name must be in English (for example, <p class="main">Treasury Board of Canada Secretariat</p>).
Change the institution URL in the banner area of the uniling\*col-ul-eng.html files. The institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
In the case where the text-based institution name and URL need to be hidden, change the "banner" class for the banner area of the *col-ul-eng.html files as follows. This change will make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.

For the *col-ul-eng.html pages, change the "banner" class to "banner-eng" or "banner-lfcoa-eng" if the stylized leaf is included in the image.
Change the path of the Avertissement link in the uniling\*col-ul-eng.html files to ensure it points to the official languages notice.
Change the paths of the following links in the uniling\*col-ul-eng.html files to ensure they point to the appropriate institutional pages in English:
1. Home
2. Contact Us
3. Help
4. Search
5. Important Notices
Change the metadata elements in the uniling\*col-ul-eng.html files as required.

6.6.3 Content page template for unilingual French sites

This template must be used for all content pages on unilingual French sites.

Modify all image and CSS file paths in the uniling\*col-ul-fra.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (images/sig-fra.gif) in the uniling\*col-ul-fra.html files.
1. The specified width and height must be consistent with the width and height for images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
2. The alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
Change the institution name in the banner area of the uniling\*col-ul-fra.html files. The institution name must be in French (for example, <p class="main">Secrétariat du Conseil du Trésor du Canada</p>).
Change the institution URL in the banner area of the uniling\*col-ul-fra.html files. The institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
In the case where the text-based institution name and URL need to be hidden, change the "banner" class for the banner area of the *col-ul-fra.html files as follows. This change will make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.

For the *col-ul-fra.html pages, change the "banner" class to "banner-fra" or "banner-lfcoa-fra" if the stylized leaf is included in the image.
Change the path of the Notice link in the uniling\*col-ul-fra.html files to ensure it points to the official languages notice.
Change the paths of the following links in the uniling\*col-ul-fra.html files to ensure they point to the appropriate institutional pages in French:
1. Accueil
2. Contactez-nous
3. Aide
4. Recherche
5. Avis importants
Change the metadata elements in the uniling\*col-ul-fra.html files as required.

6.6.4 Content page template for languages other than English or French

This template must be used for content pages where the content is provided primarily in a language other than English or French.

For institutions headquartered outside Quebec, these instructions apply to the multiling\*col-ml-spa.html files. For institutions headquartered in Quebec, these instructions apply to the multiling\*col-ml-quebec-spa.html files.

Modify all image and CSS file paths in the content page template files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the language specified in the html element. The language code for the language of the page must be specified for the lang and xml:lang attributes (for example, <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">).
Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the content page template files.
1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
2. The alt text must be the institution name in the language of the page (for example, alt="Gobierno de Canadá").
Change the image alt text specified for the "Canada" wordmark in the content page template files. The alt text must be "Symbol of the Government of Canada" in the language of the page (for example, alt="Símbolo del Gobierno de Canadá").
Change the institution name in the banner area of the content page template files. The institution name must match the language of the page (for example, <p class="main">Gobierno de Canadá</p>).
Change the institution URL in the banner area of the content page template files. The institution URL in the banner must match the language of the page.
1. For institutions headquartered outside Quebec, the institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
2. For the *col-fra.html pages, the institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
Change the language of the skip navigation links. The skip navigation links must be in the language of the page.

<a href="#cont">Sáltese al contenido</a> <a href="#il">Sáltese las conexiones institucionales</a>
Change the invisible h1 element for the left side menu. The invisible h1 element must be in the language of the page (for example, <h1 class="navaid"><a name="il" id="il">Conexiones institucionales</a></h1>)
Change the paths of the following links in the content page template files to ensure they point to the appropriate institutional pages in English:
1. Home
2. Contact Us
3. Help
4. Search
5. Important Notices
Change the paths of the following links in the content page template files to ensure they point to the appropriate institutional pages in French:
1. Accueil
2. Contactez-nous
3. Aide
4. Recherche
5. Avis importants
Change the metadata elements in the content page template files as required. The metadata values must be in the language of the page. Ensure the dc.language metadata element specifies the language code for the language of the page (for example, <meta name="dc.language" scheme="ISO639-2/T" content="es" />).
Change the language of the Date Modified | Date de modification label in the lower left corner. The language of the label must be in the language of the page (for example, Fecha modificó : <span class="date">2006-06-22</span>).
Change the language of the Top of page links in the content area and in the footer. The language of the link text and the title value must be in the language of the page (for example, <a href="#tphp" title="Vuelva a la cima de página"><img class="uparrow" src="../images/tphp.gif" width="19" height="12" alt="" /><br />Cima de página</a>).

Top of Page

6.7 Configuring the server message page templates

6.7.1 Unilingual server message page templates

This template must be used for server messages of unilingual sites or sites where the language preference of the client is known.

For unilingual English server message pages, these instructions apply to the srvmsg\srvmsg-eng.html file. For unilingual French server message pages, these instructions apply to the srvmsg\srvmsg-fra.html file.

Modify all image and CSS file paths in the server message page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the server message page template.
1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
2. For unilingual English server message pages, the alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
3. For unilingual French server message pages, the alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
For unilingual English server message pages, change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in English
1. Important Notices
For unilingual French server message pages, change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in French:
1. Avis importants
Provide an appropriate title within the title element. The title must be unilingual. Consult Common Error Messages for a list of appropriate message titles and content.
1. For unilingual English server message pages, the title must be in English (for example, <title>HTTP Error 404 - Not Found</title>).
2. For unilingual French server message pages, the title must be in French (for example, <title>Erreur HTTP 404 - Non trouvé</title>).
Populate the content area title with an appropriate title. The content area title should be consistent with the title provided within the title element (Step 5). Consult Common Error Messages for a list of appropriate message titles and content.
1. For unilingual English server message pages, the title must be in English:
  <h1><a name="cont" id="cont">  HTTP Error 404 - Not Found  </a></h1>
2. For unilingual French server message pages, the title must be in French:
  <h1><a name="cont" id="cont">  Erreur HTTP 404 - Non trouvé  </a></h1>
Populate the content area with appropriate content. Consult Common Error Messages for a list of appropriate message titles and content.
1. For unilingual English server message pages, the content must be in English.
2. For unilingual French server message pages, the title must be in French.
Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

6.7.2 Bilingual server message page templates

This template must be used for server messages of bilingual and multilingual sites where the language preference of the client is not known.

For institutions headquartered outside Quebec, these instructions apply to the srvmsg\srvmsg.html file. For institutions headquartered in Quebec, these instructions apply to the srvmsg\srvmsg-quebec.html file.

Modify all image and CSS file paths in the server message page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
1. ../images/
2. ../css/
Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the server message page template.
1. The specified width and height must be consistent with the width and height for images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
2. For institutions headquartered outside Quebec, the alt text must be the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
3. For institutions headquartered in Quebec, the alt text must be the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
Change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in English:
1. Important Notices
Change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in French:
1. Avis importants
Provide an appropriate title within the title element. The title must be bilingual. Consult Common Error Messages for a list of appropriate message titles and content.
1. For institutions headquartered outside Quebec, the title must be the English title, a space, a pipe, another space, followed by the French title
  (for example, <title>HTTP Error 404 - Not Found | Erreur HTTP 404 - Non trouvé</title>).
2. For institutions headquartered in Quebec, the title must be the French title, a space, a pipe, another space, followed by the English title
  (for example, <title>Erreur HTTP 404 - Non trouvé | HTTP Error 404 - Not Found</title>).
Populate the content area titles with appropriate titles in English and French. The content area title should be consistent with the title provided within the title element (Step 5). Consult Common Error Messages for a list of appropriate message titles and content.
1. For institutions headquartered outside Quebec, the content area title in the left column must be in English and the content area title in the right column must be in French.
2. For institutions headquartered in Quebec, the content area title in the left column must be in French and the content area title in the right column must be in English.
Populate the content area with appropriate content. Consult Common Error Messages for a list of appropriate message titles and content.
1. For institutions headquartered outside Quebec, the content in the left column must be in English and the content in the right column must be in French.
2. For institutions headquartered in Quebec, the content in the left column must be in French and the content in the right column must be in English.
Replace the Date Modified | Date de modification values in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.0 How to use the configured content page templates

This section provides instructions to help authoring groups within the institution to use the content page templates that were installed and configured in section 6.0 (How to install and configure the templates). Instructions for using the Welcome Page template can be found in section 6.5 (Configuring and installing the Welcome Page template).

7.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites.

7.1.1 Selecting the templates

Select an English (*col-eng.html) and French (*col-fra.html) version of one of the configured content page templates according to the following requirements:

For the institution's primary menu page and all sub site main pages, the 3col*.html templates must be used.
For the rest of the pages on the site, either the 2col*.html or the 3col*.html templates may be used. The 2col*.html templates are recommended because they allow for shorter Web pages than the 3col*.html templates by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the 2col*.html templates, the 1col*.html templates should be used.
For Web applications, either the 2col*.html or the 3col*.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col*.html templates, the 1col*.html templates should be used.

7.1.2 Creating a Web page from the selected templates

Make local copies of the selected templates and change the filenames as required.
Change the paths of the language selection links.
1. For the English page, change the path of the Français link so that it links to the French version of the page.
2. For the French page, change the path of the English link so that it links to the English version of the page.
Populate the metadata elements with appropriate values
1. For the English page, populate the metadata elements with English metadata.
2. For the French page, populate the metadata elements with French metadata.
Provide an appropriate title within the title element. The title must match the language of the page.
1. For the English page, the title must be in English (for example, <title>Welcome to the Treasury Board of Canada Secretariat</title>).
2. For the French page, the title must be in French (for example, <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
Change the breadcrumb as required. All breadcrumb elements must be placed in between <p class="breadcrumb"> and the associated </p>.
1. For the English page, all breadcrumb elements must be in English and any linked elements must link to English pages.
2. For the French page, all breadcrumb elements must be in French and any linked elements must link to French pages.
If either the 3col*.html or 2col*.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
If the 3col*.html templates are being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that is not grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
Populate the content area title with an appropriate title. The content area title should be consistent with the title provided within the title element (Step 4).
1. For the English page, the content area title must be in English. <h1><a name="cont" id="cont">  Welcome to the Treasury Board of Canada Secretariat  </a></h1>
2. For the French page, the content area title must be in French. <h1><a name="cont" id="cont">  Bienvenue au Secrétariat du Conseil du Trésor du Canada  </a></h1>
Populate the content area with appropriate content in the language of the page. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
1. For the English page, the content must be in English.
2. For the French page, the content must be in French.
Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

Top of Page

7.2 Content page template for unilingual English sites

This template must be used for all content pages on unilingual English sites.

7.2.1 Selecting the template

Select an English (uniling\*col-ul-eng.html) version of one of the configured content page templates according to the following requirements:

For the institution's primary menu page and all sub site main pages, the uniling\3col-ul-eng.html template must be used.
For the rest of the pages on the site, either the uniling\2col-ul-eng.html or the uniling\3col-ul-eng.html templates may be used. The uniling\2col-ul-eng.html template is recommended because it allows for shorter Web pages than the uniling\3col-ul-eng.html template by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the uniling\2col-ul-eng.html template, the uniling\1col-ul-eng.html template should be used.
For Web applications, either the uniling\2col-ul-eng.html or the 3col-ul-eng.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col-ul-eng.html templates, the 1col-ul-eng.html templates should be used.

7.2.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

Make a local copy of the selected template and change the filename as required.
Populate the metadata elements with appropriate values in English.
Provide an appropriate English title within the title element (for example, <title>Welcome to the Treasury Board of Canada Secretariat</title>).
Change the breadcrumb as required. All breadcrumb elements must be in English, must be linked to English pages and must be placed between <p class="breadcrumb"> and the associated </p>.
If either the 3col-eng.html or 2col-eng.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
If the 3col-eng.html template is being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that are is grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
Populate the content area title with an appropriate English title. The content area title should be consistent with the title provided within the title element (Step 4).

<h1><a name="cont" id="cont">  Welcome to the Treasury Board of Canada Secretariat  </a></h1>
Populate the content area with appropriate English content. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
Replace the Date Modified value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.3 Content page template for unilingual French sites

This template must be used for all content pages on unilingual French sites.

7.3.1 Selecting the template

Select a French (uniling\*col-ul-fra.html) version of one of the configured content page templates according to the following requirements:

For the institution's primary menu page and all sub site main pages, the uniling\3col-ul-fra.html template must be used.
For the rest of the pages on the site, either the uniling\2col-ul-fra.html or the uniling\3col-ul-fra.html templates may be used. The uniling\2col-ul-fra.html template is recommended because it allows for shorter Web pages than the uniling\3col-ul-fra.html template by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the uniling\2col-ul-fra.html template, the uniling\1col-ul-fra.html template should be used.
For Web applications, either the uniling\2col-ul-fra.html or the 3col-ul-fra.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col-ul-fra.html templates, the 1col-ul-fra.html templates should be used.

7.3.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

Make a local copy of the selected template and change the filename as required.
Populate the metadata elements with appropriate values in French.
Provide an appropriate French title within the title element (for example, <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
Change the breadcrumb as required. All breadcrumb elements must be in French, must be linked to French pages and must be placed between <p class="breadcrumb"> and the associated </p>.
If either the 3col-fra.html or 2col-fra.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
If the 3col-fra.html template is being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that are is grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
Populate the content area title with an appropriate French title. The content area title should be consistent with the title provided within the title element (Step 4).

<h1><a name="cont" id="cont">  Bienvenue au Secrétariat du Conseil du Trésor du Canada  </a>
Populate the content area with appropriate French content. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
Replace the Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.4 Content page template for languages other than English or French

This template must be used for content pages where the content is provided primarily in a language other than English or French.

7.4.1 Selecting the template

Select one of the configured content page templates according to the following requirements:

For the institution's primary menu page and all sub site main pages, the multiling\3col-ml*.html templates must be used.
For the rest of the pages on the site, either the multiling\2col-ml*.html or the multiling\3col-ml*.html templates may be used. The multiling\2col-ml*.html templates are recommended because they allow for shorter Web pages than the multiling\3col-ml*.html templates by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the multiling\2col-ml*.html templates, the multiling\1col-ml*.html templates should be used.
For Web applications, either the multiling\2col-ml*.html or the multiling\3col-ml*.html templates may be used. In cases where it is not possible to fit content within the content area of the multiling\2col-ml*.html templates, the multiling\1col-ml*.html templates should be used.

7.4.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

Make local copies of the selected template and change the filenames as required.
Change the paths of the language selection links.
- Change the path of the Français link so that it links to the French version of the page.
- Change the path of the English link so that it links to the English version of the page.
Populate the metadata elements with appropriate values that match the language of the page.
Provide an appropriate title within the title element. The title must match the language of the page (for example, <title>Bienvenido al Gobierno de Canadá</title>).
Change the breadcrumb as required. All breadcrumb elements must be placed in between <p class="breadcrumb"> and the associated </p>.
1. For the English breadcrumb, all breadcrumb elements must be in English and any linked elements must link to English pages.
2. For the French breadcrumb all breadcrumb elements must be in French and any linked elements must link to French pages.
If either the multiling\3col-ml*.html or multiling\2col-ml*.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
If the multiling\3col-ml*.html templates are being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that is not grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
Populate the content area title with an appropriate title that matches the language of the page. The content area title should be consistent with the title provided within the title element (Step 4).
1. For institutions headquartered outside of Quebec:
  
  <h1><a name="cont" id="cont">  Bienvenido al Gobierno de Canadá  </a></h1>
2. For institutions headquartered in Quebec:
  
  <h1><a name="cont" id="cont">  Bienvenido al Gobierno de Canadá  </a></h1>
Populate the content area with appropriate content in the language of the page. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

Top of Page

8.0 Utility CSS classes defined by the template

Utility CSS classes provide a browser safe way to change font sizes, align text and create other visual effects. To use one of the utility classes with a container, include the class attribute in the container element and specify the desired class name as the attribute value.

for example, <p class="alignRight">Text to be right aligned</p>

8.1 Font size classes

These font size classes provide a simple, CLF-compliant and browser-safe way of modifying the font size of text. These classes should be used instead of custom font size classes (using the font or font-size properties) to ensure support for a wide range of browser platform combinations.

Below is a table containing the names of all the available classes and the resulting font size:

Class name	Font size for most browsers	Font size for legacy browsers	Visual result
`fontSize70`	70%	7.0 pt	Resulting font size
`fontSize75`	75%	7.5 pt	Resulting font size
`smallFont`	75%	8.0 pt	Resulting font size
`fontSize80`	80%	8.0 pt	Resulting font size
`fontSize85`	85%	8.5 pt	Resulting font size
`mediumFont`	85%	8.5 pt	Resulting font size
`fontSize90`	90%	9.0 pt	Resulting font size
`fontSize95`	95%	9.5 pt	Resulting font size
`fontSize100`	100%	10.0 pt	Resulting font size
`fontSize105`	105%	10.0 pt	Resulting font size
`fontSize110`	110%	10.5 pt	Resulting font size
`h6Size`	110%	10.5 pt	Resulting font size
`fontSize115`	115%	11.0 pt	Resulting font size
`fontSize120`	120%	11.5 pt	Resulting font size
`h5Size`	120%	11.5 pt	Resulting font size
`fontSize125`	125%	12.0 pt	Resulting font size
`fontSize130`	130%	13.0 pt	Resulting font size
`h4Size`	130%	13.0 pt	Resulting font size
`fontSize135`	135%	13.0 pt	Resulting font size
`big`	140%	13.5 pt	Resulting font size
`fontSize140`	140%	13.5 pt	Resulting font size
`h3Size`	140%	13.5 pt	Resulting font size
`fontSize145`	145%	13.5 pt	Resulting font size
`fontSize150`	150%	14.0 pt	Resulting font size
`h2Size`	150%	14.0 pt	Resulting font size
`fontSize155`	155%	14.5 pt	Resulting font size
`fontSize160`	160%	15.0 pt	Resulting font size
`h1Size`	160%	15.0 pt	Resulting font size
`fontSize165`	165%	16.0 pt	Resulting font size
`fontSize170`	170%	16.5 pt	Resulting font size
`fontSize175`	175%	17.0 pt	Resulting font size
`fontSize180`	180%	17.5 pt	Resulting font size
`fontSize185`	185%	18.0 pt	Resulting font size
`fontSize190`	190%	19.0 pt	Resulting font size
`fontSize195`	195%	19.5 pt	Resulting font size
`fontSize200`	200%	20.0 pt	Resulting font size

8.2 Width classes

These width classes provide a simple, CLF-compliant and browser-safe way of specifying the width of a container.

Below is a table containing the names of all the available classes and the resulting widths:

Class name	Width
`widthFull`	98.5%
`width95`	95%
`width90`	90%
`width85`	85%
`width80`	80%
`width75`	75%
`width70`	70%
`width65`	65%
`width60`	60%
`width55`	55%
`width50`	50%
`width45`	45%
`width40`	40%
`width35`	35%
`width30`	30%
`width25`	25%
`width20`	20%
`width15`	15%
`width10`	10%
`width5`	5%

8.3 Indentation classes

These indentation classes provide a simple, CLF-compliant and browser-safe way of specifying the indentation of a container.

Below is a table containing the names of all the available classes and the resulting indentation:

Class name	Indent size	Visual result
`indent1`	18	Resulting indent
`indent2`	36	Resulting indent
`indent3`	54	Resulting indent
`indent4`	72	Resulting indent
`indent5`	90	Resulting indent

8.4 Alignment classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying the alignment of block-level objects.

Below is a table containing the names of all the available classes and the resulting alignment:

Class name	Horizontal Alignment	Vertical Alignment	Visual results
`alignLeft`	Left	Default (`baseline`)	Resulting alignment
`alignCenter`	Centre	Default (`baseline`)	Resulting alignment
`alignRight`	Right	Default (`baseline`)	Resulting alignment
`alignTop`	Default (Left)	Top	Resulting alignment
`alignBottom`	Default (Left)	Bottom	Resulting alignment
`alignTopLeft`	Left	Top	Resulting alignment
`alignTopCenter`	Centre	Top	Resulting alignment
`alignTopRight`	Right	Top	Resulting alignment
`alignBottomLeft`	Left	Bottom	Resulting alignment
`alignBottomCenter`	Centre	Bottom	Resulting alignment
`alignBottomRight`	Right	Bottom	Resulting alignment

8.5 Float classes

These float classes provide a simple, CLF-compliant and browser-safe way of wrapping text around objects such as images and tables. This is accomplished by applying one of these classes to the image or table that the text should wrap around.

Below is a table containing the names of all the available classes and the resulting float/alignment:

Class name	Float	Vertical Alignment
`floatLeft`	Left	Default (`baseline`)
`floatRight`	Right	Default (`baseline`)
`image-left`	Left	`text-top`
`image-right`	Right	`text-top`

Top of Page

8.6 Unordered list classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying bullets for unordered lists (ul). This is accomplished by applying one of these classes to the ul element of an unordered list.

Below is a table containing the names of all the available classes and the resulting bullets:

Class name	Bullet type	Visual result
`noBullet`	None	Resulting bullet
`disc`	Disc	Resulting bullet
`square`	Square	Resulting bullet
`circle`	Circle	Resulting bullet

8.7 Ordered list classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying the numbering system for ordered lists (ol). This is accomplished by applying one of these classes to the ol element of an ordered list.

Below is a table containing the names of all the available classes and the resulting numbering systems:

Class name	Bullet type	Visual result
`lower-alpha`	Lower-case alphabetic	Resulting bullet
`upper-alpha`	Upper-case alphabetic	Resulting bullet
`lower-roman`	Lower-case roman numerals	Resulting bullet
`upper-roman`	Upper-case roman numerals	Resulting bullet

8.8 Colour classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying the foreground and background colours.

Below is a table containing the names of all the available classes and the resulting colours:

Class Name	Foreground colour	Background colour	Visual result
`black`	`#000000`	`Transparent`	Resulting colour
`blue`	`#0000FF`	`Transparent`	Resulting colour
`deepyellow`	`#FFCC33`	`Transparent`	Resulting colour
`green`	`#009933`	`Transparent`	Resulting colour
`grey`	`#999999`	`Transparent`	Resulting colour
`red`	`#CC0000`	`Transparent`	Resulting colour
`white`	`#FFFFFF`	`Transparent`	Resulting colour
`blackBG`	Default	`#000000`	Resulting colour
`blueBG`	Default	`#0000FF`	Resulting colour
`deepyellowBG`	Default	`#FFCC33`	Resulting colour
`greenBG`	Default	`#009933`	Resulting colour
`lightgreyBG`	Default	`#CCCCCC`	Resulting colour
`redBG`	Default	`#CC0000`	Resulting colour
`whiteBG`	Default	`#FFFFFF`	Resulting colour

8.9 Miscellaneous classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying miscellaneous visual effects.

Below is a table containing the names of all the available classes and the resulting visual effects:

Class Name	Purpose
compress	Sets the top and bottom margins to zero, reducing the vertical white space when used with the following block-level elements: `p, h1, h2, h3, h4, h5, h6, ul,` and `ol`.
`doubleLineSpace`	Visually specifies double line spacing for text in the container.
`headline` (content and server message page templates only)	Sets the top and bottom margins to zero and reduces the text size for headings (`h1` to `h6`). This results in a reduction of the vertical white space and the font size. This class will also prevent the underlining of any links using this class unless the link is in focus.
`hidden` (Welcome Page templates only)	Visually hides the container without preventing adaptive technologies such as screen readers from reading the container (only supported within the `msgarea` container).
`highlight` (Welcome Page templates only)	Applies a border, a background colour and padding to a container.
`lowercase`	Visually transforms the text in the container to lowercase.
`menulinkdefault` (content and server message page templates only)	Sets a link to be the full width of the parent container (when the class is applied to an a element)
`navaid` (content and server message page templates only)	Visually hides the container without preventing adaptive technologies such as screen readers from reading the container.
`noWrap`	Prevents the text in the container from wrapping.
`uppercase`	Visually transforms the text in the container to uppercase.
`wrap`	Used to allow floating of content to the right of the content area `h1` in Internet Explorer. Note: This class should only be used when content is being floated to the right of the content area `h1`. Use of this class under any other circumstances may result in display issues with the content area border.
`wrapContainer`	Used to control the wrapping of text around images and tables. See Wrapping text around images and tables for more details.

9.0 Client-side CSS for enhancing accessibility

CLF standards require a specific visual design, which may require a workaround to enhance accessibility where circumstances warrant. The template's design is flexible enough to allow clients to configure the visual presentation to meet their accessibility needs by using client-side CSS.

Most browsers provide the ability to specify a custom style sheet, which would be applied to every Web page that a client visits. To take advantage of this feature, clients need only to create a custom style sheet and to instruct the browser to use it.

To create a custom style sheet, a client would require knowledge of both CSS and how pages are developed. There are many custom style sheets available on the Internet to improve accessibility of Web pages in general, but to create a custom style sheet that enables specific accessibility features in this template would most likely be too difficult for most clients.

To make it easier for clients to enhance the accessibility of Web pages using the GC CLF template, client-side CSS were developed that can easily be included in custom style sheets. These client-side CSS should be made available on the institutional help page for clients to download.

9.1 Visible skip navigation links by default

To meet visual design requirements, it was necessary to make the skip navigation elements invisible by default. This approach does not affect clients using a screen reader and the skip navigation elements do become visible when they gain focus but they may be difficult to find initially since they are invisible by default.

Although CLF does not allow the skip navigation links to be visible by default, clients can make the skip navigation links visible by default by including the following client-side CSS in their custom style sheets:

div.navaid { position: static !important; font-size: 100% !important; float: none !important; overflow: visible !important; width: auto !important; height: auto !important; max-width: auto !important; margin-left: 0px !important; margin-right: 0px !important; padding-left: 0px !important; color: #000 !important; } div.navaid a { color: #00F !important; padding: 5px !important; line-height: 150% !important; border: none !important; position: static !important; zoom: 0 !important; } div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus { color: #00F !important; border: none !important; background-color: #FFF !important; }

9.2 Expandable page

To meet visual design requirements, it was necessary to fix the width of the template at 760 pixels. For some clients, an expandable template improves accessibility and/or usability.

Although CLF does not allow the template to be expandable by default, clients can make Web pages using the template expandable by including the following client-side CSS in their custom style sheets:

div.page { width : 100% !important; }

9.3 Underline all links

To meet visual design requirements, it was necessary to remove the underlining of links in the side menu and the common menu bar. Some clients may have difficulty recognizing links that are not underlined or may prefer that all links be underlined regardless of the impact on visual design.

Although CLF does not allow the side menu and common menu bar links to be underlined by default, clients can force all links to be underlined by including the following client-side CSS in their custom style sheets:

a:link, a:visited, a:hover, a:active, a:focus{ text-decoration: underline !important; }

9.4 Consistent link colours

To meet visual design requirements, it was necessary to specify different link foreground and background colours in some areas of the page. Some clients may have difficulty identifying links when the colour scheme is not consistent throughout the page.

Although CLF does not allow the foreground and background colour to be the same for all links by default, clients can force all links to have the same foreground and background colours by including the following client-side CSS in their custom style sheets:

a:link, a:visited, a:hover, a:active, a:focus { background-color: #FFF !important; font-weight: normal !important; font-style: normal !important; font-variant: normal !important; padding: 0px 0px 2px 2px !important; } a:link { color: #00F !important; } a:visited { color: #009 !important; } a:hover, a:active, a:focus { color: #C00 !important; }

In the above example, the colours can be modified and are assigned as follows:

Link property	Class name	Class property	Colour (hex)	Colour
Background colour	`a:link, a:visited, a:hover, a:active, a:focus`	`background-color`	`#FFF`	White
Normal link colour	`a:link`	`color`	`#00F`	Blue
Visited link colour	`a:visited`	`color`	`#009`	Dark Blue
Hover/active/focus link colour	`a:hover, a:active, a:focus`	`color`	`#C00`	Red

Top of Page

9.5 High contrast content page banner

To meet both visual design and accessibility requirements for the content page banner, the template displays the foreground text either over a background colour or a background image. Depending on the current font size and the colours used, the contrast between the foreground text and the background may not be sufficient for certain clients.

Clients can ensure a high contrast content page banner by disabling the background colour or image and specifying a high contrast foreground and background colour combination. This can be achieved by including the following client-side CSS in their custom style sheets:

div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra { background: none !important; border-top: 1px solid #000 !important; border-left: 1px solid #000 !important; border-right: 1px solid #000 !important; min-height: 5.58em !important; margin-top: 3.14em !important; padding-bottom: 0.67em !important; } * html img.coa, * html img.lf { margin-top: -2.84em !important; } div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div.banner-lfcoa-fra img.coa, div.banner-lfcoa-fra img.lf { display: inline !important; } div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main, div.banner-eng p.siteuri, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.siteuri { position: static !important; font-size: 100% !important; float: none !important; overflow: visible !important; width: auto !important; height: auto !important; } div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main { font-family: "times new roman", sans-serif !important; font-weight: bold !important; font-size: 185% !important; margin: 0 !important; padding: 0 !important; } div.banner-eng p.siteuri, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.siteuri { font-family: Arial, Helvetica, sans-serif !important; background-color: transparent !important; font-weight: lighter !important; font-size: 110% !important; margin: 0 !important; padding: 0 !important; } p.main, p.main span, p.siteuri, p.siteuri span { color: #000 !important; } * html p.main, * html p.main span, * html p.siteuri, * html p.siteuri span { width: 99.5% !important; } p.main img, p.siteuri img { display: none !important; }

9.6 High contrast Welcome Page message area

To meet both visual design and accessibility requirements for the Welcome Page message area, the template displays the foreground text over both a background colour and a background image. Depending on the current font size and the colours used, the contrast between the foreground text and the background may not be sufficient for certain clients.

Clients can ensure a high contrast Welcome Page message area by disabling the background colour, disabling the background image and specifying a high contrast foreground and background colour combination. This can be achieved by including the following client-side CSS in their custom style sheets:

div.msgarea, div.msgareaalt { background: none !important; border-top: 1px solid #000 !important; border-left: 1px solid #000 !important; border-right: 1px solid #000 !important; } div.msgareaalt { border-bottom: 1px solid #000 !important; } * html div.msgarea, * html div.msgareaalt { width: 99.7% !important; } * html div.msgarea { height: 129px !important; } * html div.msgareaalt { height: 248px !important; } div.msgarea h1, div.msgareaalt h1, div.headtitleLft, div.headtitleRgt, div.headcontainer, div.msgarea, div.msgareaalt { color: #000 !important; } div.msgarea h1.hidden, div.msgareaalt h1.hidden { position: static !important; font-size: 200% !important; float: none !important; overflow: visible !important; width: 100% !important; height: auto !important; font-weight: bold !important; } div.headcontainer { background-color: #FFF !important; border: 1px solid #000 !important; } * html div.headcontainer { width: 99.7% !important; height: 118px !important; }

9.7 High contrast hover/active/focus links

To meet both visual design and accessibility requirements, the foreground or background colours of links may not change when a mouse pointer hovers over top or when the link gains focus when using a keyboard or other alternate input device. Depending on how the browser highlights links, the current font size, and the colours used, some clients may have difficulty determining which link they are about to select.

Clients can make it easier to determine which link they are about to select by specifying a foreground and background colour for links when a mouse pointer hovers over top or when the link gains focus when using a keyboard or other alternate input device. This can be achieved by including the following client-side CSS in their custom style sheets:

a:hover, a:active, a:focus { color: #000 !important; background-color: #FFF !important; }

In the above example, the colours can be modified and are assigned as follows:

Link property	Class Name	Class property	Colour (hex)	Colour
Hover/active/focus link colour	`a:hover, a:active, a:focus`	`color`	`#000`	Black
Background colour	`a:hover, a:active, a:focus`	`background-color`	`#FF0`	Yellow

10.0 Progressive Enhancement

Canadians have the right to obtain information and services from Government of Canada Web sites regardless of the technologies they use. The key to effective implementation of universal accessibility lies in designing sites to serve the widest possible audience and the broadest possible range of hardware and software platforms, from adaptive technologies to emerging technologies.

In the past, the graceful degradation approach was used to ensure the widest possible audience was being served. The graceful degradation approach involves designing a Web site for one or more target configurations, then including functional but degraded support for other configurations. The graceful degradation approach works well when designing a basic template, but it can be problematic since it tends to limit the introduction of emerging technologies and enhanced interface options to ensure compatibility with adaptive technologies and other configurations.

As a result of these limitations, there has been a shift in recent years away from the graceful degradation approach towards the progressive enhancement approach for embedded multimedia and other Web page enhancements. The progressive enhancement approach involves designing Web content for the least capable configurations first, and then introducing a series of enhancements based on the capability of each client’s configuration. This approach is an improvement over graceful degradation because it encourages the introduction of emerging technologies and enhanced interface options without compromising the support for less capable configurations.

10.1 Display of title values for links with keyboard focus

For many years, browsers have included the ability to display the title value for links to improve both accessibility and usability. For most browsers, the display of the title value is triggered when a mouse pointer hovers over a link. Unfortunately the display is not triggered when a link gains keyboard focus resulting in the feature only being available to clients using a mouse.

This issue has been resolved by implementing a progressive enhancement-based JavaScript approach to display the title value when a link gains keyboard focus. This approach duplicates the title value display that is triggered when a mouse pointer hovers over a link. This feature was introduced in version 1.04 of the GC CLF template to enhance both accessibility and usability for clients that are not using a mouse.

10.2 PNG Alpha Transparency Support in Internet Explorer 5.5 and 6.0

Images with transparent sections are frequently used to seamlessly blend images with a wide range of backgrounds. The most widely supported image formats with transparency support are GIF and PNG. Although both formats include transparency support, the alpha transparency approach of the PNG format will result in far superior blending with a wide range of backgrounds than the limited binary transparency approach of the GIF format.

Browsers have included support for the PNG format for many years, but unfortunately Internet Explorer did not introduce alpha transparency support for the PNG format until version 7.0. Fortunately all other browsers that support the PNG format also support alpha transparency, and the alpha transparency support for PNG files can be enabled in Internet Explorer 5.5 and 6.0 using the AlphaImageLoader filter. The problem with the AlphaImageLoader filter is that it can be very complicated to use without compromising CLF compliance and browser support.

This issue has been resolved by implementing a progressive enhancement-based JavaScript approach to allow alpha transparency support in Internet Explorer 5.5 and 6.0 to be enabled for specific PNG files. This feature was introduced in version 1.03 of the GC CLF template to enhance the appearance of the banner leaf and to provide a CLF-compliant and browser-safe approach for enabling alpha transparency support for PNG files in Internet Explorer 5.5 and 6.0.

10.2.1 How to enable alpha transparency support for specific PNG files

The following are the steps for enabling alpha transparency support in Internet Explorer 5.5 and 6.0 for specific PNG files:

Use version 1.03 or later of the GC CLF template.
Create a GIF and PNG version of an image that includes transparent sections. The files must have the same file name except for the ".gif" and ".png" file extensions (for example, "lffl.gif" and "lffl.png").
Place the GIF and PNG versions of the image in the same directory.
Create an img element in the Web page with the path to the GIF version of the image for the src attribute value and "pngfix" for the class attribute value (for example, <img src="images/lffl.gif" class="pngfix" height="65" width="65" alt="..." />).
If the img element needs to reference a specific CSS class, then add the CSS class name and a space immediately before "pngfix" (for example, <img src="images/lffl.gif" class="lf pngfix" height="65" width="65" alt="..." />).

When the page loads, the progressive enhancement-based JavaScript approach will:

load the PNG version of the image for browsers with native alpha transparency support,
load the AlphaImageLoader filter to display the PNG version of the image with alpha transparency support for Internet Explorer 5.5 and 6.0,
load the GIF version of the image for all other browsers.

10.3 Multimedia player

The multimedia player was introduced in version 1.04 of the GC CLF template to provide a simple and easy to implement solution that would enable developers to deploy multimedia formats in an accessible manner. The player was designed to be compatible with a wide range of adaptive technologies and uses the progressive enhancement approach to ensure the player does not interfere with configurations that do not support the player. The player is scalable, includes closed captioning support, and can load several multimedia formats.

The multimedia player, although accessible, is only a component of a complete multimedia solution. A complete and accessible multimedia solution is comprised of transcripts, and additional captioned media formats (such as .wmv, .mov, and .mpeg). These additional formats ensure as wide an audience as possible is able to take advantage of a media-rich version.

10.3.1 Configuring the multimedia player script file

The GC CLF template includes a multimedia player script file named video.js which is located in the scripts directory. The loadMedia function must be configured by a webmaster to enable the player to be functional. Additional configured options are described in section 10.3.3 (FlashVars).

The following are the steps for configuring the loadMedia function in the video.js file:

Specify the path to the mp-jm.swf file for the "mediaplayerUrl" variable.

var mediaplayerUrl = "http://<url>/mp-jm.swf" ;
Specify the default language for the player for the "pLang" variable. The value in quotes must be "fra" for institutions headquartered in Quebec, and "eng" for institutions headquartered outside of Quebec.
var pLang = ( pLanguage ) ? pLanguage : "fra" ;
Specify the path to the image file for the "logo" variable. The image file will be displayed as a watermark in the bottom right corner of the player when audio files are being played. All image formats are supported but transparent PNG files are recommended.
var logo = "http://<url>wmms.png" ;

10.3.2 Implementing the multimedia player on a Web page

Once the multimedia script file has been configured by the webmaster, and the necessary template files have been installed, developers can implement the multimedia players on their pages with only a small number of changes.

The following are the steps for implementing the multimedia player solution on a Web page:

Use version 1.05 or later of the GC CLF template.
Create the following in either the content area or the right side menu of the Web page:
1. Create a div element with a unique value for the id attribute value (such as "mediacontainer"):
  <div id="mediacontainer"> ... </div>
2. Within the div element, create a link to the transcript and alternate formats, create a script element, and create a noscript element. The link must include a clear description of the target of the link for the title attribute value, the script element must include "text/javascript" for the type attribute value, and the noscript element should include "smallFont" for the noscript element.
  <div id="mediacontainer"> <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for ..."> ... </a> <script type="text/javascript"> ... </script> <noscript class="smallFont"> ... </noscript> </div>
3. Within the link, create an img element for the image that will be displayed if the player does not load. The img element must include an appropriate text equivalent for the alt attribute value.
  <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for ..."> <img src="images/wm-ms.gif" width="83" height="20" alt="Symbol of the Government of Canada" /> </a>
4. Within the script element, create the loadMedia function call, specify the containerId, file, captions, image, and lang parameters and optionally the playId, height, and width parameters. The containerId parameter must be the same as the value specified for the id attribute in step 3a (such as "mediacontainer") while the purpose of the remaining parameters is described in section 10.3.3.1 (Runtime configurable FlashVars).
  <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { loadMedia('mediacontainer', '<file>', '<captions>', '<image>', '<lang>'[, <playId>, <height>, <width>] ); }); //]]> </script>
5. Within the noscript element, create the text that will be displayed if the player does not load. The text should be wrapped with the p element.
  <noscript class="smallFont"> <p>In order to maximize the functionality of this page, please enable JavaScript.</p> </noscript>
6. The following is an example of the code that should be in the content area or the right side menu of the Web page:
  <div id="mediacontainer"> <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for TV Ad Traffic Jam"> <img src="images/wm-ms.gif" width="83" height="20" alt="Symbol of the Government of Canada" /> </a> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { loadMedia('mediacontainer', 'http://<url>/af-fr.flv', 'http://<url>/af-fr-eng.xml', 'http://<url>/af-fr.png', 'eng'); }); //]]> </script> <noscript class="smallFont"> <p>In order to maximize the functionality of this page, please enable JavaScript.</p> </noscript> </div>

10.3.3 FlashVars

FlashVars are configuration options that can be included in the loadMedia function of the ca.gc.mp-jm.js file to control the appearance and the behaviour of the player. FlashVars should only be configured by the webmaster using the following format:

so.addVariable("<FlashVar>", "<value>");
(for example, so.addVariable("enablejs","true");)

10.3.3.1 Runtime configurable FlashVars

Name	Values	Mandatory	Default	Description
`file`	<url>	Yes	n/a	Specifies the location of the file to play.
`captions`	<url>	Yes	n/a	Specifies the location of the xml-based captions file using the SMIL Timed Text format.
`image`	<url>	Yes	n/a	Specifies the image to display when playing MP3 or FLV files. This FlashVar can also be used to display a preview image for other formats. Supported formats are JPG, SWF, PNG, and GIF.
`lang`	`eng`, `fra`	Yes	n/a	Specifies the language of the player.
`playId`	<id>	No	`mediaplayer`	Specifies the `id` attribute value of the player.
`height`	<number>	No	`160`	Specifies the height of the player.
`width`	<number>	No	`195`	Specifies the width of the player.

10.3.3.2 Display FlashVars

Name	Values	Default	Description
`showicons`	`true`, `false`	`true`	Controls whether or not the play and activity icons are visible in the middle of the player display area.
`overstretch`	`true`, `false`,`fit`, `none`	`fit`	Controls how the images and videos should be stretched to fit the player display area. "`true`": Scale images and videos proportionately to fill the player display area. "`false`": Scale images and videos proportionately to fit the player display area. "`fit`": Scale images and videos disproportionately to exactly fit the height and width of the player display area. "`none`": Maintain the original dimensions of the images and videos.
`logo`	<url>	n/a	Specifies the location of the image file to be displayed as a watermark in the bottom right corner of the player display area. All image formats are supported but transparent PNG files are recommended.
`showeq`	`true`, `false`	`false` (`true` for MP3 files)	Controls whether or not an equalizer is included in the player display area. The equalizer is ideally suited for MP3 files.

10.3.3.3 Interaction FlashVars

Name	Values	Default	Description
`callback`	<url>	n/a	Specifies the location of a server side script (PHP/ASP) that can process call-backs. The player will send a call-back every time an item starts or stops, so this feature provides a means to record statistics.
`enablejs`	`true`, `false`	`false`	Controls whether or not JavaScript interaction is enabled. JavaScript interaction enables playback control, asynchronous loading of media files, and the monitoring of track information using JavaScript. Note: JavaScript interaction will only work when the player is run remotely.

10.3.3.4 Playback FlashVars

Name	Values	Default	Description
`autostart`	`true`, `false`	`false`	Controls whether or not the player automatically starts playing when the page loads.
`volume`	<number>	`80`	Controls the playback volume of media files.
`bufferlength`	<number>	`5`	Controls the number of seconds an FLV file should be buffered before playback begins. Smaller values should be used for fast connections and short videos while larger values should be used for slow connections.

10.4 Initiative link slideshow

The initiative link slideshow was introduced in version 1.04 of the GC CLF template to provide a visual enhancement that was designed to save valuable real estate by allowing multiple initiative link images to share the same location on the page. The slideshow combines an elegant design with accessible controls for an end result that is both visually pleasing and fully accessible.

The default behaviour of the slideshow is to rotate initiative link images automatically at a pre-defined speed. The slideshow includes controls that enable clients to stop/start the rotation and to manually rotate the initiative links. The slideshow also provides the ability to control how frequently specific initiative link images are displayed in comparison to the other initiative link images.

10.4.1 How to enable the initiative link slideshow

The following are the steps for enabling the initiative link slideshow:

Use version 1.04 or later of the GC CLF template.
Use initiative link images that are 195 pixels wide by 70 pixels high.
Include the "slideshow", "slideshowspeed" and "slideshowlib" parameters with appropriate quoted values for the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The value for "slideshow" must be "slideshow", the value for "slideshowspeed" must be the number of seconds that an initiative link image will be displayed, and the value for "slideshowlib" must be the path to the directory containing the required slideshow images. In version 1.05 or later of the GC CLF template, the value for "randomslide" must be "true" or "false".
var params = { lng:"eng", pngfix:"images/inv.gif", slideshow: "slideshow", slideshowspeed: "8", randomslide: true, slideshowlib: "images/sshw-mdiap" };
Create the following in the right side menu of the Web page:
1. Create a ul element with "nav" for the class attribute value and "slideshow" for the id attribute value:
  <li> <h2 class="nav">Features</h2> <ul class="nav" id="slideshow"> ...,br /> </ul> </li>
2. Within the ul element, create an li element with "menucontent" for the class attribute value for each initiative link. See section 10.4.3 (How to make specific initiative link images appear more frequently) for instructions on how to use the class attribute to control the frequency of specific initiative link images.
  <ul class="nav" id="slideshow"> <li class="menucontent"> ... </li> <li class="menucontent"> ... </li> </ul>
3. Within each li element, create two links separated by a br element. Both links must target the same location and must include title attribute values that are appropriate text equivalents for the initiative link image.
  
  The first link must include an img element with the path to the initiative link image for the src attribute value and an alt attribute value that is consistent with the title attribute value for the link. The second link must include "menulink" for the class attribute value.
  <li class="menucontent"> <a title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/"><img src="images/navy-marine-eng.jpg" alt="Experience the Navy - Canadian Forces Recruiting" width="195" height="70" /></a> <br /> <a class="menulink" title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/">Canadian Forces Recruiting</a> </li>
4. The following is an example of the code that should be in the right side menu of the Web page:
  <ul class="nav" id="slideshow"> <li class="menucontent"> <a title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/"><img src="images/navy-marine-eng.jpg" alt="Experience the Navy - Canadian Forces Recruiting" width="195" height="70" /></a> <br /> <a class="menulink" title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/">Canadian Forces Recruiting</a> </li> <li class="menucontent"> <a title="Budget 2007" href="/budget07/menu-eng.html"><img src="images/budget07-eng.jpg" alt="Budget 2007" width="195" height="70" /></a> <br /> <a class="menulink" title="Budget 2007" href="/budget07/menu-eng.html ">Budget 2007</a> </li> </ul>

10.4.2 How to change the slideshow speed

The slideshow speed is controlled using the "slideshowspeed" parameter in the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The "slideshowspeed" value represents the number of seconds that an initiative link image will be displayed. In other words, the lower the value, the faster the slideshow speed.

var params = { lng:"eng", pngfix:"images/inv.gif", slideshow: "slideshow", slideshowspeed: "8", slideshowlib: "images/sshw-mdiap", };

10.4.3 How to make specific initiative link images appear more frequently

The frequency that specific initiative link images appear in the slideshow can be controlled through the class attribute of the associated li element. To increase the frequency of a specific initiative link image, add a space to the class attribute value followed by one of the following keywords:

Keyword	Effect on the image	Example
`ss-double`	Appears twice as often in the slideshow.	`<li class="menucontent ss-double">`
`ss-triple`	Appears three times as often in the slideshow.	`<li class="menucontent ss-triple">`

10.4.4 How to display slides in a random order

The option to display slides in a random order was introduced in version 1.05 of the GC CLF template. This option is controlled using the "randomslide" parameter in the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The "randomslide" can be set to either "true" or "false" to enable or disable the display of slides in a a random order.

var params = { lng:"eng", pngfix:"images/inv.gif", slideshow: "slideshow", slideshowspeed: "8", randomslide: true, slideshowlib: "images/sshw-mdiap" };

10.5 jQuery plugin framework

The jQuery plugin framework was introduced in version 1.05 of the GC CLF template to enable Web sites to be more innovative and interactive. This new framework allows institutions to add new features and functionality on the fly. This innovative JavaScript-based approach enables GC Web sites to be both aesthetically pleasing and richly interactive without having to compromise on accessibility.

This new approach adopts the jQuery JavaScript framework to enable Web sites to take advantage of a wealth of interactive and innovative jQuery plugins while improving accessibility through progressive enhancement and built-in WAI-ARIA support. Even though this new approach enables Web sites to be more innovative and interactive, it is still the responsibility of institutions to ensure that accessibility requirements are being met when jQuery functionality or plugins are being used.

The following are the steps for implementing a jQuery plugin:

Ensure the plugin has an execute() method. This method is used by the template to execute the jQuery plugin.
Add the jQuery plugin to the /scripts/plug/ directory.
Add an import statement in the /scripts/req/init.js file after the "/** Execute Inits on Page Read **/" comment. The import statement must be structured as follows:
1. $.readyOrDone( <plugin_filename>.execute );

10.6 Solution for the IE 5.x/6.x content area collapsing issue

A solution that prevents extra-wide content in Internet Explorer from being pushed down to the vertical end of the side menu was introduced in version 1.05 of the GC CLF template. This solution is activated by adding the "ieoverflow" class to the element containing the extra-wide content.

The following are examples of how to activate the solution:

<img class="ieoverflow" src="img.gif" height="40" width="700" alt="…" />
<table class="tablecss ieoverflow" width="700" border="1">

11.0 Supported adaptive technologies

The GC CLF template was tested extensively using screen magnification software, screen reading software, voice-recognition software, alternate input and rate enhancement systems, text-based browsers, small-screen emulators and custom client configurations.

11.1 Screen magnification system

Screen magnification software allows clients to enlarge either the full screen or a portion of the screen. Screen magnification software also provides additional features such as colour inverting, font smoothing and pointer enhancements.

The template was successfully tested with the following screen magnification software:

IBM Home Page Reader 3.04
MAGic 6.2, 8.02, 9.5
PWWebSpeak 3.0r4
Lunar Screen Magnifier 6.0, 6.5, 7.0, 8.0
Supernova Reader Magnifier 6.0, 6.5, 7.0, 8.0
System Access (formerly FreedomBox) 2.0, 2.2
Web LV 3.03
ZoomText 7.11, 8.1, 9.0

11.2 Screen reading systems

Screen reading systems are used to render information through a synthesized voice output or a refreshable Braille display. Screen reading software is able to render both text displayed on the screen and any keystrokes entered on the keyboard

The template was successfully tested with the following screen reading systems:

Hal Screen Reader 6.0, 6.5, 7.0, 8.0
IBM Home Page Reader 3.04
JAWS for Windows 4.0, 4.51, 5.10, 6.0, 6.2, 7.0, 7.1, 8.0
PWWebSpeak 3.0r4
Supernova Reader Magnifier 6.0, 6.5, 7.0, 8.0
System Access (formerly FreedomBox) 2.0, 2.2
Web LV 3.03
Window-Eyes 4.0, 5.0, 5.5

11.3 Voice-recognition software

Voice-recognition software allows clients to perform tasks by using their voice to emulate keyboard and mouse commands.

The template was successfully tested with the following voice-recognition software:

Dragon Naturally Speaking Pro 7.1, 8.0, 9.0
FreedomBox 2.0, 2.2

11.4 Text-based browsers

Text-based browsers are often used by clients with visual impairments to display Web pages as text. Text-based browsers behave like screen reader software by rendering content in a linear fashion.

The template was successfully tested with the following text-based browsers:

Lynx 2.8.4
MacLynx b1

11.5 Small-screen emulators

Small-screen emulators are used to simulate the display of Web pages on small-screen devices such as mobile phones, personal digital assistants and other handheld devices.

The template was successfully tested with the following small-screen emulators:

Deckit-1.2.4 (mobile phone emulator)
Opera Small Screen rendering (handheld device emulator)

11.6 Custom client configurations

Clients can enhance accessibility by modifying the visual preferences in their browsers and operating systems. These custom client configurations can be used in combination with adaptive technologies to further enhance accessibility.

11.6.1 Internet Explorer 6.x custom client configurations

The custom client configurations listed in this section were used with all three Internet Explorer accessibility checkboxes selected.

11.6.1.1 Windows appearances

Customizing the default colour scheme and font size for an operating system can enhance the accessibility of both the operating system and software applications.

The template was successfully tested with the following Windows operating system schemes and font sizes:

Scheme	Font size
Low Contrast Low Luminosity	Normal
Low Contrast Mid Luminosity	Normal
High Contrast Black	Normal
High Contrast Black	Large
High Contrast Black	Extra Large
High Contrast White	Normal
High Contrast White	Large
High Contrast White	Extra Large
High Contrast Blue	Normal
Standard Aphont Readable Desktop	Normal
High Contrast Black Aphont Readable Desktop	Normal

11.6.1.2 Formatted with a custom style sheet

Many browsers provide clients the ability to format Web pages using a custom style sheet. Custom style sheets give clients control over the visual presentation of Web pages, allowing clients to enhance accessibility by modifying colours, font sizes, and other visual properties.

The template was successfully tested with the following custom style sheets:

V1.0 Ultra Small White
V1.0 Object Highlighting Standard
V1.0 Object Highlighting Black
V1.0 High Contrast Black Normal
V1.0 High Contrast Black Large
V1.0 High Contrast Black X-Large
V1.0 High Contrast Black 3X-Large
V1.0 High Contrast White Normal
V1.0 High Contrast White Large
V1.0 High Contrast White X-Large
V1.0 High Contrast White 3X-Large
V1.0 High Contrast Blue

11.6.2 Mozilla Firefox 1.5 custom client configurations

The template was successfully tested with the following Mozilla Firefox 1.5 custom client configurations:

Minimum font size: 10pt, 16pt, 18pt, 24pt
"allow pages to choose their own colors": unchecked
High Contrast Black Scheme

11.6.3 Excluded features

In order to ensure readability and backwards compatibility, the template was tested with several standard browser features excluded, both individually and in combination.

The template was successfully tested with the following features excluded, both individually and in combination:

Images
Tables
Blink
Frames
Font
Body (such as bgcolor, and link)
Center
Applet (Java)
Script (JavaScript)
Style Sheets (CSS)
Marquee

11.6.4 Keyboards and alternate input access devices

Not all clients are able to use conventional keyboard and mouse systems as input devices. Some clients are limited to using a keyboard because a mouse is not available or because the client is unable to use a mouse. Some clients may require alternate input access devices because they are unable to use conventional keyboards.

Full navigation of the template was successfully tested with the following keyboards and alternate input access devices:

Point & Click v1.x + Screen Doors v2 + Internet Explorer 6.x
MouseTool + v1.0 High Target Area (CSS)
Standard 101 AT keyboard + Internet Explorer 5.x
Standard 101 AT keyboard + Mozilla Firefox 1.5 + Accessibility extension

Top of Page

12.0 Supported browser/platform combinations

To ensure a high level of browser support, the template was tested extensively with a wide range of browser/platform combinations.

12.1 Summary

The template was tested successfully with 144 browser/platform combinations without any noticeable glitches being detected
The template was tested successfully with 8 browser/platform combinations with only small glitches being detected
The template did not display the required CLF layout and design with 23 browser/platform combinations, but the page content was still legible and accessible
The template was successfully tested with the following platforms:
- Windows (Win32)
- Mac OS X (10.x+)
- Mac PPC (8.x - 9.x)
The template was successfully tested with the following browser brands:
- Amaya
- AOL Explorer
- Avant
- Beonex
- Camino
- Chimera
- Crazy Browser
- DocZilla
- Firebird
- Firefox
- Flock
- Google Chrome
- Internet Explorer
- K-Meleon
- ManyOne
- Maxthon
- Mozilla
- MyIE2
- Netscape
- OmniWeb
- Opera
- Safari
- SeaMonkey
- SlimBrowser

12.2 Windows browser support

The template was tested extensively with browsers installed on Windows 2000 Service Pack 4 and Windows XP Pro Service Pack 2.

12.2.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Windows browser versions (78 in total) without any noticeable glitches being detected:

AOL Explorer 1.5
Avant Browser 9.02, 11.5
Beonex 0.6.4, 0.8.1
Crazy Browser 1.05, 2.01
DocZilla 1.0
Firebird 0.6.1, 0.7.1
Firefox 0.8, 0.9.1, 1.0, 1.0.8, 1.5.0.4, 2.0, 2.0.0.16, 3.01, 3.53
Flock 1.2.5
Google Chrome
Internet Explorer 5.0, 5.5, 6.02, 7.0, 8.0
K-Meleon 0.7, 0.8.2, 0.9.13, 1.02, 1.1.2, 1.1.4, 1.5
ManyOne Beta
Maxthon 1.6.3.80, 2.0.8.1720, 2.1.4.443
Mozilla 0.8, 0.9.2, 0.9.4, 1.0.1, 1.1, 1.2.1, 1.4, 1.5, 1.6, 1.7.3, 1.7.13
MyIE2 0.9.27.68
Netscape 6.2.3, 7.0, 7.1, 7.2, 8.1, 9.0
Opera 4.02, 5.12, 6.04, 7.02, 7.1, 7.23, 7.51, 7.54, 8.54, 9.0, 9.2, 9.26, 9.52, 10
Safari 3.0, 3.1.2, 4.0.3
SeaMonkey 1.1.2, 1.1.4, 1.1.8, 1.1.11
SlimBrowser 3.99, 4.10

12.2.2 Browsers tested with small display glitches

The template was tested successfully with the following Windows browser versions (3 in total) with only small glitches being detected:

Amaya 9.1, 10.0.1
Mozilla M16

12.2.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Windows browser versions (10 in total), but the page content was still legible and accessible:

Amaya 7.2a, 8.2
Netscape 3.04, 4.08, 4.51, 4.61, 4.72
WebTV Viewer 2.6
xSmiles 0.91, 1.1

12.3 Mac OS X browser support

The template was tested extensively with browsers installed on Macintosh OS X.

12.3.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Mac OS X browser versions (56 in total) without any noticeable glitches being detected:

Beonex 0.8.1
Camino 0.7, 0.8, 1.0.2, 1.5, 1.5.5, 1.6.3
Chimera 0.6
Firebird 0.6.1, 0.7.1
Firefox 0.8, 0.9.1, 1.0.8, 1.5.0.4, 2.0, 2.0.0.16, 3.0.1, 3.5.3
Flock 1.2.5
Internet Explorer 5.5
Mozilla 0.9.2, 1.0.2, 1.1, 1.2.1, 1.3, 1.4, 1.5.1, 1.6, 1.7, 1.7.13
Netscape 6.2.3, 7.02, 7.10, 8.1, 9.0
OmniWeb 4.5, 5.0b8, 5.1.3, 5.5.4
Opera 5.0, 6.0, 7.5.1, 8.54, 9.0, 9.2, 9.26, 9.52, 10
Safari 1.0 (v85), 3.0, 3.1.2, 4.0.3
SeaMonkey 1.1.2, 1.1.4, 1.1.8, 1.1.11

12.3.2 Browsers tested with small display glitches

The template was tested successfully with the following Mac OS X browser versions (3 in total) with only small glitches being detected:

Amaya 10.0.1
Internet Explorer 5.1.3, 5.2.2

12.3.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Mac OS X browser versions (3 in total), but the page content was still legible and accessible:

Netscape 4.77, 4.8
xSmiles 0.9.1

12.4 Mac PPC browser support

The template was tested extensively with browsers installed on Macintosh OS 9.1.

12.4.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Mac PPC browser versions (10 in total) without any noticeable glitches being detected:

Internet Explorer 5.5
Mozilla 0.8, 0.9.2, 1.0.2, 1.1, 1.2.1
Netscape 6.2.3, 7.02
Opera 5.0, 6.0

12.4.2 Browsers tested with small display glitches

The template was tested successfully with the following Mac PPC browser versions (2 in total) with only small glitches being detected:

Internet Explorer 5.0, 5.1.6

12.4.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Mac PPC browser versions (10 in total), but the page content was still legible and accessible:

Internet Explorer 2.1, 3.01
Netscape 3.04, 4.04, 4.08, 4.51, 4.61, 4.7, 4.75, 4.8

Top of Page

13.0 Known Issues

13.1 Width limitations for content area objects in Internet Explorer

Properties such as borders, margins and padding tend to affect the width of objects in Internet Explorer differently than most other browsers. Internet Explorer will include more of these properties in the width calculation than the other browsers, resulting in a larger effective object width. As a result, an object that has the width specified as 300 pixels may have an effective width of 305 pixels in Internet Explorer. The same applies to a width of 100%, where the effective width may be 102% in Internet Explorer.

Combine this width issue with Internet Explorer handling the overflowing of content differently than other browsers, and this results in a minor display issue with the template. If the width of the content area is exceeded by the effective width of an object in either the two-column or three-column templates, the object and all content following it will be pushed down to the vertical end of the side menu.

Note: A solution that prevents the extra-wide content from being pushed down to the vertical end of the side menu was introduced in version 1.05 of the GC CLF template. Refer to section 10.6 (Solution for the IE 5.x/6.x content area collapsing issue) for more details.

This is not a serious problem, just a display issue on Internet Explorer. There is no known fix for this problem other than using the one-column template or avoiding the situation where the effective width of an object exceeds the width of the content area.

This issue does not occur with tables that have a specified width of 100%, as long as the padding and margin values for the table are not changed and the physical width of the contained text can fit within the content area.

Note: The one-column template should be used only if the content is too wide to fit in the two-column template and not because the width of an object was set at too high a value. The content being too large for the content area should occur only with wide tables and images.

To avoid the situation where the effective width of an object exceeds the width of the content area, respect the following two-column and three-column template content area limitations when specifying the widths of objects:

**Width limitations for content area objects in Internet Explorer**
Template	Maximum object percentage width (%)	Maximum object pixel width (px)
Two-column (`2col*.html`)	98.5% (same as `widthFull` CSS class)	593 pixels
Three-column (`3col*.html`)	98.5% (same as `widthFull` CSS class)	388 pixels

Note: The above width limitations are for an object with no padding or margin values specified and a border that is no more than 1 pixel in width. Any further increase in the padding, margin or border values may reduce the width limitation even further.

It is recommended that only relative (percentage) width values be used for objects to ensure compatibility with the content area becoming expandable in the future.

13.2 Alignment of footer elements in Internet Explorer 5.x for Mac

Unlike all other browsers, the Date Modified, Top of Page and Important Notices footer elements are not aligned properly in Internet Explorer 5.x for Mac. The three footer elements are too wide to fit on the same line, resulting in the three elements being stacked vertically.

13.3 Top of Page links in Internet Explorer 5.x for Mac

Unlike all other browsers, the Top of Page content area link is too wide in Internet Explorer 5.x for Mac to float to the right of any text. The end result is that the link will fill an entire line, pushing all the text that follows it to the next line. The normal behaviour for the Top of Page content area link is to float to the right of any text that follows it.

13.4 Top of Page links in Opera 4.x, 5.x and 6.x (three-column template only)

Unlike other browsers, when the Top of Page content area link is used with the three-column template in Opera 4.x, 5.x and 6.x, the link will display with a reduced right margin and padding until the vertical end of the right side menu. This results in the link being positioned immediately to the left of the right side menu, overlapping the content area border. The normal margin and padding for the link will resume once beyond the vertical end of the right side menu.

13.5 Common menu bar display glitches in Amaya 9.1, Amaya 10.0.1, and Mozilla M16 for Windows

Unlike other browsers, the common menu bar is not displayed according to specification in Amaya 9.1 and Mozilla M16 for Windows. The common menu bar in Amaya 9.1 is several pixels too high, and there are numerous display glitches in the common bar on Mozilla M16 for Windows.

13.6 Excessive padding below the Welcome Page language links on Opera 8.54

The padding below the Welcome Page language links in Opera 8.54 is approximately 20 pixels greater than allowed by the CLF standards. This is the result of a height calculation issue related to floated elements in Opera 8.54.

13.7 Alignment of Welcome Page language link text in Internet Explorer 5.x for Mac

The Welcome Page language link text is not properly aligned in Internet Explorer 5.x for Mac. The text should be centre aligned but it is instead left aligned. This is the result of an alignment calculation issue related to floated objects in Internet Explorer 5.x for Mac.

13.8 Scaling issues for elements using em units in Netscape 6.x

Unlike other browsers, non-text elements whose dimensions are specified using em units do not scale with the text in Netscape 6.x. This prevents the scaling of non-text template elements such as the stylized leaf, the common menu bar, the breadcrumb area, the top of page arrow, the banner, and the side menu. This can lead to text exceeding the dimensions of containers and overlapping other elements at larger text sizes.

13.9 Font size issues with nested lists in Opera 6.x for Windows

Unlike other browsers, the inheritance of font sizes for nested lists is handled incorrectly in Opera 6.x for Windows. This inheritance issue causes a significant reduction in text size for each nested list level with the text eventually becoming unreadable.

13.10 Skip navigation links may interfere with the display of other header elements in Opera 6.x, 7.x, 8.x, and Internet Explorer

Unlike other browsers, the skip navigation links may interfere with the display of other header elements in Opera 6.x, 7.x, 8.x, and Internet Explorer when JavaScript is disabled because of a z-index support issue. This can be prevented by changing the width and the starting position of the skip navigation links container to ensure the container does not overlap the other header elements. Instructions can be found in section 6.3.2.17 (Changing the width and the starting position of the skip navigation links container).

14.0 Template version history

Version 1.05 – 2009-12-07

Summary of changes

Integrated the jQuery JavaScript library and enabled support for jQuery plugins
Added progressive enhancement and jQuery support to Welcome Pages
Added a random slides feature for the initiative link slideshow
Added a solution for the IE 5.x/6.x content area collapsing issue
Extended PNG alpha transparency fix for Internet Explorer 5.x/6.x to PNG background images
Updated the common menu bar "canada.gc.ca" links with the new Canada site main page URLs.
Added lang and xml:lang attributes to the "dc.description", "description", "keywords", "dc.creator", "dc.title", and "dc.subject" metadata elements in the bilingual and multilingual Welcome Page templates.
Removed the CSS controlling the visual appearance of the "blockquote" element.
Corrected the .navaid class to allow the page to scroll to the top of the top of the left side menu when the "Skip to institutional links" link is selected. This correction also allows the page to scroll to any other anchors that are hidden using the .navaid class.
Corrected the lang and xml:lang values for the "Avertissement" links in the unilingual English templates.
Corrected a two column template padding issue with the content area in Internet Explorer 5.x and 6.x.
Corrected a display issue in Firefox where the arrows in the standard top of page links were being underlined.
Implemented hover/active/focus colours for all links in the content page (excluding the common menu bar links).
Expanded the selectable area of the top of page links, the Important Notices link, and the side menu links.
Disabled the automatic display of quotation marks for the q element in non-Internet Explorer browsers to ensure all browsers render the q element consistently.
Added the menulinkdefault class for forcing a link to be the full width of the parent container (when the class is applied to an a element).
Added the font-size utility classes to the Welcome Page CSS files.
Added all utility classes in section 8.0 (Utility CSS classes defined by the template) to the Welcome Page CSS files (except for ".headline", ".menulinkdefault", and ".navaid").
Improved the width and bottom margins for the Accessible initiative link solution.
Corrected the widths of the common menu bar buttons at the default text size.
Corrected the height and width of the Top of Page image at the default text size.
Corrected compliance issues with the display of the Welcome Page buttons.
Corrected potential contrast issues with the ".red" and ".redBG" utility colour classes.
Corrected z-index issues with tooltips in IE 6/7.
Corrected display issues related to enabling alpha transparency support for PNG files.

Updated files

base.css
2col.css
base-institution.css
wp-pa.css
wp-pa2.css
pf-if.css
tphp.gif
scripts\jquery.min.js (new)
scripts\swfobject.js (new)
scripts\video.js (new)
scripts\pe-ap.js
scripts\plug\jquery.mp-jm.js (formerly scripts\ca.gc.mp-jm.js)
scripts\plug\ss-md.js (formerly scripts\ca.gc.sshw-mdiap.js)
scripts\req\init.js (new)
scripts\req\patches-retouches.js (new)
*.html

How to update Web pages based on version 1.04 of the template

Replace base.css with the updated version of the file
Replace 2col.css with the updated version of the file
Migrate previous base-institution.css changes to the updated version of the file
Replace base-institutio.css with the updated version of the file
Replace wp-pa.css with the updated version of the file
Replace wp-pa2.css with the updated version of the file
Replace pf-if.css with the updated version of the file
Replace tphp.gif with the updated version of the file. If the design of tphp.gif was previously modified, then duplicate at a minimum the image height, the image width, and the bottom four rows of pixels (non-transparent pixel colours can be changed).
Add jquery.min.js to your scripts directory
Add swfobject.js to your scripts directory
Add video.js to your scripts directory
Add plug\jquery.mp-jm.js to your scripts directory
Add plug\ss-md.js to your scripts directory
Remove ca.gc.mp-jm.js from your scripts directory
Remove ca.gc.sshw-mdiap.js from your scripts directory
Add req\init.js to your scripts directory
Add req\patches-retouches.js to your scripts directory
Replace pe-ap.js with the updated version of the file then modify all file paths within the the file so they correctly refer to the other script files.
Follow the updated instructions for the multimedia player in sections 10.3.1 (Configuring the multimedia player script file) and 10.3.2 (Implementing the multimedia player on a Web page).
Add the following code after "" for all English content pages:
<script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/video.js" type="text/javascript"></script>
Add the following code after "" for all French content pages:
<script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/video.js" type="text/javascript"></script>
Add the following code after "" to all unilingual English, bilingual, and multilingual Welcome Pages for institutions headquartered outside of Quebec:
 <script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/video.js" type="text/javascript"></script> <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"eng", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Add the following code after "" to all unilingual French, bilingual, and multilingual Welcome Pages for institutions headquartered inside of Quebec:
 <script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/video.js" type="text/javascript"></script> <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"fra", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Add "lang="en" xml:lang="en"" to the English "dc.description", "description", "keywords", "dc.creator", "dc.title", and "dc.subject" metadata elements in all bilingual and multilingual Welcome Pages.
Add "lang="fr" xml:lang="fr"" to the French "dc.description", "description", "keywords", "dc.creator", "dc.title", and "dc.subject" metadata elements in all bilingual and multilingual Welcome Pages.
Perform the following global search and replace operations (excluding quotes) for all unilingual English pages using the template:
1. Replace "lang="en" xml:lang="en" title="Avertissement" with "lang="fr" xml:lang="fr" title="Avertissement"
Perform the following global search and replace operations (excluding quotes) for all HTML files using the template content pages:
1. Replace "http://www.canada.gc.ca/main_e.html" with "http://www.canada.gc.ca/home.html"
2. Replace "http://www.canada.gc.ca/main_f.html" with "http://www.canada.gc.ca/accueil.html"
Perform the following global search and replace operation (excluding quotes) for all HTML files using the template:
1. Replace "VERSION 1.04" with "VERSION 1.05"

Changes in detail

Replaced scripts\ca.gc.mp-jm.js with scripts\plug\jquery.mp-jm.js
Replaced scripts\ca.gc.sshw-mdiap.js with scripts\plug\ss-md.js
Removed code in scripts\pe-ap.js that duplicates jQuery functionality
Added scripts\jquery.min.js
Added scripts\req\init.js
Added scripts\req\patches.js
Changed the class "div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited" with properties "background-color: #696;", "color: #FFF;", and "text-decoration: none;" to "h2.nav, h2.nav a:link, h2.nav a:visited, div.h2nav, div.h2nav a:link, div.h2nav a:visited, p.h2nav, p.h2nav a:link, p.h2nav a:visited" with properties "background-color: #363;" and "color: #FFF;" in base-institution.css
Changed the class "div.left h2.nav a:hover, div.left h2.nav a:active, div.left h2.nav a:focus, div.left div.h2nav a:hover, div.left div.h2nav a:active, div.left div.h2nav a:focus, div.left p.h2nav a:hover, div.left p.h2nav a:active, div.left p.h2nav a:focus, div.right h2.nav a:hover, div.right h2.nav a:active, div.right h2.nav a:focus, div.right div.h2nav a:hover, div.right div.h2nav a:active, div.right div.h2nav a:focus, div.right p.h2nav a:hover, div.right p.h2nav a:active, div.right p.h2nav a:focus" with the property "text-decoration: underline" to "h2.nav a:hover, h2.nav a:active, h2.nav a:focus, div.h2nav a:hover, div.h2nav a:active, div.h2nav a:focus, p.h2nav a:hover, p.h2nav a:active, p.h2nav a:focus" with properties "text-decoration: underline;" and "color: #C00;" in base-institution.css
Changed the class "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a:link.menulink, div.left a:visited.menulink" in base-institution.css
Changed the class "div.right li.menucontent, div.right div.menucontent" to "div.right li.menucontent, div.right div.menucontent, div.right a:link.menulink, div.right a:visited.menulink" in base-institution.css
Changed the class "div.footer a:link, div.footer a:visited, div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited" to "p.breadcrumb a:link, p.breadcrumb a:visited, div.footer a:link, div.footer a:visited, div.topPage a:link, div.topPage a:visited, p.topPage a:link, p.topPage a:visited" in base-institution.css
Changed the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot1 a, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf-if.css.
Changed the property "color: #FF0000;" to "color: #CC0000;" in the class ".red" of base.css
Changed the property "background-color: #FF0000;" to "background-color: #CC0000;" in the class ".redBG" of base.css
Changed the properties "height: 0;", "width: 0;", and "top: -100px;" to "height: 1px;", "width: 1px;", and "left: -100px;" in the class "div.navaid, p.navaid, h1.navaid, h2.navaid, .navaid" of base.css
Changed the properties "width: 1.46em;" and "height: 0.92em;" to "width: 1.48em;", "height: 0.94em;", "position: relative;", "top: 0.21em;", "margin-left: -1px;", and "margin-right: -1px;" in the class "div.foot2 img, div.topPage img, p.topPage img" of base.css
Changed the property "width: 16.6%;" to "width: 16.7%;" in the class "li.fiptext" of base.css.
Changed the property "width: 16.7%;" to "width: 16.6%;" in the class "li.fiptexta" of base.css.
Changed the property "width: 16.2%;" to "width: 16.6%;" in the class "li.fiptextb" of base.css.
Changed the property "width: 16.8%;" to "width: 16.7%;" in the class "li.fiptextc" of base.css.
Changed the property "padding-right: 20px;" to "padding-right: 10px;" in the class "* html div.center" of 2col.css
Changed the property "top: -100px;" to "left: -100px;" in the class "div.msgarea h1.hidden, div.msgareaalt h1.hidden" of wp-pa.css
Changed the property "padding: 0.19em;" to "padding: 0.13em;" in the class "div.langbtn, div.mllangbtn" of wp-pa.css
Changed "http://www.canada.gc.ca/main_e.html" to "http://www.canada.gc.ca/home.html" of *.html
Changed "http://www.canada.gc.ca/main_f.html" to "http://www.canada.gc.ca/accueil.html" of *.html
Changed "lang="en" xml:lang="en" title="Avertissement" to "lang="fr" xml:lang="fr" title="Avertissement" in 1col-ul-eng.html and 2col-ul-eng.html
Changed "VERSION 1.04" to "VERSION 1.05" in *.*
Removed the class "blockquote" from base.css
Removed the class "a.menulink" from base.css
Removed the class "a.menulink:hover" from base.css
Removed the class "div.right a.menulink" from base-institution.css
Added the class "h2.nav a, div.h2nav a, p.h2nav a, div.left a.menulink, div.right a.menulink, div.left a.menulinkdefault, div.right a.menulinkdefault" with properties "display: block;" and "width: 99.5%;" to base.css
Added the class "div.foot2, div.topPage, p.topPage" with the property "line-height: 140%;" to base.css
Added the class "* html div.foot2 img, * html div.topPage img, * html p.topPage img" with properties "position: static;" and "line-height: inherit;" to base.css
Added the class "*:first-child+html div.foot2 img, *:first-child+html div.topPage img, *:first-child+html p.topPage img" with properties "position: static;" and "line-height: inherit;" to base.css
Added the class "div.foot2 a, div.foot3 a, div.topPage a, p.topPage a" with the property "display: block;" to base.css
Added the class "div.foot2 a, div.foot3 a" with the property "width: 99.5%;" to base.css
Added the class "div.foot3 a" with the property "padding-bottom: 20px;" to base.css
Added the class "div.right div.gcinit div" with the properties "width: 193px;" and "margin-bottom: 8px;" to base.css
Added the class "q:before, q:after" with the property "content: "";" to base.css
Added the class "h2.nav a:link, h2.nav a:visited, div.h2nav a:link, div.h2nav a:visited, p.h2nav a:link, p.h2nav a:visited" with the property "text-decoration: none;" to base-institution.css
Added the class "h2.nav a[name]:hover, h2.nav a[name]:active, h2.nav a[name]:focus, div.h2nav a[name]:hover, div.h2nav a[name]:active, div.h2nav a[name]:focus, p.h2nav a[name]:hover, p.h2nav a[name]:active, p.h2nav a[name]:focus" with the property "color: inherit;" to base-institution.css
Added the class "div.left a:hover, div.left a:active, div.left a:focus, div.right a:hover, div.right a:active, div.right a:focus" with the property "color: #C00;" to base-institution.css
Added the class "div.left a[name]:hover, div.left a[name]:active, div.left a[name]:focus, div.right a[name]:hover, div.right a[name]:active, div.right a[name]:focus" with the property "color: inherit;" to base-institution.css
Added the class "div.left a:link.menulink, div.left a:visited.menulink" with the property "text-decoration: none;" to base-institution.css
Added the class "div.left a:hover.menulink, div.left a:active.menulink, div.left a:focus.menulink" with properties "text-decoration: underline;" and "color: #C00;" to base-institution.css
Added the class "div.right a:link.menulink, div.right a:visited.menulink" with the property "text-decoration: none;" to base-institution.css
Added the class "div.right a:hover.menulink, div.right a:active.menulink, div.right a:focus.menulink" with properties "text-decoration: underline;" and "color: #C00;" to base-institution.css
Added the class "p.breadcrumb a:hover, p.breadcrumb a:active, p.breadcrumb a:focus, div.footer a:hover, div.footer a:active, div.footer a:focus, div.topPage a:hover, div.topPage a:active, div.topPage a:focus, p.topPage a:hover, p.topPage a:active, p.topPage a:focus" with the property "color: #C00;" to base-institution.css
Added the class "div.center a:hover, div.center a:active, div.center a:focus" with the property "color: #C00;" to base-institution.css
Added the class "div.center a[name]:hover, div.center a[name]:active, div.center a[name]:focus" with the property "color: inherit;" to base-institution.css
Added the class ".fontSize200" with the property "font-size: 200%;" to wp-pa2.css
Added the class ".fontSize195" with the property "font-size: 195%;" to wp-pa2.css
Added the class ".fontSize190" with the property "font-size: 190%;" to wp-pa2.css
Added the class ".fontSize185" with the property "font-size: 185%;" to wp-pa2.css
Added the class ".fontSize180" with the property "font-size: 180%;" to wp-pa2.css
Added the class ".fontSize175" with the property "font-size: 175%;" to wp-pa2.css
Added the class ".fontSize170" with the property "font-size: 170%;" to wp-pa2.css
Added the class ".fontSize165" with the property "font-size: 165%;" to wp-pa2.css
Added the class ".h1Size, .fontSize160" with the property "font-size: 160%;" to wp-pa2.css
Added the class ".fontSize155" with the property "font-size: 155%;" to wp-pa2.css
Added the class ".h2Size, .fontSize150" with the property "font-size: 150%;" to wp-pa2.css
Added the class ".fontSize145" with the property "font-size: 145%;" to wp-pa2.css
Added the class ".h3Size, .big, .fontSize140" with the property "font-size: 140%;" to wp-pa2.css
Added the class ".fontSize135" with the property "font-size: 135%;" to wp-pa2.css
Added the class ".h4Size, fontSize130" with the property "font-size: 130%;" to wp-pa2.css
Added the class ".fontSize125" with the property "font-size: 125%;" to wp-pa2.css
Added the class ".h5Size, .fontSize120" with the property "font-size: 120%;" to wp-pa2.css
Added the class ".fontSize115" with the property "font-size: 115%;" to wp-pa2.css
Added the class ".h6Size, fontSize110" with the property "font-size: 110%;" to wp-pa2.css
Added the class ".fontSize105" with the property "font-size: 105%;" to wp-pa2.css
Added the class ".fontSize100" with the property "font-size: 100%;" to wp-pa2.css
Added the class ".fontSize95" with the property "font-size: 95%;" to wp-pa2.css
Added the class ".fontSize90" with the property "font-size: 90%;" to wp-pa2.css
Added the class ".mediumFont, fontSize85" with the property "font-size: 85%;" to wp-pa2.css
Added the class ".fontSize80" with the property "font-size: 80%;" to wp-pa2.css
Added the class ".smallFont, fontSize75" with the property "font-size: 75%;" to wp-pa2.css
Added the class ".fontSize70" with the property "font-size: 70%;" to wp-pa2.css
Added the class ".doubleLineSpace" with the property "line-height: 200%;" to wp-pa2.css
Added the class ".fontSize200" with the property "font-size: 20.0pt;" to wp-pa.css
Added the class ".fontSize195" with the property "font-size: 19.5pt;" to wp-pa.css
Added the class ".fontSize190" with the property "font-size: 19.0pt;" to wp-pa.css
Added the class ".fontSize185" with the property "font-size: 18.0pt;" to wp-pa.css
Added the class ".fontSize180" with the property "font-size: 17.5pt;" to wp-pa.css
Added the class ".fontSize175" with the property "font-size: 17.0pt;" to wp-pa.css
Added the class ".fontSize170" with the property "font-size: 16.5pt;" to wp-pa.css
Added the class ".fontSize165" with the property "font-size: 16.0pt;" to wp-pa.css
Added the class ".h1Size, .fontSize160" with the property "font-size: 15.0pt;" to wp-pa.css
Added the class ".fontSize155" with the property "font-size: 14.5pt;" to wp-pa.css
Added the class ".h2Size, .fontSize150" with the property "font-size: 14.0pt;" to wp-pa.css
Added the class ".fontSize145" with the property "font-size: 13.5pt;" to wp-pa.css
Added the class ".h3Size, .big, .fontSize140" with the property "font-size: 13.5pt;" to wp-pa.css
Added the class ".fontSize135" with the property "font-size: 13.0pt;" to wp-pa.css
Added the class ".h4Size, fontSize130" with the property "font-size: 13.0pt;" to wp-pa.css
Added the class ".fontSize125" with the property "font-size: 12.0pt;" to wp-pa.css
Added the class ".h5Size, .fontSize120" with the property "font-size: 11.5pt;" to wp-pa.css
Added the class ".fontSize115" with the property "font-size: 11.0pt;" to wp-pa.css
Added the class ".h6Size, fontSize110" with the property "font-size: 10.5pt;" to wp-pa.css
Added the class ".fontSize105" with the property "font-size: 10.0pt;" to wp-pa.css
Added the class ".fontSize100" with the property "font-size: 10.0pt;" to wp-pa.css
Added the class ".fontSize95" with the property "font-size: 9.5pt;" to wp-pa.css
Added the class ".fontSize90" with the property "font-size: 9.0pt;" to wp-pa.css
Added the class ".mediumFont, fontSize85" with the property "font-size: 8.5pt;" to wp-pa.css
Added the class ".fontSize80" with the property "font-size: 8.0pt;" to wp-pa.css
Added the class ".smallFont, fontSize75" with the property "font-size: 7.5pt;" to wp-pa.css
Added the class ".fontSize70" with the property "font-size: 7.0pt;" to wp-pa.css
Added the class "h1.compress, h2.compress, h3.compress, h4.compress, h5.compress, h6.compress, p.compress, ul.compress, ol.compress" with properties "margin-top: 0px;" and "margin-bottom: 0px;" to wp-pa.css
Added the class ".widthFull" with the property "width: 98.5%;" to wp-pa.css
Added the class ".width95" with the property "width: 95%;" to wp-pa.css
Added the class ".width90" with the property "width: 90%;" to wp-pa.css
Added the class ".width85" with the property "width: 85%;" to wp-pa.css
Added the class ".width80" with the property "width: 80%;" to wp-pa.css
Added the class ".width75" with the property "width: 75%;" to wp-pa.css
Added the class ".width70" with the property "width: 70%;" to wp-pa.css
Added the class ".width65" with the property "width: 65%;" to wp-pa.css
Added the class ".width60" with the property "width: 60%;" to wp-pa.css
Added the class ".width55" with the property "width: 55%;" to wp-pa.css
Added the class ".width50" with the property "width: 50%;" to wp-pa.css
Added the class ".width45" with the property "width: 45%;" to wp-pa.css
Added the class ".width40" with the property "width: 40%;" to wp-pa.css
Added the class ".width35" with the property "width: 35%;" to wp-pa.css
Added the class ".width30" with the property "width: 30%;" to wp-pa.css
Added the class ".width25" with the property "width: 25%;" to wp-pa.css
Added the class ".width20" with the property "width: 20%;" to wp-pa.css
Added the class ".width15" with the property "width: 15%;" to wp-pa.css
Added the class ".width10" with the property "width: 10%;" to wp-pa.css
Added the class ".width5" with the property "width: 5%;" to wp-pa.css
Added the class "abbr, acronym, span.abbr" with the property "cursor: help;" to wp-pa.css
Added the class ".alignRight" with the property "text-align: right;" to wp-pa.css
Added the class ".alignCenter" with the property "text-align: center;" to wp-pa.css
Added the class ".alignLeft" with the property "text-align: left;" to wp-pa.css
Added the class ".alignTop" with the property "vertical-align: top;" to wp-pa.css
Added the class ".alignBottom" with the property "vertical-align: bottom;" to wp-pa.css
Added the class ".alignTopRight" with properties "text-align: right;" and "vertical-align: top;" to wp-pa.css
Added the class ".alignTopCenter" with properties "text-align: center;" and "vertical-align: top;" to wp-pa.css
Added the class ".alignTopLeft" with properties "text-align: left;" and "vertical-align: top;" to wp-pa.css
Added the class ".alignBottomRight" with properties "text-align: right;" and "vertical-align: bottom; " to wp-pa.css
Added the class ".alignBottomCenter" with properties "text-align: center;" and "vertical-align: bottom;" to wp-pa.css
Added the class ".alignBottomLeft" with properties "text-align: left;" and "vertical-align: bottom;" to wp-pa.css
Added the class ".floatRight" with the property "float: right;" to wp-pa.css
Added the class ".floatLeft" with the property "float: left;" to wp-pa.css
Added the class ".image-left" with properties "float: left;" and "vertical-align: text-top;" to wp-pa.css
Added the class ".image-right" with properties "float: right;", "vertical-align: text-top;", and "margin-left: 10px;" to wp-pa.css
Added the class ".indent1" with the property "padding-left: 18px;" to wp-pa.css
Added the class ".indent2" with the property "padding-left: 36px;" to wp-pa.css
Added the class ".indent3" with the property "padding-left: 54px;" to wp-pa.css
Added the class ".indent4" with the property "padding-left: 72px;" to wp-pa.css
Added the class ".indent5" with the property "padding-left: 90px;" to wp-pa.css
Added the class "ul.noBullet" with the property "list-style-type: none;" to wp-pa.css
Added the class "ul.disc" with the property "list-style-type: disc;" to wp-pa.css
Added the class "ul.square" with the property "list-style-type: square;" to wp-pa.css
Added the class "ul.circle" with the property "list-style-type: circle;" to wp-pa.css
Added the class "ol.lower-alpha" with the property "list-style-type: lower-alpha;" to wp-pa.css
Added the class "ol.upper-alpha" with the property "list-style-type: upper-alpha;" to wp-pa.css
Added the class "ol.lower-roman" with the property "list-style-type: lower-roman;" to wp-pa.css
Added the class "ol.upper-roman" with the property "list-style-type: upper-roman;" to wp-pa.css
Added the class ".noWrap" with the property "white-space: nowrap;" to wp-pa.css
Added the class ".doubleLineSpace" with the property "line-height: 24.0pt;" to wp-pa.css
Added the class ".uppercase" with the property "text-transform: uppercase;" to wp-pa.css
Added the class ".lowercase" with the property "text-transform: lowercase;" to wp-pa.css
Added the class ".black" with properties "color: #000000;" and "background-color: transparent;" to wp-pa.css
Added the class ".white" with properties "color: #FFFFFF;" and "background-color: transparent;" to wp-pa.css
Added the class ".red" with properties "color: #CC0000;" and "background-color: transparent;" to wp-pa.css
Added the class ".blue" with properties "color: #0000FF;" and "background-color: transparent;" to wp-pa.css
Added the class ".green" with properties "color: #009933;" and "background-color: transparent;" to wp-pa.css
Added the class ".grey" with properties "color: #999999;" and "background-color: transparent;" to wp-pa.css
Added the class ".deepyellow" with properties "color: #FFCC33;" and "background-color: transparent;" to wp-pa.css
Added the class ".blackBG" with the property "background-color: #000000;" to wp-pa.css
Added the class ".whiteBG" with the property "background-color: #FFFFFF;" to wp-pa.css
Added the class ".redBG" with the property "background-color: #CC0000;" to wp-pa.css
Added the class ".blueBG" with the property "background-color: #0000FF;" to wp-pa.css
Added the class ".greenBG" with the property "background-color: #009933;" to wp-pa.css
Added the class ".lightgreyBG" with the property "background-color: #CCCCCC;" to wp-pa.css
Added the class ".deepyellowBG" with the property "background-color: #FFCC33;" to wp-pa.css
Added the class "div.highlight, p.highlight" with properties "border: 1px solid #030;", "background-color: #9F9;" and "padding: 5px;" to wp-pa.css
Added the class "div.wrapContainer" with properties "float: left;" and "width: 100%;" to wp-pa.css
Added the class "div.langbtn, div.mllangbtn" with the property "font-size: 120%;" to wp-pa2.css
Added the class "div.foot1" with the property "width: auto;" to pf-if.css
Added the property "left: auto;" to the class "div.page div.core div.navaid" in base.css
Added the property "z-index: 21000;" to the class "div.tooltip" in base.css
Added the property "display: block;" to the class "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
Added the properties "font-family: "times new roman", sans-serif;" and "font-size: 14pt;" to the class "div.langbtn, div.mllangbtn" in wp-pa.css
Added the following code after "" in *col*-eng.html:
<script src="scripts/jquery.min.js" type="text/javascript"></script>
Added the following code after "" in *col*-fra.html:
<script src="scripts/jquery.min.js" type="text/javascript"></script>
Added the following code after "" in wp-pa.html, wp-pa-alt.html, wp-pa-ctoam.html, wp-pa*-ml.html and wp-pa*-eng.html:
 <script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/video.js" type="text/javascript"></script> <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"eng", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Added the following code after "" in wp-pa-quebec.html, wp-pa-alt-quebec.html, wp-pa-quebec-ctoam.html, wp-pa-ml-quebec-ctoam.html, wp-pa-ml-quebec.html and wp-pa*-fra.html:
 <script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/video.js" type="text/javascript"></script> <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"fra", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Added "lang="en" xml:lang="en"" to the English "dc.description", "description", "keywords", "dc.creator", "dc.title", and "dc.subject" metadata elements in wp-pa.html, wp-pa-alt.html, wp-pa-alt-quebec.html, wp-pa-quebec.html, wp-pa-ctoam.html, wp-pa-quebec-ctoam.html, and wp-pa*ml*.html.
Added "lang="fr" xml:lang="fr"" to the French "dc.description", "description", "keywords", "dc.creator", "dc.title", and "dc.subject" metadata elements in wp-pa.html, wp-pa-alt.html, wp-pa-alt-quebec.html, wp-pa-quebec.html, wp-pa-ctoam.html, wp-pa-quebec-ctoam.html, and wp-pa*ml*.html.
Replaced "$("img.pngfix").attr("src", ($("img.pngfix").attr("src").substring(0, $("img.pngfix").attr("src").lastIndexOf(".")) + ".png") );" with "jQuery(this).find("img[class$=pngfix]").each( function(){"jQuery(this).attr('src', jQuery(this).attr('src').substring(0, jQuery(this).attr('src').lastIndexOf('.')) + '.png');});" in scripts\req\init.js
Replaced "lang="en" xml:lang="en" title="Avertissement" with "lang="fr" xml:lang="fr" title="Avertissement" in *col-ul-*.html
Replaced "http://www.canada.gc.ca/main_e.html" with "http://www.canada.gc.ca/home.html" in *col*-eng.html
Replaced "http://www.canada.gc.ca/main_f.html" with "http://www.canada.gc.ca/accueil.html" in *col*-fra.html
Replaced "VERSION 1.04" with "VERSION 1.05" of *.html

Version 1.04 - 2007-11-14

Summary of changes

Integrated version 1.1 of the Service Canada multimedia player
Integrated JavaScript in the Progressive Enhancement component for the display of title values for links with keyboard focus
Integrated JavaScript in the Progressive Enhancement component for displaying an initiative link slideshow
Corrected the alignment of the skip navigation links in Internet Explorer 7.x
Corrected the issue of skip navigation links persistently overlapping and obscuring other header elements in Internet Explorer 5.5, 6.x and 7.x (JavaScript must be enabled and supported).
Corrected printer-friendly support for multilingual and server message pages
Corrected a printer-friendly support issue in Internet Explorer 5.x and 6.x where the footer was randomly being included on more than one printed page
Corrected a printer-friendly support issue with the "Canada" wordmark when attempting to print out the server message page in landscape
Improved side menu support to allow div and p elements to look like h2 elements
Increased the font size of the headline class
Added a left margin to the image-right class that is equivalent in size to the right margin of the image-left class
Added the wrap utility class to allow floating of content to the right of the content area h1 in Internet Explorer

Updated files

base.css
base2.css
base-institution.css
pf-if.css
ctoam\css\base-institution.css
*.html
scripts\pe-ap.js
scripts\ca.gc.mp-jm.js (new)
scripts\ca.gc.sshw-mdiap.js (new)
swf\mp-jm.swf (new)
images\wmms.png (new)
images\sshw-mdiap\deco.gif (new)
images\sshw-mdiap\next-suiv.gif (new)
images\sshw-mdiap\pause.gif (new)
images\sshw-mdiap\play-jouer.gif (new)
images\sshw-mdiap\prev-prec.gif (new)

How to update Web pages based on version 1.03 of the template

Replace base.css with the updated version of the file
Replace base2.css with the updated version of the file
Migrate previous base-institution.css changes to the updated version of the file
Replace base-institution.css with the updated version of the file
Replace pf-if.css with the updated version of the file
Replace pe-ap.js with the updated version of the file
Add ca.gc.mp-jm.js to your scripts directory
Add ca.gc.sshw-mdiap.js to your scripts directory
Add mp-jm.swf to your swf directory
Add wmms.png to your images directory
Add sshw-mdiap\deco.gif to your images directory
Add sshw-mdiap\next-suiv.gif to your images directory
Add sshw-mdiap\pause.gif to your images directory
Add sshw-mdiap\play-jouer.gif to your images directory
Add sshw-mdiap\prev-prec.gif to your images directory
Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
- Replace "VERSION 1.03" with "VERSION 1.04"

Changes in detail

Changed the class "h2.nav" to "h2.nav, div.left div.h2nav, div.left p.h2nav" in base.css and base2.css
Changed the class "div.wrapContainer" to "div.center div.wrapContainer" in base.css
Changed the class ".fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" to ".fontSize100, .topPage" in base.css and base2.css
Changed the class "h6, .h6Size, .fontSize110" to "h6, .h6Size, .fontSize110, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" in base.css and base2.css
Changed the class "div.right li ul.nav" to "div.right li ul.nav, div.right li p.nav, div.right li div.nav" in base-institution.css and ctoam\css\base-institution.css
Changed the class "h2.nav, h2.nav a:link, h2.nav a:visited" to "div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited" in base-institution.css and ctoam\css\base-institution.css
Changed the class "h2.nav a:hover" to "div.left h2.nav a:hover, div.left h2.nav a:active, div.left h2.nav a:focus, div.left div.h2nav a:hover, div.left div.h2nav a:active, div.left div.h2nav a:focus, div.left p.h2nav a:hover, div.left p.h2nav a:active, div.left p.h2nav a:focus, div.right h2.nav a:hover, div.right h2.nav a:active, div.right h2.nav a:focus, div.right div.h2nav a:hover, div.right div.h2nav a:active, div.right div.h2nav a:focus, div.right p.h2nav a:hover, div.right p.h2nav a:active, div.right p.h2nav a:focus" in base-institution.css and ctoam\css\base-institution.css
Changed the class "div.fip" to "div.fip, div.cwm" in pf-if.css
Changed the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot1 a, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf-if.css
Changed the property "width: 100%;;" to "width: 100%;" in class "* html div.center h1" of base.css
Changed "VERSION 1.03" to "VERSION 1.04" in *.*
Removed the class "* html div.page div.core div.navaid a" from base.css
Removed the class "*:first-child+html div.page div.core div.navaid a" from base.css
Added the class "* html div.center h1.wrap" with the property "width: auto;" to base.css
Added the class "div.tooltip" with properties "border: 1px solid InfoText;", "background: InfoBackground;", "color: InfoText;", "font: message-box;", "padding: 2px 4px;", "text-align: left;", "position: absolute;", "width: auto;", and "height: auto;" to base.css
Added the class "div.safetooltip" with the properties "z-index: 21000;", "border: 1px solid #000;", "background-color: #fffeee;", "color: #000;", "font: 0.85em Verdana, Geneva, Arial, Helvetica, sans-serif;", "padding: 2px 4px;", "text-align: left;", "position: absolute;", "width: auto;", and "height: auto;" to base.css
Added the property "margin-left: 10px; to the class ".image-right" in base.css
Added the property "float: none;" to the class "div.center, * html div.center" in pf-if.css

Version 1.03 - 2007-06-12

Summary of changes

Improved the skip navigation links by enabling them to become visible when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device
Improved the appearance of the stylized leaf in the banner
Added support for boxes in the right side menu that do not contain lists
Added support for content area headlines
Corrected an issue with the printer-friendly functionality in Internet Explorer 6.x where an extra white page was being printed unnecessarily
Corrected a display issue in Netscape 7.x where the common menu bar links disappeared when the text size was increased enough to cause the common menu bar to wrap
Corrected a display issue in Netscape 6.x where the vertical white lines separating the common menu bar links were not the same height as the links
Corrected a display issue with the Proactive Disclosure link in the coat of arms example
Corrected a typo in the dcterms.modified metadata field.
Improved support for text wrapping around images and tables
Added a vertical bar between skip navigation links that was missing in the two column content page templates

Updated files

base.css
base2.css
base-institution.css
pf-if.css
ctoam\css\base-institution.css
*.html
lffl.gif
lffl.png (new)
inv.gif (new)
scripts\pe-ap.js (new)

How to update Web pages based on version 1.02 of the template

Replace lffl.gif with the updated version of the file
Replace base.css with the updated version of the file
Replace base2.css with the updated version of the file
Migrate previous base-institution.css changes to the updated version of the file
Replace base-institution.css with the updated version of the file
Replace pf-if.css with the updated version of the file
Add lffl.png to the same directory as lffl.gif
Add inv.gif to the same directory as lffl.gif
Add pe-ap.js to your scripts directory
Add the following code to all English content pages after "":
 <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"eng", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Add the following code to all French content pages after "":
 <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"fra", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Perform the following global search and replace operations (excluding quotes) for all HTML files using the two column template:
1. Replace "<a href="#cont">Skip to content</a>" with "<a href="#cont">Skip to content</a> |"
2. Replace "<a href="#cont">Passer au contenu</a>" with "<a href="#cont">Passer au contenu</a> |"
Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
1. Replace "dcterms.modifed" with "dcterms.modified"
2. Replace "class="lf"" with "class="lf pngfix""
3. Replace "VERSION 1.02" with "VERSION 1.03"

Changes in detail

Changed the class ".fontSize100, .topPage" to ".fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" in base.css and base2.css
Changed the class "div.wrapContainer" to "div.center div.wrapContainer" in base.css
Changed the class "div.right li ul.nav" to "div.right li ul.nav, div.right li div.nav, div.right li p.nav" in base-institution.css and ctoam\css\base-institution.css
Changed the class "div.left li.menucontent" to "div.left li.menucontent, div.left div.menucontent" in ctoam\css\base-institution.css
Changed the class "div.left li.menucontent, div.left a.menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" in ctoam\css\base-institution.css
Changed the class "div.right li.menucontent" to "div.right li.menucontent, div.right div.menucontent" in ctoam\css\base-institution.css
Changed the property "position: relative;" to "position: static;" in the class "* html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra" of base.css
Changed "dcterms.modifed" to "dcterms.modified" in *.html
Changed "VERSION 1.02" to "VERSION 1.03" in *.*
Removed the property "overflow: hidden;" from the class "div.fp, div.fpml" in base.css
Removed the property "overflow: visible;" from the class "* html div.fp, * html div.fpml" from base.css
Removed the property "float: left;" from the class "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
Removed the property "float: left;" from the class "li.fiptext div, li.fiptexta div, li.fiptextb div, li.fiptextc div" in base.css
Added the class "a:active, a:focus" with the property "cursor: auto;" to base.css
Added the class "div.fip, div.cwm" with the properties "position: relative;", and "z-index: 1;" to base.css
Added the class "* html div.fip, * html div.cwm" with the property "position: static;" to base.css
Added the class "*:first-child+html div.fip, *:first-child+html div.cwm" with the property "position: static;" to base.css
Added the class "*:first-child+html div.banner, *:first-child+html div.banner-eng, *:first-child+html div.banner-fra, *:first-child+html div.banner-lfcoa-eng, *:first-child+html div.banner-lfcoa-fra" with the property "position: static;" to base.css
Added the class "div.page div.core div.navaid" with the properties "font-size: 100%;", "float: none;", "overflow: visible;", "max-width: 50%;", "height: auto;", "top: 0px;", "margin-left: 210px;", "margin-right: 200px;", and "color: #FFF;" to base.css
Added the class "* html div.page div.core div.navaid" with the property "font-size: 90%;" to base.css
Added the class "*:first-child+html div.page div.core div.navaid" with the property "font-size: 90%;" to base.css
Added the class "div.page div.core div.navaid a" with the properties "color: #FFF;", "border-color: #FFF;", "padding: 5px;", "font-size: 100%;", "line-height: 140%;", "vertical-align: middle;", "border-width: 1px 1px 1px 1px;", "border-style: none;", "white-space: nowrap;", "position: relative;", and "z-index: 0;" to base.css
Added the class "* html div.page div.core div.navaid a" with the property "line-height: 180%;" to base.css
Added the class "*:first-child+html div.page div.core div.navaid a" with properties "float: left;", and "margin-left: 5px;" to base.css
Added the class "div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" with properties "border-style: solid;", "text-decoration: underline;", and "z-index: 2;" to base.css
Added the class "*:first-child+html div.fp, *:first-child+html div.fpml" with the property "float: none;" to base.css
Added the class "div.right li div.nav, div.right li p.nav" with properties "margin-bottom: 10px;", and "padding: 2px 5px 2px 12px;" to base.css
Added the class "div.right li p.nav" with the property "margin-top: 0px;" to base.css
Added the class "h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline, h1.compress, h2.compress, h3.compress, h4.compress, h5.compress, h6.compress, p.compress, ul.compress, ol.compress" with properties "margin-top: 0px;" and "margin-bottom: 0px;" to base.css
Added the class "h1.headline a:link, h1.headline a:visited, h2.headline a:link, h2.headline a:visited, h3.headline a:link, h3.headline a:visited, h4.headline a:link, h4.headline a:visited, h5.headline a:link, h5.headline a:visited, h6.headline a:link, h6.headline a:visited" with the property "text-decoration: none;" to base.css
Added the class "h1.headline a:hover, h2.headline a:hover, h3.headline a:hover, h4.headline a:hover, h5.headline a:hover, h6.headline a:hover" with the property "text-decoration: underline;" to base.css
Added the class "div.left div.wrapContainer, div.right div.wrapContainer" with properties "float: left;" and "width: 100%;" to base.css
Added the class "div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
Added the class "* html div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
Added the class "*:first-child+html div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
Added the class "div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" with properties "color: #000;", "background-color: #CC9;", and "border-color: #000;" to base-institution.css
Added the class "div.colLayout" with properties "background-color: #FFF;" and "height: auto;" to pf-if.css
Added the properties "position: relative;", and "z-index: 1;" to the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
Added the property "float: left;" to the class "div.fp, div.fpml" in base.css
Added the property "float: none;" to the class "* html div.fp, * html div.fpml" in base.css
Added the property "background-color: #FFF;" to the class "body" in pf-if.css
Added the property "height: 100%;" to the class "div.colLayout" in ctoam\css\base-institution.css
Added the following code to all English content pages after "":
 <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"eng", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>
Added the following code to all French content pages after "":
 <script src="scripts/pe-ap.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ var params = { lng:"fra", pngfix:"images/inv.gif" }; PE.progress(params); /* ]]> */ </script>

Version 1.02 - 2007-03-01

Summary of changes

Corrected several display issues in Internet Explorer 7 that were related to increasing the text size or increasing the zoom
Corrected a display issue in Firefox where the common menu bar links were being clipped at large font sizes
Corrected a display issue in Firefox where the banner text overlapped the common menu bar links at very large font sizes
Corrected a display issue in Firefox where the breadcrumb overlapped the side menu and the content area at very large font sizes
Corrected a display issue in Firefox where the footer elements overlapped one another at very large font sizes
Corrected a display issue in Firefox where the side menu text overlapped the content area text at very large font sizes
Corrected a display issue in Firefox where the Proactive Disclosure and footer colour strips were disproportionately small compared to the rest of the page at very large font sizes
Corrected a display issue in Firefox where the width of the page was disproportionately small compared to the rest of the page at very large font sizes
Corrected a minor printing issue in Internet Explorer that occasionally resulted in one or more words being excluded from the printout
Corrected the Welcome Page templates to prevent the repeating of the background images in the message area
Corrected a display issue in Firefox where the Welcome Page message area text overlapped other text on the page at very large font sizes
Corrected a display issue in Firefox when the message area text exceeds the message dimensions at very large font sizes
Corrected a display issue in Internet Explorer where a colour specified for the free space below the side menu and content areas did not cover the entire free space area
Changed the font for form controls from Courier New to Verdana
Added support for marketing campaign and government initiative-style banners and Welcome Pages
Added support for eNewsletters
Added the .wrapContainer utility class to make it easier to wrap text around tables and images
Updated the client-side CSS solutions to support the latest template changes

Updated files

base.css
base2.css
base-institution.css
3col.css
2col.css
pf-if.css (formerly pf.css)
wp-pa.css (formerly wp.css)
wp-pa2.css (formerly wp2.css)
wp-pa-institution.css (formerly wp-institution.css)
wp-pa.gif (formerly wp.gif)
wp-pa-alt.gif (formerly wp-alt.gif)
lffl.gif (formerly lf.gif)
wmms.gif (formerly wm.gif)
wp-pa*.html (formerly wp*.html)
3col*.html
2col*.html
1col*.html
srvmsg*.html

How to update Web pages based on version 1.01 of the template

Rename wp.gif to wp-pa.gif
Rename wp-alt.gif to wp-pa-alt.gif
Rename lf.gif to lffl.gif
Rename wm.gif to wmms.gif
Replace base.css with the updated version of the file
Replace base2.css with the updated version of the file
Migrate previous base-institution.css changes to the updated version of the file
Replace base-institution.css with the updated version of the file
Replace pf.css with pf-if.css
Replace wp.css with wp-pa.css
Replace wp2.css with wp-pa2.css
Migrate previous wp-institution.css changes to wp-pa-institution.css
Replace wp-institution.css with wp-pa-institution.css
Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
1. Replace "wp.css" with "wp-pa.css"
2. Replace "wp2.css" with "wp-pa2.css"
3. Replace "wp-institution.css" with "wp-pa-institution.css"
4. Replace "pf.css" with "pf-if.css"
5. Replace "wp.gif" with "wp-pa.gif"
6. Replace "wp-alt.gif" with "wp-pa-alt.gif"
7. Replace "wm.gif" with "wmms.gif"
8. Replace "lf.gif" with "lffl.gif"
9. Replace "id="siteuri"" with "class="siteuri""
10. Replace "id="center"" with "class="center""
11. Replace "id="left"" with "class="left""
12. Replace "id="right"" with "class="right""
13. Replace "VERSION 1.0 " with "VERSION 1.02 "
Perform the following global search and replace operations (excluding quotes) for all custom CSS used with the template (normally found in institution.css):
1. Replace "#siteuri" with ".siteuri"
2. Replace "#center" with ".center"
3. Replace "#left" with ".left"
4. Replace "#right" with ".right"

Top of Page

Changes in detail

Renamed wp.css to wp-pa.css
Renamed wp2.css to wp-pa2.css
Renamed wp-institution.css to wp-pa-institution.css
Renamed wp.gif to wp-pa.gif
Renamed wp-alt.gif to wp-pa-alt.gif
Renamed wm.gif to wmms.gif
Renamed lf.gif to lffl.gif
Renamed wp*.html to wp-pa*.html
Changed "css/wp.css" to "css/wp-pa.css" in wp-pa*.html
Changed "css/wp2.css" to "css/wp-pa2.css" in wp-pa*.html
Changed "css/wp-institution.css" to "css/wp-pa-institution.css" in wp-pa*.html
Changed "pf.css" to "pf-if.css" in 3col*.html , 2col*.html, and 1col*.html
Changed "id="siteuri"" to "class="siteuri"" in 3col*.html , 2col*.html , and 1col*.html
Changed "id="center"" to "class="center"" in 3col*.html , 2col*.html , 1col*.html , and srvmsg*.html
Changed "id="left"" to "class="left"" in 3col*.html , 2col*.html , 1col*.html , and srvmsg*.html
Changed "id="right"" to "class="right"" in 3col*.html , 2col*.html , 1col*.html , and srvmsg*.html
Changed "wm.gif" to "wmms.gif" in *.html
Changed "lf.gif" to "lffl.gif" in *.html
Changed "VERSION 1.0" to "VERSION 1.02" in *.*
Changed the class ".navaid" to "div.navaid, p.navaid, h1.navaid, h2.navaid" in base.css
Changed the class ".navaid a" to "div.navaid a, p.navaid a, h1.navaid a, h2.navaid a" in base.css
Changed the class ".fp, .fpml" to "div.fp, div.fpml" in base.css
Changed the class ".fpml" to "div.fpml" in base.css
Changed the class ".commonbar" to "ul.commonbar" in base.css
Changed the class ".fiptext, .fiptexta, .fiptextb, .fiptextc" to "li.fiptext, li.fiptexta, li.fiptextb, li.fiptextc" in base.css and base2.css
Changed the class ".fiptext" to "li.fiptext" in base.css
Changed the class ".fiptexta" to "li.fiptexta" in base.css
Changed the class ".fiptextb" to "li.fiptextb" in base.css
Changed the class ".fiptextc" to "li.fiptextc" in base.css
Changed the class ".fiptext div, .fiptextb div, .fiptextc div" to "li.fiptext div, li.fiptextb div, li.fiptextc div" in base.css
Changed the class ".fiptext a, .fiptexta a, .fiptextb a, .fiptextc a" to "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
Changed the class "#left, #right" to "div.left, div.right" in base.css
Changed the class ".menucontent, .menucontent li" to "li.menucontent, li.menucontent li, div.menucontent, div.menucontent li" in base.css
Changed the class ".menucontent" to "li.menucontent, div.menucontent" in base.css and base2.css
Changed the class ".menulink" to "a.menulink" in base.css
Changed the class ".menulink:hover" to "a.menulink:hover" in base.css
Changed the class ".prodis" to "div.prodis" in base.css and base-institution.css
Changed the class "#center" to "div.center" in base.css, 3col.css, and 2col.css
Changed the class "#center h1, h2, h3, h4, h5, h6" to "div.center h1, h2, h3, h4, h5, h6" in base.css
Changed the class "* html #center h1" to "* html div.center h1" in base.css
Changed the class ".blackborder" to "div.blackborder" in base.css, base-institution.css, and pf.css
Changed the class ".footer" to "div.footer" in base.css and base2.css
Changed the class ".footer div.footerline" to "div.footer div.footerline" in base.css
Changed the class ".foot1, .foot2, .foot3" to "div.foot1, div.foot2, div.foot3" in base.css
Changed the class ".foot1" to "div.foot1" in base.css
Changed the class ".foot2" to "div.foot2" in base.css
Changed the class ".foot3" to "div.foot3" in base.css
Changed the class ".uparrow" to "img.uparrow" in base.css
Changed the class ".date" to "span.date" in base.css
Changed the class ".gcinits" to "div.gcinits" in base.css
Changed the class ".gcinit div" to "div.gcinit div" in base.css
Changed the class "#center .gcinit div" to "div.center div.gcinit div" in base.css
Changed the class ".gcinit a, .gcinit a:visited" to "div.gcinit a, div.gcinit a:visited" in base.css
Changed the class "body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label" to "body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label, select, option, input, textarea" in base.css
Changed the class "select, option, input, textarea, code, code span" to "code, code span" in base.css
Changed the class "div.banner" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
Changed the class "p.main" to "div.banner p.main" in base.css , and base2.css
Changed the class "p#siteuri" to "div.banner p.siteuri" in base.css , and base2.css
Changed the class ".foot2 img, div.topPage img, p.topPage img" to "div.foot2 img, div.topPage img, p.topPage img" in base.css
Changed the class ".menucontent li" to "li.menucontent li, div.menucontent li" in base2.css
Changed the class "#left" to "div.left" in 3col.css and 2col.css
Changed the class "#right" to "div.right" in 3col.css
Changed the class "* html #center" to "* html div.center" in 3col.css and 2col.css
Changed the class ".colLayout" to "div.colLayout" in base-institution.css
Changed the class "#right li ul.nav" to "div.right li ul.nav" in base-institution.css
Changed the class "#left .menucontent" to "div.left li.menucontent, div.left div.menucontent" in base-institution.css
Changed the class "#left .menucontent, #left .menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" in base-institution.css
Changed the class "#right .menucontent" to "div.right li.menucontent, div.right div.menucontent" in base-institution.css
Changed the class "#right .menulink" to "div.right a.menulink" in base-institution.css
Changed the class ".blackborder:after" to "div.blackborder:after" in base-institution.css
Changed the class ".footer div.footerline"to "div.footer div.footerline" in base-institution.css
Changed the class ".footer a:link, .footer a:visited, div.center .footer a:link, #center .footer a:visited, #center .topPage a:link, div.center .topPage a:visited" to "div.footer a:link, div.footer a:visited, div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited" in base-institution.css
Changed the class "div.banner, .fp, #left, #right, .footer div.foot2 a, .footer div.foot3 a, .footer div.footerline, .navaid, .topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf.css
Changed the class "#center, * html #center" to "div.center, * html div.center" in pf-if.css
Changed the class ".headcontainer" to "div.headcontainer" in wp-pa.css , wp-pa2.css and wp-pa-institution.css
Changed the class ".mcontainter" to "div.mcontainter" in wp-pa.css
Changed the class ".fip" to "div.fip" in wp-pa.css
Changed the class ".wm" to "div.wm" in wp-pa.css
Changed the class ".msgarea, .msgareaalt" to "div.msgarea, div.msgareaalt, div.headcontainer" in wp-pa.css
Changed the class ".msgarea" to "div.msgarea" in wp-pa.css and wp-pa-institution.css
Changed the class ".msgareaalt" to "div.msgareaalt" in wp-pa.css and wp-pa-institution.css
Changed the class ".msgarea h1, .msgareaalt h1" to "div.msgarea h1, div.msgareaalt h1" in wp-pa.css and wp-pa-institution.css
Changed the class ".headtitleLft" to "div.headtitleLft" in wp-pa.css
Changed the class ".headtitleRgt" to "div.headtitleRgt" in wp-pa.css
Changed the class ".buttons" to "div.buttons" in wp-pa.css
Changed the class ".mlbuttons" to "div.mlbuttons" in wp-pa.css
Changed the class ".langbtn, .mllangbtn" to "div.langbtn, div.mllangbtn" in wp-pa.css
Changed the class ".mllangbtn" to "div.mllangbtn" in wp-pa.css
Changed the class ".lb, mlb" to "div.lb, div.mlb" in wp-pa.css
Changed the class ".lb a, mlb a" to "div.lb a, div.mlb a" in wp-pa.css
Changed the class ".lb a" to "div.lb a" in wp-pa.css
Changed the class ".mlb a" to "div.mlb a" in wp-pa.css
Changed the class ".imptext" to "div.imptext" in wp-pa.css
Changed the class ".imptext a, .imptext a:visited" to "div.imptext a, .imptext a:visited" in wp-pa.css
Changed the class "#inlft, #inrgt" to "div#inlft, div#inrgt" in wp-pa.css
Changed the class "#inlft a, #inlft a:visited, #inrgt a, #inrgt a:visited, .impnot" to "div#inlft a, div#inlft a:visited, div#inrgt a, div#inrgt a:visited, p.impnot" in wp-pa.css and wp-pa2.css
Changed the class ".msgarea h1" to "div.msgarea h1" in wp-pa-institution.css
Changed the property "height: 6.25em;" to "min-height: 5.58em;" in the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" of base.css
Changed the property "height: 1.56em;" to "min-height: 1.23em;" in the class "p.breadcrumb" of base.css
Changed the property "padding: 1px 0px 0px 3px;" to "padding: 1px 0px 5px 3px;" in the class "p.breadcrumb" of base.css
Changed the property "padding-right: 0px;" to "padding-right: 10px;" in the class "div.center, * html div.center" of pf-if.css
Changed the property "background: url(../images/wp.gif) #696;" to "background: url(../images/wp-pa.gif) #69C no-repeat;" in the class "div.msgarea" of wp-pa-institution.css
Changed the property "background: url(../images/wp-alt.gif) #696;" to "background: url(../images/wp-pa-alt.gif) #69C no-repeat;" in the class "div.msgareaalt" of wp-pa-institution.css
Removed "" from the classes "div.fp, div.fpml", "div.fpml" and "div.fiptext, div.fiptexta, div.fiptextb, div.fiptextc" in base.css
Removed the property "position: relative;" from the class "div.banner" in base.css
Removed the property "position: relative;" from the class "img.coa, img.lf" in base.css
Removed the properties "background-color: transparent;", and "font-weight: lighter;" from the class "div.banner p.siteuri" in base2.css
Removed the properties "height: 1.57em;", "height: 1.4em;", and "min-height: 1.57em;" from the class "div.fp, div.fpml" in base.css
Removed the property "height: 2.7em;" from the class "div.fpml" in base.css
Removed the properties "padding: 5px;", "min-height: 158px;", and "min-width: 135px;" from the class "div.blackborder" in base-institution.css
Added the class "div.banner-eng, div.banner-fra" with properties "min-height: 80px" , "padding-bottom: 0px;" , and "height: 80px;" to base.css
Added the class "div.banner-lfcoa-eng, div.banner-lfcoa-fra" with properties "min-height: 115px;" , "padding-bottom: 0px;" , "height: 115px;" , and "margin-top: 5px;" to base.css
Added the class "div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div.banner-lfcoa-fra img.coa, div.banner-lfcoa-fra img.lf" with the property "display: none;" to base.css
Added the class "div.banner-eng p.main, div.banner-eng p.siteuri, div.banner-fra p.main, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.main, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.main, div.banner-lfcoa-fra p.siteuri" with the properties "height: 0;", "width: 0;", "overflow: hidden;", "float: right;", "font-size: 0;", "position: absolute;", and "top: -100px;" to base.css
Added the class "div.wrapContainer" with the properties "width: 99.5%;" and "float: left;" to base.css
Added the class "div.fp" with the property "min-height: 1.57em;" to base.css
Added the class "* html div.fp" with the property "height: 1.4em;" to base.css
Added the class "* html div.fpml" with the property "height: 2.7em;" to base.css
Added the class "* html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra" with the property "position: relative;" to base.css
Added the class "* html img.coa, * html img.lf" with the property "position: relative;" to base.css
Added the class "* html div.fp, * html div.fpml" with the property "overflow: visible;" to base.css
Added the classes "div.banner-eng, div.banner-lfcoa-eng", and "div.banner-fra, div.banner-lfcoa-fra" with the property "background: url() #FFF no-repeat center center;" to base-institution.css
Added the class "div.msgarea h1.hidden, div.msgareaalt h1.hidden" with the properties "height: 0;", "width: 0;", "overflow: hidden;", "float: right;", "font-size: 0;", "position: absolute;", and "top: -100px;" to wp-pa.css
Added the property "padding-bottom: 0.67em;" to the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
Added the property "overflow: hidden;" to the class "div.fp, div.fpml" in base.css
Added the property "min-width: 6.6em;" to the class "div.foot1, div.foot2, div.foot3" in base.css
Added the property "min-width: 9.0em;" to the class "div.left, div.right" in base.css
Added the property "min-height: 0.9375em;" to the classes "div.prodis" and "div.footer div.footerline" in base.css
Added the class "div.blackborder" with the properties "padding: 5px;", "min-height: 158px;", and "min-width: 9.5em;" to base.css
Added the property "min-width: 12.00em;" to the class "div.page" in base.css
Added the property "height: 100%;" to the class "div.colLayout" in base-institution.css
Added the property "min-width: 18.5em;" to the class "div.mcontainter" in wp-pa.css
Added the property "min-height: 6.7em;" to the class "div.msgarea" in wp-pa.css
Added the property "min-height: 7.5em;" to the class "div.msgareaalt" in wp-pa.css

Version 1.01 - 2007-01-11

Summary of changes

Corrected a spelling error in the title of the bilingual and unilingual Welcome Pages templates
Corrected a display issue in Internet Explorer 7 where the common menu bar overlapped the breadcrumb links at larger font sizes

Updated files

base.css
wp.html
wp-alt.html
wp-alt-quebec.html
wp-alt-ul-fra.html
wp-ctoam.html
wp-quebec.html
wp-quebec-ctoam.html
wp-ul-fra.html
wp-ul-ctoam-fra.html

How to update Web pages based on version 1.0 of the template

Replace base.css with the updated version of the file
Perform the following global search and replace operation (excluding quotes) for all Welcome Pages using the template:
1. Replace "Page d'acceuil" with "Page d'accueil"

Changes in detail

Changed "Page d'acceuil" to "Page d'accueil" in the title of bilingual and unilingual Welcome Pages
Added "" to the class ".fp, .fpml" in base.css
Added "" to the class ".fpml" in base.css
Added "" to the class ".fiptext, .fiptexta, .fiptextb, .fiptextc" in base.css

Version 1.0 - 2007-01-05

Summary of changes

Initial release.

15.0 Enquiries

Further information on the GC CLF Template or on Common Look and Feel for the Internet is available by contacting the CLF Office at the following coordinates:

Address:: Common Look and Feel Office
Information Technology Division
Chief Information Officer Branch
Treasury Board of Canada Secretariat
2745 Iris Street
Ottawa, Ontario K1A 0R5
Email:: clf-nsi@tbs-sct.gc.ca
Telephone:: 613-952-6987
Toll free:: 877-636-0656
Facsimile:: 613-960-0050
Teletypewriter:: 613-957-9090 (TBS)

Common menu bar links

CLF 2.0 Standards and Guidelines

Accessibility Help

Table of Contents

2.1.1 Bilingual Welcome Page template

2.1.2 Unilingual Welcome Page template

2.1.3 Multilingual Welcome Page template

2.2.1 Text-based message area template (recommended)

2.2.2 Image-based message area template

2.3.1 Bilingual Welcome Page templates

2.3.2 Unilingual Welcome Page templates

2.3.3 Multilingual Welcome Page templates

3.1.1 Content page template for bilingual and multilingual sites

3.1.2 Content page template for unilingual sites

3.1.3 Content page template for languages other than English or French

3.2.1 Three-column template

3.2.2 Two-column template

3.2.3 One-column template

3.3.1 Content page templates for bilingual sites

3.3.2 Content page templates for unilingual sites

3.3.3 Content page templates for languages other than English or French

4.1.1 Unilingual server message page template

4.1.2 Bilingual server message page template

4.2.1 Unilingual server message page templates

4.2.2 Bilingual server message page templates

5.0 How to download the GC CLF templates

6.3.1 Configuring css\wp-pa-institution.css

6.3.1.1 Changing the background/foreground colours of the text-based message area (text-based message area template only)

6.3.1.2 Changing the background image of the image-based message area

6.3.1.3 Changing the background/foreground colours of the image-based message area

6.3.1.4 Changing the vertical positioning of the text in the image-based message area

6.3.2 Configuring css\base-institution.css

6.3.2.1 Changing the banner background

6.3.2.2 Changing the regular, visited, hover, active, and focus link colours for the content area

6.3.2.3 Changing the regular, visited, hover, active, and focus link colours for the breadcrumb, the footer, and the top of page links

6.3.2.4 Changing the background and foreground colours of the side menu titles

6.3.2.5 Changing the underlining for side menu titles that are regular, visited, hover, active, and focus links

6.3.2.6 Changing the background and foreground colours for text, regular links, and visited links in the left side menu text

6.3.2.7 Changing the underlining for regular, visited, hover, active, and focus links in the left side menu

6.3.2.8 Changing the background and foreground colours for text, regular links, and visited links in the right side menu (three-column template only)

6.3.2.9 Changing the underlining for regular, visited, hover, active, and focus links in the right side menu (three-column template only)

6.3.2.10 Changing the hover, active, and focus link colours in the left and right side menus

6.3.2.11 Changing the background colour of the proactive disclosure bar (three-column template only)

6.3.2.12 Changing the background colour of the footer bar

6.3.2.13 Changing the dashed borders in the left side menu

6.3.2.14 Changing the colour of the content area border (three-column template only)

6.3.2.15 Changing the colour of the right side menu border (three-column template only)

6.3.2.16 Changing the background colour of the free space below the side menus and the content area (two-column and three-column templates only)

6.3.2.17 Changing the background colour of the browser window surrounding the page

6.3.2.18 Changing the default colour of the heading elements (h1 - h6)

6.5.1 Bilingual Welcome Page template

6.5.2 Unilingual Welcome Page template

6.5.3 Multilingual Welcome Page template

6.6.2 Content page template for unilingual English sites

6.6.3 Content page template for unilingual French sites

6.6.4 Content page template for languages other than English or French

6.7.1 Unilingual server message page templates

6.7.2 Bilingual server message page templates

7.1.1 Selecting the templates

7.1.2 Creating a Web page from the selected templates

7.2.1 Selecting the template

7.2.2 Creating a Web page from the selected template

7.3.1 Selecting the template

7.3.2 Creating a Web page from the selected template

7.4.1 Selecting the template

7.4.2 Creating a Web page from the selected template

11.6.1 Internet Explorer 6.x custom client configurations

11.6.1.1 Windows appearances

11.6.1.2 Formatted with a custom style sheet

11.6.2 Mozilla Firefox 1.5 custom client configurations

11.6.3 Excluded features

11.6.4 Keyboards and alternate input access devices